Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Dialog examples · Standard

Plan Selection Dialog for React

A plan selection dialog with three plan cards, a list of included features and a Continue button named after the chosen plan.

Framework
UI library

Comparing plans shouldn't take a long pricing page. This React dialog shows three plans as radio cards, the features included, and a Continue button that names the plan picked. It's shadcn.io's Dialog on Base UI with a Radio Group of Field cards.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

FAQ

How are the plan cards built?

Each is a FieldLabel around a horizontal Field with the name, price, description and a RadioGroupItem. The radio group is controlled, starts on Pro, and lays the cards out with sm:grid-cols-3.

How does the button know the plan?

It looks up the selected value in the static plans list and shows its name: Continue with Pro.

Should the features change with the plan?

If plans differ, yes: keep a feature list per plan and show the selected one's, or mark features missing from it.

Can I add a monthly or yearly toggle?

Yes, with a Switch or a second radio group above the cards that changes the prices, as the Checkout dialog example does.

Does Continue close the dialog?

Cancel is a DialogClose, so it does. Continue doesn't; close the dialog from your handler. Pass open and update it in onOpenChange, which receives the new boolean.

All 17 dialog examples