Comparison Section With Leader Graph

Pro

Comparison section with one bar chart, four product logos under the plot, and a blue gradient bar for the lead product. Follows light and dark.

When to use Comparison Section With Leader Graph

Reach for this when four named products have to share one graph, not a check sheet. Four bars sit on one plot. Logos, names, and scores sit under the axis. Lumen is the mock lead on the right: a blue gradient bar and the highest score. Helio, Vale, and Kite sit to the left in muted bars. The visitor should read the tallest bar last, then the gap.

Skip it when the cells are seats or eval titles. That is Simple Pricing or the benchmark matrix. Skip it when you only have two products. Four bars is the point. Replace the marks, the names, and the scores before this ships. Keep the lead bar blue and the neighbors muted. Matching every bar in the same fill removes the decision. 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
196 lines, 8 KB in one file
Install
wensity add comparison-section-with-leader-graph --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, graph, bars, logos
Last updated

More comparison sections