Docs / Guide: Building a Pricing Page
Three plans, one switch, and prices that survive the toggle.
Monthly/yearly is the Pricing block’s own composition: a Switch flips data attributes on the prices, so the numbers in the page are the numbers that were checked. Never compute prices in the browser from a formula nobody audited — write both prices down, in the markup, where a reviewer can diff them.
Yearly shows the monthly-equivalent price with the saving stated once, plainly. “Save 17%” is a claim; make sure it is arithmetically true on every plan, including the free one.
Three plans, the middle one marked — not because it is the most profitable, but because it is the right default for the reader the page is for. The block’s .plan-hot and its badge exist for exactly one plan. Two highlighted plans is a page that refuses to recommend, and readers can tell.
Feature lists compare downward: every plan lists what it adds over the one before. A grid of forty checkmarks and crosses is a spreadsheet wearing a costume.
The FAQ block answers the five questions pricing always raises — switching, refunds, seats, taxes, cancellation — and after it, one CTA Band. A pricing page that ends at the table assumes the reader decided; most have not, and the questions are the decision.
Getting Started · Theming · Dark Mode · Accessibility · Installation · JavaScript · Guide: Building a Dashboard · Guide: Building a Settings Page · Guide: Sign-in & Account Pages · Why Vanilla · The Mold · Anatomy of a Part · Coming from Tailwind · FAQ · Changelog