Pricing 71 - Two-Plan Pricing With Feature Ribbon

Pro

Two pricing cards with a Switch toggle for monthly and yearly billing, a centered FEATURES separator ribbon between the CTA and the feature checklist, and BadgeCheck icons on each row.

Shadcn Pricing 71 block

Component data

ID
pricing71
Access
pro
Created
May 16, 2026
Type
block
Libraries
Radix UI, Base UI, React Aria

Pricing 71 block design & features

Built with shadcn/ui, this pricing section presents two plan cards side by side with a Switch control that toggles between monthly and yearly billing. Each card is wrapped in a Card shell with a header showing the plan name, a large price figure, and a period label, followed by a description and a full-width call-to-action button. The second card uses a soft muted fill to add visual weight without a colored border.

Below the button, a decorative ribbon built from two Separator lines flanking a centered "FEATURES" label creates a clear divider between the purchase action and the plan details. Each feature row pairs a BadgeCheck icon with the feature text, giving the list a polished, verified appearance that echoes the pattern used in three-plan carousel blocks.

The block is responsive through a two-column grid that collapses to a single column on smaller screens. The Switch sits between "Monthly" and "Yearly" text labels so the billing choice is always visible without extra chrome.