KQ-802 · RUBRIC/GRID

Rubric Grid

A rubric as a real grid: a row per criterion, a cell per level. Scoring a level fills the row with a wash that grows from the left edge to the chosen level on glide, the chosen cell takes the primary fill, and pressing it again clears the row so the bar drains. The total rolls its digits on snap, unscored criteria carry a hollow ring that breathes until they are scored, and a Complete chip lands on snap when every row is. Arrow keys walk the cells, Home and End jump to the ends of a row, Space and Enter score or clear.

KQ-802 · RUBRIC/GRID
Gaugeworks Reasoner on a Coldbrook Bank statement query
Criterion
AccuracyFacts match the account record, unscored
CompletenessAnswers the whole question, unscored
TonePlain, calm, no blame, unscored
BrevityNothing the reader must skip, unscored
SourcesCites the policy it leans on, unscored
5 to score / 20Total 0 of 20

Unscored · 0 / 20

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/rubric-grid

Props

criteria
RubricCriterion[]
default
The rows, top to bottom: id, name, and an optional hint under the name.
levels
number
default 4
Score levels per criterion, 1 to levels.
levelLabels
string[]
default
Column-header words for the levels; falls back to the numbers.
value / defaultValue
Record<string, number>
default {}
Controlled or initial scores keyed by criterion id; absent keys are unscored.
onValueChange
(scores: Record<string, number>) => void
default
Fires from the click or key that scored or cleared a criterion, with the whole map.
label
string
default
Names the grid for assistive technology.