Pricing 100 - Single plan card with billing switch

Pro

One centered pricing card with monthly and yearly switch, discount chip, dual buttons, and checklist rows.

Shadcn Pricing 100 block

Component Data

  • ID:pricing100
  • Access:pro
  • Created:May 17, 2026
  • Type:block

Pricing 100 block design & features

Pricing100 is a single-tier pricing section built with shadcn/ui that keeps attention on one offer rather than a multi-column comparison. The section centers a headline and supporting line, then places billing controls above a single bordered card that mirrors common two-plan styling but only surfaces one tier. A shadcn/ui Switch flips between monthly and yearly amounts while the footer can stack primary and secondary actions.

The rhythm relies on standard marketing section spacing with a max-width column typical of the pricing group. Visually this stays close to default shadcn card language with a thicker primary border when the plan is marked highlighted in data.

Overall complexity is modest because layouts emphasize typography and cards over motion. Mobile layouts stack primary content before supporting lists so the price and CTA remain visible early.