Pricing 75 block design & features
Built with shadcn/ui, this pricing section places a billing toggle directly inside each plan card rather than above the grid. Both cards share the same annual state, so flipping the Switch in either card updates the displayed price across both simultaneously. The result is a compact layout that removes the need for a standalone billing control in the header area.
Each card stacks the plan name, a large price with period suffix, the embedded Switch with a “Billed annually” label, a vertical feature checklist using Check icons, and a full-width action button. The second card receives a double-weight primary border to draw attention to the recommended tier, paired with a default button variant while the first card uses outline.
The inline Switch approach keeps the user’s attention on the card they are evaluating and reinforces the monthly-to-yearly comparison in context. With only two plans in a responsive two-column grid, the layout stays clean on mobile and scales naturally for desktop without additional breakpoints.