## Ledger Pricing (S—014)

A pricing section set like a printed fee schedule, with odometer digits that roll between billing intervals.

- URL: https://sundaeui.dev/components/ledger-pricing
- Category: Page sections · Art direction: Editorial
- Access: Sundae Pro (authenticated install)
- Stack: React 18+, TypeScript, Tailwind CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/ledger-pricing.json`
- Tags: tailwind, saas, pricing, section, animated, react, landing-page

Pricing as a typographic page rather than three floating cards. Plans sit in ruled columns under a heavy rule, features are listed on dashed lines like a ledger, and the prices use a large serif.
Switching between monthly and yearly rolls each digit to its new value, odometer-style, so the change is visible and easy to read. Digits are right-aligned, so columns never jump when a price gains or loses a digit.
The highlighted plan is marked by a faint tinted column, not a badge or glow. It stacks cleanly on mobile, and screen readers hear complete phrases such as “$12 per month, billed yearly”.

### Usage

```tsx
import { LedgerPricing } from '@/components/sundae/ledger-pricing'

<LedgerPricing
  yearlyNote="−20%"
  plans={[
    { name: 'Notebook', blurb: '…', price: { monthly: 0, yearly: 0 }, features: ['3 projects'], cta: { label: 'Start free', href: '/signup' } },
    { name: 'Studio', blurb: '…', price: { monthly: 15, yearly: 12 }, features: ['…'], cta: { label: 'Start trial', href: '/signup?plan=studio' }, highlight: true },
  ]}
/>
```

### Props

- `plans` (`LedgerPlan[]`, required): { name, blurb, price: { monthly, yearly }, features, cta: { label, href }, highlight? }.
- `currency` (`string`, default `'$'`): Currency symbol.
- `yearlyNote` (`string`): Shown beside the yearly option, such as “−20%”.
- `defaultInterval` (`'monthly' | 'yearly'`, default `'yearly'`): Initial interval.

### Accessibility

- The interval toggle is a radio group. Prices include a screen-reader-only sentence, and the rolling digits are aria-hidden.
- Digit rolling is disabled under motion-reduce.