Comparison Section With Compare Plans

Pro

Comparison section with a compact three plan table, prices and CTAs in the header, purple type on the featured seat, and checks or crosses on the rows. Follows light and dark.

When to use Comparison Section With Compare Plans

Reach for this when three of your own seats have to share one sheet. Compare plans sits above the grid. Starter, Professional, and Enterprise print a price and a button in the header. Professional is marked in purple type with a solid purple button, not a column frame. Checks, crosses, and short limits fill the rows. Do not leave a cell blank.

Skip it when the columns are competitors. That is the features matrix. Skip it when the cells are eval scores. That is the benchmark matrix. Replace the prices, the button labels, and the limits before this ships. Keep the table compact enough that all three seats stay on one row. Vertical rules are hairlines, not a card stack. The section follows light and dark.

Block details

Renders
CSS only. Paints as soon as the stylesheet arrives
Theme
Follows the site theme in light and dark
Responsive
Mobile, tablet and desktop breakpoints are already set
Dependencies
clsxtailwind-merge
Source
275 lines, 8 KB in one file
Install
wensity add comparison-section-with-compare-plans --type block
Stack
React, Next.js, TypeScript and Tailwind CSS v4
Licence
Included with Wensity Pro. The CLI copies the file into your repository and you own it from there
Tags
light, dark, comparison, plans, pricing, checks
Last updated

More comparison sections