Pricing 69 block design & features
Built with shadcn/ui, this pricing section centers a heading and description above a segmented RadioGroup styled as a pill control on a muted background. The yearly option includes a small green discount badge that draws attention to the savings without cluttering the toggle, while hidden radio inputs keep the markup accessible and the visuals clean.
Each plan sits in a bordered card with generous padding. Plan names are set at a medium heading size, prices are displayed prominently at a large scale, and features are listed vertically with muted check icons. The second card receives a primary-colored border to indicate the recommended tier, and its button uses the default variant for stronger visual emphasis compared to the outline button on the first card.
The segmented control pattern feels native and tactile, offering a radio-based alternative to tabs or switches for billing toggles. Combined with the discount badge, it nudges users toward annual billing in a subtle, non-intrusive way that suits product and SaaS landing pages.