shadcn.io is not affiliated with official shadcn/ui
Feature Unlock Pricing Block for Radix UI
A field of feature chips for a podcast host: pick Hobby, Show or Network and the chips each plan includes light up, the ones it adds get a stronger outline, and the rest stay locked.
Installation
Overview
Show what each plan unlocks instead of listing it, in this feature unlock pricing section for Wavelet Podcasts, a podcast host. A Segment Group in the header row picks the plan (Hobby, Show or Network) next to an annual billing Switch. Under it a ruled band, with a + mark on each corner, holds the chosen plan's price, which rolls to its new amount with Sliding Number, how many of the 20 features it unlocks, how many are new over the plan before it and its Shine Button call to action. Below, the features are chips in four ruled rows (Publish, Distribute, Grow, Team): the ones the plan includes get a check and light up, the ones it adds over the previous plan carry a stronger outline, and the rest show a lock and stay muted, so moving up a plan visibly opens more of the field. The page's rails and top rule come from Guides. Built with Segment Group, Switch, Sliding Number, Shine Button, Guides and Lucide icons, with CSS transitions only. For SaaS, hosting and creator-tool pricing where plans are nested and a table would hide the difference.
FAQ
How do I change the plans and the features?
Edit PLANS and GROUPS at the top of the file. A plan has its name, monthly price, annual price (the monthly amount when billed yearly), the call to action's cta and href, and hours, the limit shown under the count. A group has a name and its features, and each feature has a name and from, the index in PLANS of the first plan that includes it. The counts, the "new over" line and every chip's state are worked out from from, so adding a feature is one line.
What do the three chip states mean?
A chip with a check is included in the chosen plan. One with a darker outline is included and is also new, meaning the plan adds it over the plan before. A chip with a lock is not in the plan yet. They differ in outline, icon and text colour, never in colour alone, and the same words are available to screen readers.
How do I send each plan and billing period to checkout?
The call to action is a real link to the chosen plan's href. Add the plan and period to it, for example /checkout?plan=show&billing=annual, and let your server map them to your payment provider's price. The link is a ShineButton with asChild around an a element.
Is the chip field accessible?
The plan picker is a radio group named "Plan": arrow keys move and select. The summary under the price is a polite live region, so a screen reader hears "Show unlocks 13 of 20" when the plan changes. Each chip is a list item that ends with its status, ", included" or ", locked until Network", and the icons are decorative. The annual switch is named "Annual billing, save up to 20%".
How does it look on a phone?
The header stacks: the sentence, the plan picker and the annual switch. The price, the count and the call to action stack in the band under it, so the button is reached within the first screen and a half, and the chips wrap inside each row. The text lines under the price keep room for two lines, so changing plan never moves the button.
When should I use chips instead of a comparison table?
Use chips when plans are nested (each includes the one before it) and the point is how much more you get by moving up. A comparison table is better when plans differ in values, such as 5 hours against 20, or when buyers compare many rows side by side.