shadcn.io is not affiliated with official shadcn/ui
Three Columns Stat Chips Pricing Block for Ark UI
Three agency plans in columns that share their hairlines, each headed by its client capacity as a huge numeral over a chip with its team seats, under a monthly and annual switch.
Installation
Overview
Put capacity first with this three-column stat chips pricing section. Each plan column opens with its name and one line of description, then the number that sets the tiers apart, how many clients it holds, as a huge numeral: 5, 25, then an infinity sign for unlimited. A pill chip under it holds the team seats with an icon, and below come the price, a full-width Shine Button and a checklist of what the plan adds. The three columns share their hairlines in one band, share their rows through CSS subgrid so prices and buttons line up, and the Agency column is tinted with a Most chosen outline Badge and the only filled button. A Segment Group in the header row switches between monthly and annual billing, and each price rolls to its new amount with Sliding Number. Below the md breakpoint a second Segment Group, the plan tabs, shows one plan at a time. The section sits on the page's drafting lines, drawn by Guides: rails at the edges of the page column, a rule along its top with a + on each crossing, and the same marks at the corners of the plan band. Built with Guides, Badge, Segment Group, Sliding Number, Shine Button and Lucide icons, with CSS transitions only. For agency platforms, client portals, seat-based B2B products and any pricing where capacity limits set the tiers apart.
FAQ
How do I change the plans, prices and capacities?
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.
Can I show something other than clients and seats?
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.
How do the columns stay aligned when descriptions differ in length?
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.
How do I send each plan to checkout or to sales?
Each call to action is a real link to its plan's href. It's a ShineButton wrapping an a element. 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.
Is it accessible?
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.
When does capacity-based pricing beat a generic feature ladder?
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.