shadcn.io is not affiliated with official shadcn/ui
Support Tiers Pricing Block for React
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 render set to an a element and nativeButton={false}.
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.
Related
- Pro
Headroom Bars Pricing
Usage and creditsOne card of capacity bars for an uptime monitor: each grows from a Free limit to Pro's, with a chip counting how many times more Pro gives, and the upgrade button at the card's top right.
- Pro
Metric Hero Rows Pricing
Plan rowsFour CDN plans as rows of one hairline table, each led by its monthly transfer: a bar to scale across the row with the allowance written big at its end, then the price and a call to action.
- Pro
Team Tiers With Avatar Clusters
Seats and teamsThree team-size plans, each opening with a cluster of avatars sized to its host range, then its per-host price, a call to action and its features, with a segmented plan switcher on a phone.
- Pro
Sales Call Scheduler Pricing
Sales and partnersEnterprise pricing by conversation: a scheduler with a strip of the next five working days and a grid of time slots in the visitor's own time zone, then a confirmation.
- Pro
Feature Matrix Pricing
Comparison tablesA feature matrix you can interrogate: search the features, hide the rows every plan shares with a switch, and watch a live count in the table's corner, over four chat plans and twenty-eight features.
- Pro
Three Columns Pricing
Plan cardsThe canonical three-column pricing section for a team knowledge base: Personal, Team and Company cells under a monthly and yearly switch, each outlined by hairlines that overshoot its corners, the recommended plan raised, one plan at a time on phones.