shadcn.io is not affiliated with official shadcn/ui
Feature Unlock Pricing Block for React
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 render set to an a element and nativeButton={false}.
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.
Related
- Pro
Billing Toggle Pricing
Billing switchesThree plan cards under a monthly and yearly switch that wears its saving in the header row, with prices that roll to their new amount and each plan a card in a card.
- 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.
- 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
Accordion Plans Pricing
Plan rowsThree plan rows for an email API, each its own band with its price and call to action in view, opening in place to list its features, with a monthly and annual switch in the header row.
- Pro
Feature Heatmap Pricing
Comparison tablesA feature heatmap that grades three course-platform plans from 0 to 3 on seventeen features in greys, with the legend in the header row, plan prices and calls to action as the first row, and a plan switch on phones.
- Pro
Contrast Highlight Pricing
Plan cardsThree plans for a cloud IDE in one hairline band, with a contrast highlight that follows the theme: the recommended plan is one raised card among flat cells, with a free tier, prices that roll under a monthly and yearly switch, and a plan switch on phones.