Features & services
Pricing Plans
A centred intro, a monthly / yearly switch whose prices roll a line, three plans with one featured, and a closing row.
Layout and motion from the Metuo template — see it in contextTry it in the page builderBlocks come with Pro
Preview every block now, in any theme and at any width. The source, the install command and the AI prompt unlock when Pro opens, once the catalog reaches 20 templates.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| label / title / lead | string | — | The centred intro: a small label, the h2 (up to 520px) and the lead (up to 480px). |
| billing | { monthly, yearly, discount?, perMonth, perYear, label } | Monthly, Yearly (32% off) | The switch's words (the discount in the primary colour), what each price is per, and the switch's accessible name. The switch shows only when a plan has a yearly price. |
| plans | { name, description?, price: { monthly, yearly? }, includes[], note?, action, featured? }[] | 3 plans | In order. A featured plan takes the primary colour and, from 768px to 1023px, the right column alone across both rows. |
| includesLabel | string | "Includes:" | The line over each card's list. |
| note | { title, text, link? } | false | — | The closing row: a title at the left and a line with a link at the right from 1024px. |
| buttonStyle | "spring" | "flip" | "sweep" | "spring" | The look of the cards' buttons; the featured card's is the secondary one. |
| className | string | — | Classes for the <section>. |
- One column on phones; from 768px two columns with the featured plan alone at the right; from 1024px three across, tops aligned.
- Yearly rolls each price up one line in its window (a 0.4s spring with no bounce, as a CSS curve); an invisible copy of the current price sizes the window and is what screen readers read. With reduced motion the prices swap at once.
- The switch is shadcn's; only it is a control (the words beside it are not).
