shadcn.io is not affiliated with official shadcn/ui
Support Tiers Pricing Block for React Aria
Three support tiers for managed Postgres ranked by how fast they answer: each row leads with its response time and a bar as long as the answer is quick, then its price and button.
Installation
Overview
Sell support by how fast it answers with this support tiers pricing section, shown here for Bastion Postgres, a managed Postgres service with Community, Business and Premier support. Each tier is a row of one band between the page's solid side rails, ruled between rows, with + marks on its corners under the spine's top rule, and the row's first thing to read is its critical-issue response time at display size, "Best effort", "1 hour" and "15 minutes", over a Progress bar that is as long as the answer is quick. Under the bar, one line says the channels and hours; beside it are the tier's name and description, its price, which rolls to its new amount with Sliding Number when the Segment Group switch in the header row changes the period, and a Shine Button. The bars fill in once on first paint, the slowest is a quiet grey, and Business is tinted, carries a Most teams outline Badge and holds the only primary button. From lg a tier is one line about 115 px tall. Built with Badge, Guides, Progress, Segment Group, Sliding Number, Shine Button and Lucide icons, with CSS transitions only. For hosted infrastructure, developer platforms, managed services and any plan where the service level is what you sell.
FAQ
How do I change the tiers, response times and bars?
Edit the TIERS array at the top of the file. Each tier has a name, a description, its response time in words, a speed from 0 to 100 that sets the bar's length, a coverage line for channels and hours, an icon, its monthly price (0 shows "Free"), its annual price (the monthly amount when billed yearly, 15% off here), featured for the tinted row with the primary button and an optional badge, and the button's cta and href. Keep speed in step with response: the bar is a picture of the same fact, not data of its own.
What do the bars mean, and are they accessible?
A longer bar means a faster response, so the quick answers look like the full bars. They're decorative: each is hidden from screen readers because the response time is written next to it as text, so nothing depends on seeing the bar. They grow once on first paint (about a second, each row a little after the one above), and with reduced motion they appear at their final length.
How do I connect the buttons to checkout or sales?
Each button is a real link to its tier's href: point Business at a checkout with the tier and billing period in the URL, for example /checkout?support=business&billing=annually, the free tier at your forum, and Premier at your sales form.
It's a ShineButton with href, which React Aria renders as a link and routes through its router provider.
Is the support tiers section accessible?
Yes. The tiers are a list, each tier's name is an h3 under the section's h2, and the response time, the channels and the price are plain text. Each price keeps its amount in visually hidden text with "per month", each button names its tier ("Start Business, Business support"), and the billing switch is a radio group named "Billing period": arrow keys move and select.
How does it look on a phone?
Below the lg breakpoint each tier stacks: the name and description, then the response time with its bar and its coverage line, then the price with its button on one line, so the Business button is within the first screen and a half. From lg the four parts (tier, response, price, button) are four columns of one line.
When should I price support as its own tiers?
When what customers buy is a service level: hosted software, infrastructure and anything where an outage costs money. Putting the response time first lets a buyer compare the one number they care about. If support is just one line among many plan features, a comparison table row is enough.