# Pricing — Page Template for React

> 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.

- Page: https://crucibleui.com/components/templates/pricing
- Category: [templates](https://crucibleui.com/components/templates)
- Tier: pro (one-time purchase, see https://crucibleui.com/pricing)
- Engine: motion
- npm dependencies: motion

## Install

```bash
npx shadcn@latest add @crucible/pricing
```

Pro install requires adding the token-bearing `@crucible` registry to components.json (issued at https://crucibleui.com/account after purchase).

Import from `@/components/crucible/pricing`.

## Props (`PricingTemplateProps`)

| 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: `Omit<React.ComponentPropsWithoutRef<"main">, "children" | "title">`.

## Usage example

```tsx
import { PricingTemplate } from "@/components/crucible/pricing";

export default function PricingTemplateDemo() {
  return (
    <div className="relative isolate h-[560px] w-full overflow-hidden rounded-xl bg-neutral-950">
      <PricingTemplate className="h-full overflow-y-auto overflow-x-hidden overscroll-contain" />
    </div>
  );
}
```

## Accessibility & performance

Honors `prefers-reduced-motion` with a designed static frame or fade (never a blank box) and passes `className` through.