Smeltery Pricing
A three-tier pricing section: an accessible monthly/annual radiogroup toggle (annual = two months free) flips prices via Tally odometer drums, the featured tier is raised inside a Filament traveling-border card with a Sheen CTA, and quiet bordered cards carry the rest. Custom-priced tiers ignore the toggle. Stacks at 360px, three-up on desktop.
csspro
Pro
The preview is live. The source is Pro.
One purchase, lifetime access: every pro component's source, CLI install with your own registry token, and all future drops.
Installation
CLI
npx shadcn@latest add @crucible/smeltery-pricingProps
| Prop | Type | Default | Description |
|---|---|---|---|
| heading | string | "Pricing" | Section heading rendered as an h2. |
| tiers | SmelteryTier[] | the three Forgewright tiers | The pricing tiers, rendered in order. |
| showToggle | boolean | true | Show the monthly/annual billing toggle. Annual pricing is computed as two months free (monthly × 10 ÷ 12, rounded). |
| currency | string | "USD" | ISO 4217 currency code for price formatting. |
Also accepts all props of React.ComponentPropsWithoutRef<"section"> — they pass through to the underlying element. | |||
Honors prefers-reduced-motion with a designed static fallback, and passes className through.