Pricing 7 block design & features
This block is built with Shadcn UI using Badge, Button, and RadioGroup components. A centered heading and description sit above a compact segmented radio control that lets visitors switch between Monthly and Yearly billing. When a yearly discount is provided, a small green outline badge appears inline next to the Yearly label. Below the toggle, two plan panels share the available width on desktop and stack on mobile, each showing the plan name, a large price with cadence text, a description, an optional feature-list heading, and a vertical checklist with Lucide Check icons.
The billing control is a custom radio-based pill rather than a standard Switch or Tabs component. Hidden RadioGroupItems back each segment while visible label text sits on top, so keyboard and screen-reader navigation works without showing native radio chrome. The highlighted plan uses a thicker primary border and a solid CTA button; the other plan keeps a hairline border and an outline button.
Visually the block is balanced and neutral, relying on typography scale and border weight for hierarchy. The green discount badge is the only spot color and only appears when a discount value is provided, keeping the default state minimal. Complexity is moderate, combining shared billing state, conditional badge rendering, and accessible radio semantics in a layout that otherwise stays close to a standard two-column comparison.