Pricing Three Tier
BlockThree plans side by side, the middle one featured, under a monthly/annual switch with prices that roll.
- Pricing
- 6 components
- 1 file
Loading the example…
pnpm dlx @dowel-ui/cli add pricing-three-tierimport { DEFAULT } from "@/components/blocks/pricing-three-tier"; export default function Page() { return <DEFAULT />;}<PricingThreeTierBlock>
| Prop | Type | Default |
|---|---|---|
currencyISO 4217 code, formatted by Intl.NumberFormat. | string | "EUR" |
defaultPeriodInitial billing period when uncontrolled. | BillingPeriod | "yearly" |
description | ReactNode | "Pricing designed for teams of every size. Scale your business with confidence." |
heading | ReactNode | "Choose your perfect plan" |
headingLevelLevel of the section heading; each plan name is one level below. | 1 | 2 | 3 | 4 | 5 | 6 | 2 |
labelsVisible and announced text, for localisation. | Partial<PricingThreeTierLabels> | — |
localeFormatting locale. Defaults to the reader's. | Intl.LocalesArgument | — |
onPeriodChange | (period: BillingPeriod) => void | — |
periodControlled billing period. | BillingPeriod | — |
plans | PricingTierPlan[] | DEFAULT_PRICING_THREE_TIER_PLANS |
showPeriodToggleShows the monthly/annual control. | boolean | true |
Plus every attribute of <section> except title.
The billing period is a named radio group (arrow keys move between Monthly and Annually); switching it rewrites every price, so the change is announced politely. Each price is read once, as its settled value, not digit by digit. Each call to action names its plan ("Get started, Pro plan"), links are real links, the recommended plan is marked in text, and feature ticks are decorative. The cards' entrance and the rolling digits settle instantly under reduced motion.