React pricing tables

Tiers, toggles, comparison grids and the single-plan case.

A pricing section has one job — make the choice obvious — and the layout does most of that work: three tiers with the middle one visually recommended converts better than four equal columns, because four columns is a spreadsheet. These ship with the monthly/annual toggle, the feature comparison and the enterprise row already wired, since those are the three pieces everybody adds a week later.

8 matching8 blocksFree to copy
Open the full page for this block

Three-Plan Pricing Toggle

Three plans with a monthly/yearly switch, yearly prices derived from the monthly figure so the two can never disagree.

Pricing192 lines1 dep
Open the full page for this block

Single-Plan Price Card

One price given a whole card, with the objection a one-time price raises answered under the button rather than in a FAQ further down.

Pricing145 lines1 dep
Open the full page for this block

Tiered Usage Calculator

A slider that turns a rate card into the number a buyer actually cares about, with a per-tier breakdown so the total can be checked rather than taken on trust.

Pricing224 linesNo deps
Open the full page for this block

Plan Comparison Matrix

A real table with scoped headers, a sticky first column and screen-reader text behind every check and dash.

Pricing145 lines1 dep
Open the full page for this block

Prepaid Credit Packs

One-time packs with the per-credit price worked out for the reader and the saving stated rather than implied — the pricing shape for a product that sells quantity, not a subscription.

Pricing218 lines1 dep
Open the full page for this block

In-App Plan Picker

A native radiogroup of plans with the current one disabled and the prorated charge announced as it changes — the upgrade dialog, not the marketing table.

Pricing242 lines1 dep
Open the full page for this block

Pricing Value Split

The case for the price, made beside the price — what the alternative costs, in the units a buyer already measures.

Pricing158 linesNo deps
Open the full page for this block

Plan Limits List

What actually runs out on each plan, including what happens when it does — the row a pricing table leaves off.

Pricing149 linesNo deps

Questions about react pricing tables

How many tiers should I show?
Three, in almost every case, plus a contact row if you sell upward. Two makes the cheaper one look like a trap and four makes people compare instead of choose.
Do these handle the annual discount maths?
The toggle switches the displayed figure and the per-period label; the numbers themselves are props. Keep the annual price as a real monthly equivalent with the billing terms next to it — "$20/mo billed annually" — rather than a total, which reads as a price rise.
Are these react pricing tables free to use?
All 8 are free to copy and use in your own projects, including commercial ones. A Pro licence exists for redistribution — shipping them inside a product other people buy — and the full terms are on the licence page.
How do I add one to my project?
Install it with the CLI: `npx hoverlab add pricing-tiers` writes the component and its dependencies into your project. Every artifact here also has a copy button for the raw source, and an "Open in sandbox" link if you would rather try it first.