Pricing 73 block design & features
Built with shadcn/ui, this pricing section places two plan cards on a softly tinted muted background so the white card surfaces appear to float above the page. A ToggleGroup styled with a background fill and light shadow sits between the heading and the cards, letting visitors flip between monthly and yearly billing. The control picks up the background color of the page surface to stand out against the muted section behind it.
Each card shows the plan name, a large price, and a horizontal Separator that cleanly divides the pricing area from the feature checklist below. Check icons mark every feature row and a full-width button anchors the bottom of each card. The recommended plan gains a translucent primary ring and a heavier shadow, adding just enough emphasis without introducing a contrasting fill or border color.
The layered depth effect created by the muted section and elevated cards works especially well on marketing pages where pricing sits between content sections with a plain background. It visually groups the pricing content while maintaining a light, modern feel.