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

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.