Bench Matrix

Component 13

About

Want this built into your product? AI agents write the code, an engineer directs them: https://vibecoding.tech/services?utm_source=21st&utm_medium=component Book a call and say promo code 21ST to get a free 3-day development trial. Vendor-announcement style benchmark board: benchmark rows grouped by domain vs model columns, with a tinted hero column and bold best-in-row plates. Answers: "How do these models compare across many benchmarks at once?"

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Bench Matrix to your project and fits it to your theme.

Code

How Bench Matrix is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

'use client'

// --- vizcn palette (lib/palette.ts inlined for 21st.dev; canonical registry: https://vibecoding.tech/vizcn) ---
const CATEGORICAL = [
  '#4E79A7', // blue
  '#F28E2B', // orange
  '#59A14F', // green
  '#B07AA1', // purple
  '#76B7B2', // teal
  '#E15759', // red
  '#EDC948', // yellow
  '#FF9DA7', // pink
  '#9C755F', // brown
  '#BAB0AC', // grey
] as const
function seriesColor(i: number): string {
  return CATEGORICAL[((i % CATEGORICAL.length) + CATEGORICAL.length) % CATEGORICAL.length]
}
// --- end palette ---
import { BenchMatrix, type BenchMatrixGroup, type BenchMatrixModel } from '@/components/ui/bench-matrix'

const models: BenchMatrixModel[] = [
  { id: 'atlas', label: 'Atlas 2 (max)', vendor: 'Meridian', color: seriesColor(0), hero: true },
  { id: 'nova', label: 'Nova Pro', vendor: 'Helix Labs' },
  { id: 'orion', label: 'Orion 1.5', vendor: 'Vantage' },
  { id: 'vega', label: 'Vega Ultra', vendor: 'Helix Labs' },
]

const groups: BenchMatrixGroup[] = [
  {
    label: 'reasoning',
    rows: [
      {
        bench: 'ReasonEval',
        note: 'graduate-level multi-step reasoning, no tools',
        values: [88.4, 86.1, 84.9, 87.2],
      },
      {
        bench: 'PuzzleBench Hard',
        note: 'constraint puzzles, pass@1',
        values: [71.3, 69.8, 64.2, 70.5],
      },
      {
        bench: 'LongContext QA',
        note: 'needle retrieval over 1M-token inputs',
        values: [92.6, 90.1, null, 91.4],
      },
    ],
  },
  {
    label: 'coding',
    rows: [
      {
        bench: 'RepoPatch Verified',
        note: 'real repository bug fixes, end-to-end',
        values: [74.8, 72.3, 70.6, 73.1],
      },
      {
        bench: 'CodeGolf Elite',
        note: 'competitive programming, percentile',
        values: [61.2, 63.7, 58.4, 60.9],
      },
    ],
  },
  {
    label: 'agentic',
    rows: [
      {
        bench: 'AgentOps Suite',
        note: 'multi-step tool use across 40 tasks',
        values: [67.5, 62.8, 59.3, 65.0],
      },
      {
        bench: 'BrowserQuest',
        note: 'autonomous web navigation, success rate',
        values: [54.1, 51.6, 47.2, 53.8],
      },
    ],
  },
]

export default function BenchMatrixDemo() {
  return (
    <BenchMatrix
      models={models}
      groups={groups}
      meta="7 benchmarks · snapshot Jul 9, 2026"
      footnote="Scores as reported by each vendor; dash = not published. Higher is better."
    />
  )
}