Pricing 9 block design & features
Pricing9 is a three-tier feature comparison built with shadcn/ui, showing Free, Pro, and Premium plans. On desktop it renders as a full-width table with plan columns separated by subtle vertical borders, a billing switch in the first column header, tier names and prices in the remaining headers, and grouped feature rows beneath with check or minus icons per tier. Each feature row includes a tooltip icon for additional detail. On mobile the same data renders as stacked cards, each containing the tier name, description, price, a buy button, and a filtered checklist of included features.
The switch component toggles between monthly and annual pricing, updating all tier prices at once. Prices use bold, oversized numerals centered in their columns, with a period label below. Feature section headings separate groups such as Key Features and Reporting, and each row pairs the feature name with an info icon that triggers a tooltip on hover.
This layout follows a classic comparison-table pattern with two distinct responsive strategies rather than a single collapsing grid. Complexity is moderate because you supply tier objects with prices and a sections array mapping features to boolean availability per tier.
Below the large breakpoint the table is hidden entirely and replaced by the stacked card view, so users see one card per plan with only the features that apply to that tier.