shadcn.io is not affiliated with official shadcn/ui
Popular Choice Pricing Block for Ark UI
What customers chose: a full-width segmented bar sized by the share of teams that picked each plan (18, 64 and 18 percent), where each segment is a tab that opens its plan, with its price, call to action and features, right under the bar.
Installation
Overview
Show where other buyers landed with this popular choice pricing section, shown for Porchlight Chat, a live-chat product. The bar is the hero: three segments as wide as the share of teams that chose each plan, 18% Basic, 64% Growth and 18% Scale, each with its percentage under it. Each segment is a tab in a Tabs list, so choosing one opens its plan in a band under the bar: the name, a price at display size that rolls with Sliding Number, a Shine Button and the features it adds, split from them by a hairline with + marks on the band's corners. Growth is open first, carries an outline Most chosen Badge and the section's one primary button. The bar's fills use the foreground colour, never a palette colour. Built with Tabs, Sliding Number, Badge, Shine Button, Guides and Lucide icons, with CSS transitions only. For SaaS pricing pages with a clear favourite and the data to prove it.
FAQ
How do I change the plans and the shares?
Edit the PLANS array at the top of the file. Each plan has its name, description, monthly price, call to action (cta and href), a featureHeading and its features, and a share, the percentage of teams that chose it. The segments' widths come from share, so they follow whatever numbers you give them, but the shares should add up to 100. POPULAR_ID is the plan that opens first and gets the Most chosen badge and the primary button; the line under the bar says what the shares measure.
Where do the percentages come from, and what if I don't have them?
Work them out from your own subscriptions, for example the plans picked by every team that started a paid plan in the last 90 days, and say so in the line under the bar. Don't invent a figure: if you don't have the data, a bar of invented numbers is a false claim. Use a block without one, such as a featured plan with a badge, until you do.
How do I connect the buttons to checkout?
Each call to action is a real link to its plan's href. It's a ShineButton with asChild around an a element. Add the plan to it, such as /checkout?plan=growth, and let your server pick the matching price from your payment provider.
Is the bar accessible?
Yes. It's a real tab list named "Plans, sized by the share of teams that chose them", and each segment is a tab named after its plan and its share, such as "Growth, chosen by 64% of teams". Tab reaches the selected segment, the arrow keys move between segments and open their plan, and the open plan is the tab panel. The coloured fill and the percentages are decorative copies of the tab's name, so a screen reader doesn't read them twice, and the open segment is marked by its solid fill and its darker percentage, not by colour alone.
How does it look on a phone?
The bar stays one row, its segments shrinking in proportion, so the 18% segments are still wide enough for their percentage and name at 320px. The open plan stacks: the price and the button come first, with the features under them, so the button is within the first screen and a half. Choosing another segment swaps the plan in place.
Does the page move when I open another plan?
The band under the bar follows the open plan's feature list, so content below it moves a little when the lists differ in length (seven features each here, though their lines wrap differently on a phone). Keep the lists about the same length, or leave room under the block, if something sits directly below it.