Ledger Pricing
A pricing section set like a printed fee schedule, with odometer digits that roll between billing intervals.
Overview
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”.
When to use
- Marketing and product pages that need a complete, responsive band of content.
When not to use
- Inside dense app screens, where a smaller component fits better.
Installation
pnpm dlx shadcn@latest add https://sundaeui.dev/r/ledger-pricing.jsonnpx shadcn@latest add https://sundaeui.dev/r/ledger-pricing.jsonyarn dlx shadcn@latest add https://sundaeui.dev/r/ledger-pricing.jsonbunx --bun shadcn@latest add https://sundaeui.dev/r/ledger-pricing.jsonWorks in any React project. Files are written to components/sundae/. Read the source in the stage’s Code view. Pro assets need a personal token. See authenticated installs.
- No dependencies beyond React 18 or later.
- Copy ledger-pricing.tsx into components/sundae/.
- Make sure Tailwind scans that folder (v4 detects it automatically; v3 needs it in `content`).
- Import the component and use it as shown below.
Usage
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
| Prop | Type | Default |
|---|---|---|
plans*{ name, blurb, price: { monthly, yearly }, features, cta: { label, href }, highlight? }. | LedgerPlan[] | — |
currencyCurrency symbol. | string | '$' |
yearlyNoteShown beside the yearly option, such as “−20%”. | string | — |
defaultIntervalInitial interval. | 'monthly' | 'yearly' | 'yearly' |
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.
Customization
- Built for three plans. Change md:grid-cols-3 to support two or four.
- Map font-serif to an editorial typeface. The layout assumes a high-contrast serif.
FAQ
- Is Ledger Pricing free?
- Ledger Pricing is part of Sundae Pro. The live preview is open to everyone; the source installs with a Pro account.
- How do I install Ledger Pricing?
- Run npx shadcn@latest add https://sundaeui.dev/r/ledger-pricing.json. The files are written to components/sundae/. It has no dependencies beyond React 18 or later.
- Does Ledger Pricing support keyboard and screen readers?
- 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.
- Does Ledger Pricing respect reduced motion?
- Yes. With prefers-reduced-motion set, decorative motion is removed and state changes are instant.
More like this
All sections →Margin Quote
Sections · Editorial- Pro
Bento Features
Sections · Understated - Pro
Billboard Hero
Sections · Brutalist - Pro
Changelog Timeline
Sections · Editorial - Pro
Newsletter CTA
Sections · Refined - Pro
Product Footer
Sections · Understated