Three Columns Stat Chips Pricing Block for React

Edit the PLANS array at the top of the file. Each plan has its name, description, the number of clients it holds (null shows the infinity sign and reads "Unlimited"), its seats text, its monthly price, a featureHeading and features, the call to action's cta and href, an optional badge and popular. The annual price comes from ANNUAL_DISCOUNT (20%) and is rounded to whole units, and the line under it states the yearly total.

Yes. The numeral is the plan's main limit and the chip its second one, so swap them for projects and storage, sites and users, or API keys and requests. Keep the numeral a number: it's set in tabular figures at text-7xl, and a long word will not fit the column. The chip is plain text, so any short phrase works, and keeping its length similar across plans keeps the columns even.

From md the three columns share four rows through CSS subgrid: the name and description, the numeral and chip, the price with its button, and the features. A longer description pushes the other columns' numerals, prices and buttons down with it, so they stay level. The badge sits beside the plan's name, so it never changes a row's height.

Each call to action is a real link to its plan's href. It's a ShineButton with render set to an a element and nativeButton={false}. Point each at your trial or checkout route with the billing period in the URL, and change the Network plan's cta to "Contact sales" and its href to your sales form if you'd rather talk to those buyers.

The billing switch and the plan tabs are radio groups named "Billing period" and "Plan": Tab reaches the selected option and the arrow keys change it. Plan names are h3 headings under the section's h2, the checks are hidden from screen readers, an unlimited capacity is read as "Unlimited" rather than as a symbol, and each price says "per month" in visually hidden text. Each call to action names its plan, as in "Start free trial, Agency plan", since the plans share one label.

Use it when your buyers grow by adding accounts, clients or seats: agencies compare "how many clients can I run" before any feature. The numeral puts that number at the head of every column, where it's read first. When tiers differ mostly by features rather than limits, a plain three-column layout such as Three Columns Pricing reads faster.