Pricing 47 - Container-wide three-plan pricing with toggle and carousel

Pro

Same card treatment as the constrained three-column carousel block but the heading and cards use the full container width on large screens, with primary border emphasis on the highlighted plan.
Shadcn Pricing 47 block

Component Data

  • ID:pricing47
  • Access:pro
  • Created:May 16, 2026
  • Type:block

Pricing 47 block design & features

This layout uses shadcn/ui controls for a centered title, supporting copy, and a monthly versus yearly toggle, then fills the standard content container with three even columns on wide breakpoints. Each card carries large price type, period label, feature lists with check icons, and the same horizontal feature band as the narrower carousel sibling. Highlighting leans on a stronger colored outline on the recommended tier instead of only a soft fill.

Below the wide breakpoint a carousel takes over with masked edges and arrow navigation, starting on the recommended tier for immediate orientation.

Compared with the fully muted highlight variant, this version keeps border emphasis so the focus tier reads clearly on dense pages. Vertical padding follows the same generous marketing section rhythm as related blocks.

Moderate complexity from synchronizing billing state with carousel position.