Pricing 23 block design & features
Pricing23 is a three-plan feature comparison section built with shadcn/ui. On desktop it renders a four-column grid with an empty first column and three plan columns, each showing the plan name and a CTA button. Below the header, feature rows are grouped into named categories with primary-tinted bottom borders on category headings. Each feature row spans four columns with the feature name in the first and check icons or text values in the remaining three. On mobile, a collapsible plan selector replaces the column headers, showing the selected plan name with a chevron trigger that expands to reveal buttons for switching between plans.
Category headings use semibold text with a primary-tinted bottom border to separate groups. Feature values render as check icons for booleans or as a check icon paired with text for string values. The mobile view shows only the selected plan's column beside the feature names in a two-column grid, switching plans via the collapsible picker at the top.
The style is clean and minimal with no cards or colored backgrounds, relying on borders and spacing for structure. Complexity is moderate because you define plan objects with buttons and a feature sections array mapping features to per-plan values across three tiers.
On mobile the column-based comparison is replaced by a single-plan view with a collapsible selector, so users toggle between plans rather than scrolling a wide table.