Evals

Prompt evaluation dashboard: pass rate by version, reviewable prompt changes and test cases you can re-run.

Part of affectUI Pro. Install: npx shadcn@latest add https://www.affectui.com/r/evals.json · Import from @/components/ui/evals

When to use

Eval dashboards for prompts, agents or LLM features
Comparing prompt or model versions against a fixed test suite

When not to use

Live production monitoring of single requests – use a log or trace view

Usage

import { EvalsScreen } from "@/components/ui/evals";

export default function Page() {
  return <EvalsScreen workspace="Acme" user={{ name: "Alex Morgan" }} onNavigate={(label) => router.push(routes[label])} />;
}

Props

Name	Type	Default	Description
`onNavigate`	`(label: string) => void`		Called with the label of a sidebar item
`workspace`	`string`	`"Acme"`	Workspace name in the sidebar
`user`	`{ name: string; avatar?: string }`	`{ name: "Alex Morgan" }`	Account at the bottom of the sidebar
`className`	`string`		Extra class on the root

Accessibility

Sidebar items, the version menu, filters and Run eval are real buttons with labels
Test case rows are focusable and select with Enter or Space
Prompt changes are reviewed with the keyboard: Tab between changes, Y accepts, N rejects
Icons are decorative and hidden from screen readers

Responsive

Fills its container – give it the full viewport height in your app
Below 1000px the right column moves under the table; the table scrolls sideways on phones
Dark mode built in: switches when an ancestor (usually <html>) has the class dark or data-theme="dark"; colors are CSS variables on .ui-as

Requirements

React 19
@hugeicons/react
@hugeicons/core-free-icons
App Shell Inset, KPI Chart, Inline Diff, Segmented Control and Button (installed with it)