Comparison Section With Simple Pricing

Pro

Comparison 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

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

More comparison sections