shadcn.io is not affiliated with official shadcn/ui
Compact Segmented Tab Control CTA Block for React Aria
A slim upgrade band between solid rails, split by a divider: the headline with a rolling price at the start, a billing segment and a Shine Button on the end.
Installation
Overview
Nudge visitors to upgrade without a full pricing table with this compact segmented control banner. One band between the page's solid rails, split by a divider that meets the top rule, holds a headline with the current price at the start and, on the end side, a three-way Segment Group for Monthly, Quarterly and Yearly beside a Shine Button. Choosing a period rolls the price to its new amount with Sliding Number and rewrites the line beside it: what each payment costs, how often it comes and how much it saves against monthly billing, all worked out from the prices. On phones the two cells stack under a rule, and the segment and the button fill the width. Built with Segment Group, Sliding Number, Shine Button, Guides and Tailwind CSS, with CSS transitions only. For in-page upgrade nudges, a strip above the footer and secondary plan choices between sections.
FAQ
How do I change the plans and prices?
Edit the PLANS array at the top of the file. Each plan has its label, its price per month, the months each payment covers and the value that identifies it. The first plan is the list price: every saving compares the others with it. The "Billed" line, the payment amount and the saving are computed from those numbers, and the saving is rounded down so the bar never promises more than the price delivers. Add a fourth plan by adding an entry: the segment and the line grow with the data.
How do I send the chosen plan to checkout?
The Upgrade button is a real link, so point its href at your checkout and add the plan to it, for example /checkout?plan=pro&billing=quarterly; the chosen plan's value is what you want. It's a ShineButton with href, which React Aria renders as a link. The link's accessible name carries the plan, as in "Upgrade, billed quarterly".
Is it accessible?
Yes. The segment is a radio group named "Billing period": Tab reaches the chosen period and the arrow keys move and choose. The price rolls visually, but its value stays in text for screen readers, and one polite live region says the new plan after a change, for example "Quarterly: $15 per month. Billed $45 every 3 months, 21% less than monthly." Nothing is announced while the page loads. The headline is the block's h2.
Why doesn't the bar change size when I switch?
The price's digits are tabular, and the three "Billed…" lines share one grid cell: the longest sets its width and height, and the two that aren't chosen are hidden from sight and from screen readers. Switching only changes which one shows.
How does it fit a phone?
Below the md breakpoint the band stacks: the headline and price, a rule, then the segment across the full width and the button across the full width. From md it's one row split by the divider, with the headline taking the space left over, so it holds its shape down to a 320 px screen.