Skip to content

Eval Matrix

CSS

Models by tasks, with cells shaded by score.

Eval scores by model and task
QAToolsCodeExtractSafety
atlas-l
0.93
0.96
0.88
0.91
0.97
atlas-m
0.89
0.93
0.82
0.90
0.96
atlas-s
0.80
0.84
0.69
0.86
0.94
local/32b
0.74
0.62
0.71
0.78
0.88

Install

$ npx shadcn@latest add https://spotcheckui.com/r/eval-matrix.json

No motion engine needed.

Usage

import { EvalMatrix } from "@/components/spotcheck/eval-matrix"

<EvalMatrix
  label="Scores by model and task"
  rows={["atlas-l", "atlas-m"]}
  cols={["QA", "Tools"]}
  values={[[0.93, 0.96], [0.89, 0.93]]}
  domain={[0.6, 1]}
/>

Digits sit on a paper chip, so they stay readable on every shade in every skin.

Props

  • label * RequiredstringDefault —Names the table for screen readers.
  • rows * Requiredstring[]Default —Models, down the left.
  • cols * Requiredstring[]Default —Tasks, across the top.
  • values * Requirednumber[][]Default —Scores, one array per row.
  • domain[number, number]Default [0.6, 1]The scores that map to no accent and full accent.
  • classNamestringDefault —

Keyboard

← →Scroll the table on small screens

Reduced motion

Nothing here animates.