KB-211 · PRICING/MERIDIAN/TIERS
Meridian Tiers Pricing
Three tiers under one billing switch. The switch is the library's own segmented control, and the prices are readouts — flip the billing and every numeral carry-rolls to its new value instead of blinking, so the difference between the modes is something you watch happen. The chosen tier stands taller and carries a seal; the maths never moves a card.
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/pricing-meridian-tiers
Props
- tiers
- MeridianTier[]
- default —
- Name, blurb, monthly and annual prices, features, and an optional seal.
- unitLabel
- string
- default "/ seat / month"
- What the price is per. A product that sells basins or projects should not price in seats.
- onSelect
- (tierId, billing) => void
- default —
- Fired with the tier and the active billing mode.
| Prop | Type | Default | Description |
|---|---|---|---|
| tiers | MeridianTier[] | — | Name, blurb, monthly and annual prices, features, and an optional seal. |
| unitLabel | string | "/ seat / month" | What the price is per. A product that sells basins or projects should not price in seats. |
| onSelect | (tierId, billing) => void | — | Fired with the tier and the active billing mode. |