shadcn.io is not affiliated with official shadcn/ui
Feature Comparison Table Billing Block for Radix UI
Tick the features you need and a four-plan table answers: plans that lack one step back and say what they lack, and the cheapest plan that has everything is named and set on the button.
Installation
Overview
Help someone pick a plan by what they need rather than what is listed, with this feature comparison for React with Radix UI. A compact header sits over one hairline frame with a plus mark on each corner. The first band is five must-haves as Checkbox chips in your foreground color: SSO, audit log, 20 seats, API access and priority support. A line works out the cheapest plan that has every ticked feature and sets it against the plan you are on. Under it a native table compares Free, Starter, Pro and Scale: a plan that lacks a ticked feature steps back in muted text and its header names the first thing it lacks, "Lacks SSO", the plan you are on is badged, and the cheapest that fits is tinted. On a phone a Native Select shows one plan at a time and the must-haves stay. The only Shine Button follows the answer, "Switch to Pro", and sits in a foot with a status line. It's built from Checkbox, Field, Native Select, Badge, Shine Button and Guides, with a CSS entrance only. For plan pickers, pricing pages inside the app and upgrade flows.
FAQ
How do I change the plans and the features?
Edit PLANS (a name, a price, a seat count and the ids of the features it has), NEEDS (the ticked list) and EXTRAS (rows only for reading) at the top of the file. SEATS_NEEDED is the seat count the 20 seats box asks for. Which plans lack what, the headings, the cheapest plan that fits and the button's label are derived from them.
How is the cheapest plan that fits chosen?
It is the first plan, in price order, that has every ticked feature. With nothing ticked that is the Free plan; ticking SSO moves it to Scale, the only plan that has it. If the cheapest that fits is the plan you are on, the button reads Keep instead of Switch.
What does the button do, and what stays local?
It says the switch is noted for the renewal date and that nothing changed here. In your app, send the plan id to your billing provider in apply, schedule the change and show the provider's answer in the same status line.
How are the checkboxes wired on each library?
checked value, and each chip is a label with the feature name tied to it.A ticked box is solid foreground, never the primary colour, so the Shine Button stays the one primary.Is it accessible?
The comparison is a real table with a caption, column headers and row headers, so a screen reader announces the plan and the feature for each cell. A tick or a dash always has "Included" or "Not included" in words, a needed feature says so in its row header, and a plan that lacks one says what in its header: the dimming is never the only signal.