shadcn.io is not affiliated with official shadcn/ui
Usage Profile Pricing Block for Radix UI
A monthly estimate for Light, Standard and Heavy usage of a speech-to-text API: choosing a profile rolls the total, resizes a tall stacked bar of where the bill comes from and updates each cost line.
Installation
Overview
Answer "what will I pay?" with three profiles instead of a form. A Segment Group in the header row chooses Light, Standard or Heavy usage. Below it, one band between the page's rails shows where the bill comes from: a tall stacked bar whose segments resize to each cost's share (transcription, speaker labels, summaries), with a row under it for each cost line showing its rate, usage, share and amount. Beside the bar, a panel holds the estimate at display size, rolling with Sliding Number, a line saying who the profile sounds like, the block's one primary Shine Button and what the profile includes as outline Badges. On a phone that panel comes first, so the total and the button are the first things you see. The bar uses three tones of the theme's foreground colour so the button stays the only primary control. Built with Segment Group, Badge, Guides, Sliding Number, Shine Button and Lucide icons, with CSS transitions only. For metered APIs, where a visitor wants to see a typical bill, not a rate card.
FAQ
How do I change the profiles, rates and categories?
Edit CATEGORIES (a name, an icon, a rate per unit and the note that states it) and PROFILES (a name, a tagline, a usage count for each category and its features). Each cost is the usage times the rate, rounded to a whole dollar; the total is the sum of those, and each share is the cost over the total, so the bar, the rows and the headline always agree. Add a profile by adding an entry; the switch builds itself from the array.
How is the stacked bar built?
It is a row of spans with flex-grow set to each cost, so the segments always fill the bar and resize with a CSS transition when the profile changes. Its three tones are foreground at 100%, 50% and 20%, repeated as a dot beside each cost line. The bar is an image to assistive technology with a text alternative that lists each share, "Cost split: Transcription 62%, Speaker labels 21%, Summaries 17%".
Does the layout move when I switch profiles?
No. The button's label and the list of included features each hold every profile's text in one grid cell and show only the current one, so the panel keeps the size of the longest label and the tallest list. The number columns use tabular figures and fixed widths.
How do I connect the button to sign-up?
The button is a real link. It's a ShineButton with asChild around an a element. Add the chosen profile to the query, for example /signup?profile=standard, so your onboarding can start from the right quota.