Pricing 76 block design & features
This shadcn/ui pricing section uses an oversized display-style price to make the cost the unmistakable focal point of each card. An uppercase plan name and tighter tracking create a bold typographic hierarchy, while a Tabs component centered below the heading lets users flip between monthly and yearly billing in one click.
Instead of a traditional vertical checklist, plan features are rendered as horizontally wrapped Badge chips in the secondary variant. This approach gives the feature list a lighter, more scannable feel and works especially well when features are short labels rather than full sentences. The second card fills with the muted background color to visually separate the recommended tier.
Both cards sit inside a two-column responsive grid capped at a comfortable max-width. Full-width buttons at the bottom of each card keep the call-to-action prominent, with outline on the first plan and default on the highlighted one. The layout adapts cleanly to single-column on mobile with no additional breakpoint overrides.