Pricing table

Pricing table

Plan cards with a monthly / yearly switch, a highlighted plan, included and excluded features, and prices that roll to the new number.

Group

Pricing

Origin

Inspired · Original (this library)

License

MIT

Added

Oct 22

npx shadcn@latest add @deank/pricing-table

The registry stays private. Install from the repo with a GitHub token — see the README.

Usage

import { PricingTable } from "@/registry/blocks/pricing-table/pricing-table";

<PricingTable plans={[/* … */]} />

Prop	Type	Default	Description
`plans`	`PricingPlan[]`
`currency?`	`string`	`"$"`
`yearlyNote?`	`string`	`"Save 20%"`	e.g. "Save 20%" next to the yearly option
`defaultBilling?`	`"monthly" \| "yearly"`	`"monthly"`

SaaS pricing pages and upgrade screens with two to four plans.

Usage-based calculators or more than four plans (build a comparison table, for example with data-grid).