Pricing 30 block design & features
Pricing30 is a three-plan feature comparison built with shadcn/ui, showing Free, Basic, and Enterprise tiers. On desktop it renders a four-column grid with feature names in the first column and one plan per remaining column. The highlighted plan column receives a muted background with a rounded border, visually elevating it above the others. Each column header shows the plan name and a CTA button, and feature rows below are organized into named category sections with tall spacer rows between groups. Feature values appear as check icons for booleans or as a check icon paired with text for string values.
The highlighted column uses muted background and a border radius to distinguish it from the flanking columns. Category section headers are rendered as tall blank spacer rows in the plan columns, aligning with the feature-name column's bold category labels. Feature rows carry bottom borders for separation within each group.
The aesthetic is straightforward and table-like, prioritizing scan-friendly columns over decorative cards. Complexity is moderate because you define plan objects with nested feature categories mapping feature names to boolean or string values. The highlighted plan index is set in the component.
On mobile the grid is replaced by a collapsible plan selector at the top, where tapping the current plan name expands a list of alternative plans as secondary buttons. Below the selector, feature categories and rows display in a two-column layout showing only the selected plan's values.