Prompt Test Matrix

A prompt against its test cases: expected, actual, and what regressed.

PROGet Prompt Test Matrix and 168 other Pro components with pro lifetime — Get Pro

Category
RAG & Evals
Access
Pro
Source
391 lines · one file
States
7 drawn
Added
12 Oct 2026

The decision inside it

Regressions come first

Before shipping a prompt change, the question is what broke. Cases that used to pass are badged, counted and sorted to the top, and the pass rate counts only the cases that ran.

When to use it

Use Prompt Test Matrix to test a prompt against cases: each case's variables, expected and actual output, pass or fail with a score, regressions since the last run, and run one or all.

Installation

How you get it

Paste this into Claude Code, Cursor, Codex or any coding agent. It installs the file and uses it as it is, instead of writing a new one.

Use Liro's Prompt Test Matrix for this.
Install it: npx shadcn@latest add @liro/prompt-test-matrix
(the @liro registry is set up in components.json, with LIRO_KEY in .env.local)
Import it from @/components/ui/prompt-test-matrix.
Do not rewrite or restyle it. Pass my data through its props
and keep its built-in states.

For the full brief with every prop and the mistakes assistants usually make, use Copy prompt above. Pro components install through the @liro registry with your CLI token: see the Namespaced tab.

Usage

components/prompt-tests.tsx
import { PromptTestMatrix, type PromptTestCase } from "@/components/ui/prompt-test-matrix";

const cases: PromptTestCase[] = [
  { id: "1", name: "Overdue invoice", variables: { days: 45 }, expected: "polite reminder", actual: "polite reminder", status: "passed", score: 0.94 },
  { id: "2", name: "Paid invoice", variables: { days: 0 }, expected: "no email", status: "not_run" },
];

export function PromptTests({ runAll }: { runAll: () => Promise<void> }) {
  return <PromptTestMatrix prompt={{ name: "Payment reminder", version: "v3" }} cases={cases} onRunAll={runAll} />;
}

API reference

“Copy prompt” above puts a full brief on your clipboard, install command, dependencies, props, and the mistakes an assistant usually makes with this component.

Props

Read from the component’s own TypeScript interface when the site is built, so this table cannot drift from the file you install.

TypeNotes
casesPromptTestCase[] Yes–
prompt{ name: string; version?: string; model?: string } NoThe prompt under test.
onRunCase(testCase: PromptTestCase) => void | Promise<void> NoAdds a Run button to each row. May return a promise.
onRunAll() => void | Promise<void> NoAdds "Run all". May return a promise.
onCaseSelect(testCase: PromptTestCase | null) => void No–
filterPromptTestFilter No–
defaultFilterPromptTestFilter No–
onFilterChange(filter: PromptTestFilter) => void No–
isRunningboolean NoA whole run is in progress, whatever the cases say.
scoreLabelstring NoWhat the score means: "LLM judge", "Exact match".
lookLook NoLayered sets it in a tray, the heading above the card and the status in the strip below. Flat is one card.

Dependencies

npm packages

clsxframer-motionlucide-reacttailwind-merge

Liro foundations, installed alongside it

liro-themebadgebuttonstatetabs

States

All of them are drawn by the component. None is left for you to design.

  • Not run
  • Running
  • Passed
  • Failed
  • Error
  • Regressed
  • Filtered

Accessibility

  • Keyboard reachable throughout, in visual order
  • Focus trapped in overlays, Escape closes them
  • Focus returns to whatever opened it
  • Live regions announce what changed, not that something did
  • Honours prefers-reduced-motion

Responsive behavior

  • Sizes to its container, not the viewport
  • Usable from 320px up
  • Pointer-based interaction, so trackpad and touch both work
  • No hover-only affordances

Used in a screenAll screens

ScreenPro

Evals

Decide whether a prompt version ships: a pass or block gate, pass rates, model checks and cases.