Pricing Single Plan
BlockOne plan with every feature, under a monthly/annual switch with a price that rolls.
- Pricing
- 6 components
- 1 file
Loading the example…
pnpm dlx @dowel-ui/cli add pricing-single-planimport { DEFAULT } from "@/components/blocks/pricing-single-plan"; export default function Page() { return <DEFAULT />;}<PricingSinglePlanBlock>
| Prop | Type | Default |
|---|---|---|
currencyISO 4217 code, formatted by Intl.NumberFormat. | string | "EUR" |
defaultPeriodInitial billing period when uncontrolled. | BillingPeriod | "yearly" |
description | ReactNode | "One plan, all features. No hidden fees, no complicated tiers." |
heading | ReactNode | "Simple pricing for everyone" |
headingLevelLevel of the section heading; the plan name is one level below. | 1 | 2 | 3 | 4 | 5 | 6 | 2 |
labelsVisible and announced text, for localisation. | Partial<PricingSinglePlanLabels> | — |
localeFormatting locale. Defaults to the reader's. | Intl.LocalesArgument | — |
onPeriodChange | (period: BillingPeriod) => void | — |
periodControlled billing period. | BillingPeriod | — |
plan | PricingTierPlan | DEFAULT_PRICING_SINGLE_PLAN_PLAN |
savingsA note under the period control, e.g. what annual billing saves. | ReactNode | ( <> <span className="font-medium text-primary">Save 20%</span> on annual billing </> ) |
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 the price, so the change is announced politely, and the price is read once as its settled value. The call to action names the plan ("Get started, Pro plan") and is a real link. The accent stripe and feature ticks are decorative. The entrance and the rolling digits settle instantly under reduced motion.