Shadcn UI Pricing Block
Pricing41 is a pricing section with a centered heading and three plan cards in a horizontal grid. Each card displays the plan name, price, billing toggle (for paid plans), feature list with check icons, and a CTA button. The middle card can be highlighted with a thick primary outline to indicate the recommended plan.
The visual treatment is clean with cards using default shadcn styling. The highlighted plan has a 4px primary outline that draws attention. Feature lists use muted foreground color with check icons for easy scanning. The billing toggle uses shadcn Switch component and is shared across paid plans. Buttons are width-fit rather than full-width for a lighter feel.
This pricing section follows the mainline design system with its minimal styling and clear hierarchy. The three-column layout works well for typical Free/Pro/Enterprise tier structures. The billing toggle provides interactivity while keeping the interface simple.
On mobile, the cards stack vertically. The toggle state is shared between all paid plan cards, so changing one updates all prices. The constrained max-width container keeps cards readable at all sizes.
Dependencies
| Package | Type |
|---|---|
| react | NPM |
| lucide-react | NPM |
button @shadcn | Registry |
card @shadcn | Registry |
switch @shadcn | Registry |