Pricing 86 block design & features
Pricing86 is a four-tier pricing layout built with Shadcn UI cards, buttons, and a switch control. A centered heading and optional description introduce four plan columns on desktop. Each card shows the plan name, price, and cadence line that updates when the annual billing switch is toggled. Free or zero-priced tiers skip the switch and show a short description instead, while every paid tier displays the same “Billed annually” toggle wired to one shared state.
Feature rows use check icons in muted text with a left-aligned CTA button at the bottom of each card. The highlighted card gets a primary-colored border for visual emphasis. No dividers sit between feature items, so the list reads as a clean vertical stack.
Utilitarian and readable, with generous white space and price treated as the dominant figure in each column. Complexity is moderate because the free tier follows a different layout path than paid tiers, and four columns need to stay visually balanced even when one has no switch control.
Desktop shows a four-column grid; smaller screens stack the cards in source order with no carousel.