Pricing 83 block design & features
This block is built with shadcn/ui cards, buttons, a separator, and a billing-period switch. The section opens with a centered heading and supporting line, then a simple Monthly and Yearly toggle. Below that, two pricing cards sit in a row on larger viewports and stack on small screens, each stretching to share the full width under the site container so the comparison reads as a wide table-style band rather than narrow tiles.
Each card carries the plan name, a large price with a cadence suffix that follows the toggle, a short plan blurb, a horizontal rule, an optional label above the bullets, and a vertical list of features with small check icons. The footer holds a full-width button; one plan can be marked as highlighted for a stronger button treatment and a primary ring around the card.
Visually the block stays close to default shadcn marketing patterns: roomy section padding, balanced typography, muted supporting text, and outline buttons unless a plan is highlighted. The main difference from a compact two-column pricing strip is the horizontal spread of the cards, which makes long feature lines easier to read without wrapping as aggressively.
Overall it is a straightforward, content-first pricing comparison with a single interactive control. Complexity is moderate and mostly comes from wiring the shared toggle to both prices and from optional highlight state rather than from decorative chrome. Mobile behavior is the expected single-column stack with cards keeping the same internal order.