Pricing
A full premium-dark pricing page: eyebrow + headline + subhead header with a real keyboard-operable monthly/annual toggle that live-updates every price, a three-tier plan-card row with one accent-ringed most-popular card and per-tier feature checklists and CTAs, a grouped feature-comparison table with check/dash cells, an FAQ accordion composed from Fold, and a closing CTA band — every string, tier, comparison row, and FAQ a prop, one cool-indigo accent knob.
motionpro
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/pricingManual — install dependencies, then copy the source
npm install motionProps
| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "Pricing" | Small uppercase kicker above the headline. |
| headline | React.ReactNode | "Pricing that scales with you." | Headline. |
| subhead | React.ReactNode | Supporting line under the headline. | |
| currency | string | "$" | Currency symbol prefixed to every numeric price. |
| tiers | PricingTier[] | The three (or more) plan cards. | |
| savingsLabel | string | "Save 20%" | Copy for the annual savings pill beside the toggle. |
| defaultPeriod | PricingPeriod | "monthly" | Which cadence is selected on mount. |
| comparison | PricingComparisonGroup[] | Feature comparison groups rendered in the table below the cards. | |
| comparisonHeading | React.ReactNode | "Compare every plan" | Heading above the comparison table. |
| faqs | FoldItem[] | FAQ question/answer pairs (rendered through the Fold accordion). | |
| faqHeading | React.ReactNode | "Questions, answered" | Heading above the FAQ accordion. |
| ctaHeadline | React.ReactNode | Closing CTA-band headline. | |
| ctaSubhead | React.ReactNode | Closing CTA-band supporting line. | |
| ctaPrimary | PricingAction | Primary action in the closing CTA band. | |
| ctaSecondary | PricingAction | Secondary action in the closing CTA band. | |
| accent | string | "#818cf8" (cool indigo) | Signature hue, any CSS color. |
Also accepts all props of Omit<React.ComponentPropsWithoutRef<"main">, "children" | "title"> — they pass through to the underlying element. | |||
Honors prefers-reduced-motion with a designed static fallback, and passes className through.