shadcn.io is not affiliated with official shadcn/ui
Radio Group examples · Advanced
Radio Group with Custom Content for React
Pricing tiers as selectable cards, each with a price badge, a short description and a feature list.
A pricing choice needs more than a name. Each plan here is a card with its price in a Badge, a sentence on who it is for, and the features it includes. The whole card selects the plan, and the selected one is highlighted. In React, Base UI keeps the three cards one radio group, so only one plan can be picked.
Preview
Installation
FAQ
Which plan starts selected?
defaultValue is pro. The values are free, pro, and enterprise, and every card is built from a list of plans at the top of the file.
How is the price placed?
The FieldTitle and the Badge share a row with justify-between. Free shows $0/mo and Enterprise shows Custom with variant secondary. Pro shows $12/mo with the default variant, so the recommended plan stands out.
Where does the feature list come from?
Each plan has a features array, rendered as a ul with list-disc, text-xs and text-muted-foreground. Pro and Enterprise list four features, Free lists three. Nothing hides a line based on the selection.
Why does the radio sit at the top of the card?
Field is horizontal, and when it holds a FieldContent it aligns its items to the start, so the radio lines up with the plan name, not the middle of the list.
Related
- Radio Group with CardsPlan options as bordered cards, where
- Radio Group with DescriptionsA radio group with a line of muted text
- Radio Group with IconsPayment method options with an icon
- Radio Group in FormA required notification setting in a form
- Radio Group with Disabled StatesThree radio groups compared: all enabled
- Horizontal Radio GroupA radio group with its three options in a