Comparison Section With Benchmark Matrix
ProComparison section with a boxed model score matrix, a blue featured column, nested benchmark captions, and highlighted winning cells. Follows light and dark.
When to use Comparison Section With Benchmark Matrix
Reach for this when the argument is a score, not a seat. The sheet sits in a square frame. Four models share the rows. The first column names the task and the eval. RuneAI sits in a blue frame that runs the full height. Winning cells pick up a blue fill, including scores that sit outside the featured column. The reasoning row stacks no tools over with tools under the same title.
Skip it when you are selling your own plans, or when the visitor needs a toggle. That is the features matrix. Replace the demo model names and the eval figures before this ships. Keep the boxed frame, the horizontal hairlines, and the rounded blue column. Vertical rules turn it back into a spreadsheet. 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
- 328 lines, 9 KB in one file
- Install
wensity add comparison-section-with-benchmark-matrix --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, matrix, benchmarks, models
- Last updated

