Pricing tiers

Three plans with a monthly/yearly switch and the saving, the popular plan raised, and what each includes.

$ pnpm dlx shadcn@latest add @dashral/pricing-tiers

When to use

Three plans with a monthly/yearly switch and the saving, the popular one raised.
The pricing page of a subscription product.

When not to use

Prices that depend on seats or usage: Pricing calculator.
A single plan: say the price in the hero or a CTA.

Usage

Pricing tiers with your own data: every prop has the sample as its default, so pass only what you have.

example.tsx

1import { PricingTiers } from "@/components/dashral/blocks/pricing-tiers"
2
3<PricingTiers
4  plans={plans}
5  currency="EUR"
6  defaultBilling="yearly"
7  onSelect={(plan, billing) => checkout(plan.name, billing)}
8/>

API reference

PricingTiers

Plans side by side: a monthly/yearly switch that shows the saving, the popular plan raised and marked, what each includes, and its action. The prices ease to their new value when the billing changes. Stacks on phones. Every part comes from props.

Prop	Type	Default
`eyebrow`	`React.ReactNode`	`"Pricing"`
`title`	`React.ReactNode`	`sample`
`description`	`React.ReactNode`	`sample`
`plans`	`TierPlan[]`	`sample`
`saving`	`string` The badge beside the billing switch; none hides it.	`"Save 20%"`
`defaultBilling`	`Billing`	`"yearly"`
`currency`	`string`	`"USD"`
`locale`	`string`	`"en-US"`
`onSelect`	`(plan: TierPlan, billing: Billing) => void` A plan's button without an href: the plan and the billing picked.	—

type Billing

= "monthly" | "yearly"

type TierPlan

A plan: its prices a month (yearly is the monthly price when billed yearly), its button and what it includes.

Prop	Type	Default
`name`	`string`	—
`blurb`	`string`	—
`price`	`{ monthly: number; yearly: number }`	—
`cta`	`string`	—
`href`	`string` Where the button goes; without it, onSelect hears the pick.	—
`popular`	`boolean`	—
`features`	`string[]`	—