Comparison Section With Leader Graph
ProComparison 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
- 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
- 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

