Comparison Section With Simple Pricing
ProComparison section with a Simple pricing heading, an annual or monthly switch, three tinted plan columns, grouped feature rows, and green checks. Follows light and dark.
When to use Comparison Section With Simple Pricing
Reach for this when three of your own seats need a grouped sheet, not a compact button row. Simple pricing sits on the left. Pay annually and pay monthly share a switch, and the prices tick with it. Free, Plus, and Pro print a tagline, a per user price, and an underlined start link. Plus keeps a full height sky wash. Pro keeps a sand wash and a corner flag. Usage, Essentials, and Advanced sit as uppercase group labels. Checks are green. Missing seats get a cross, never a blank cell.
Skip it when the columns are competitors or eval scores. That is the features matrix or the benchmark matrix. Skip it when you only need three short rows and filled buttons. That is Compare Plans. Replace the limits, the prices, and the group labels before this ships. Do not add hairlines. The washes are the columns. 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
clsxframer-motiontailwind-merge- Source
- 386 lines, 12 KB in one file
- Install
wensity add comparison-section-with-simple-pricing --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, pricing, toggle, checks
- Last updated

