Comparison Section With Compare Plans
ProComparison 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
- Category
- Comparison Sections
- 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

