initial headless components usage

[tenub]

Summary

Demonstrates using Schematic's new headless components (@schematichq/schematic-components) in the example app. Adds two consumer-styled UI elements driven by Schematic hooks:

• Trial pill in the navbar that shows the trial end date, using TrialPill.* fed by useSchematicPlan().
• Usage meter on the weather search UI that replaces the old plain x / y used pill with a UsageMeter.* track/fill, using the existing useSchematicEntitlement("weather-search") data.

Changes

• TrialDetails.tsx (new) — wraps TrialPill.Root/TrialPill.EndDate, sourcing trialEndDate/trialStatus from useSchematicPlan(). Rendered in the navbar for signed-in users.
• UsageDetails.tsx (new) — wraps UsageMeter.Root/Track/Fill/ValueText, taking featureAllocation/featureUsage from a CheckFlagReturn. The fill width and color (color-mix green→red) scale with usage percent, and the track is only shown when usage and allocation are both > 0.
• Navbar.tsx — renders <TrialDetails /> alongside the Clerk UserButton.
• Weather.tsx — hoists the useSchematicEntitlement("weather-search") call into a weatherSearch variable and spreads it into <UsageDetails />, replacing the hand-rolled usage-pill markup.

Notes

These components rely on the headless building blocks in @schematichq/schematic-components; the inline <style> blocks show how a consumer can theme them via the documented CSS class names.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
schematic-next-example	Error		Jul 13, 2026 3:09pm