Comparison Section With Benchmark Matrix

Pro

Comparison 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

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

More comparison sections