Eval score

Free · MIT

Evaluation score with a rolling number, a pass, borderline or fail badge that pops in against a threshold, a spring-filled bar and a criteria breakdown with per-criterion thresholds, as card, inline row or badge.

Markdown Open in v0

Open in v0

Installation

$ npx shadcn@latest add https://goodui.dev/r/eval-score.json

The file lands in components/goodui/eval-score.tsx and is yours to edit. With the @goodui registry added, npx shadcn@latest add @goodui/eval-score works too.

Usage

import { EvalScore } from "@/components/goodui/eval-score"

<EvalScore
  label="Win-back SMS · Maya Chen"
  score={82}
  threshold={70}
  criteria={[
    { label: "Tone", score: 90, note: "Warm, not pushy" },
    { label: "Accuracy", score: 78 },
    { label: "Brevity", score: 66, threshold: 75, note: "Fits one SMS segment" },
    { label: "Compliance", score: 96, threshold: 90 },
  ]}
/>

When to use

Use it for

Showing an LLM-as-judge or rubric result for a generated answer, with the criteria that made it up.
Eval dashboards: inline rows per run, badges in tables, cards for the selected run.
Any 0–100 (or 0–1, 0–5) quality score with a threshold.

Reach for something else

Many metrics over time: use a chart.
Star ratings from people: use rating.

If you need	Use
Detail view	variant="card" with criteria
Row in a list	variant="inline"
Cell in a table	variant="badge"
0–1 scores	max={1} percent
Per-criterion thresholds	criteria[].threshold

Examples

Inline rows

{runs.map((r) => <EvalScore key={r.id} variant="inline" label={r.name} score={r.score} threshold={70} size="sm" />)}

Badges on different scales

<EvalScore variant="badge" score={0.93} max={1} threshold={0.8} percent />
<EvalScore variant="badge" score={4.6} max={5} />

API reference

Prop	Type	Default
score*	number	—
max Top of the scale.	number	100
threshold Minimum passing score. Omit for no verdict.	number	—
margin Scores within this distance under the threshold are "borderline" instead of a hard fail.	number	5
label	React.ReactNode	—
criteria Per-criterion scores shown as bars under the main score.	EvalCriterion[]	—
variant card: score, badge, bar and breakdown. inline: number, badge and a thin bar on one line. badge: just the badge with the score.	"card" \| "inline" \| "badge"	"card"
size	"sm" \| "md" \| "lg"	"md"
percent Show the score as a percentage of max.	boolean	false
labels Text for built-in controls and screen readers; pass translations here.	Partial<EvalScoreLabels>	—

Also accepts every <div> attribute.

Each variant carries one visually hidden sentence such as "Win-back SMS: Score 82 / 100, Pass"; the animated number, bars and badge are aria-hidden so the value is read once.
Verdict colors (green pass, amber borderline, rose fail) are paired with an icon and the word, never color alone.
Built-in strings go through the labels prop for translation.

Motion

The score rolls digit by digit (number-flow, installed alongside); bars scale from the start edge on a spring (stiffness 180, damping 26); the verdict badge pops in from 0.6 scale.
Criteria rows slide in 6px with a 60 ms stagger after the main bar.
Reduced motion: digits, bars and badges change instantly, rows do not stagger.

Notes for AI

Coding agents read these rules through MCP and llms.txt, or paste this page with Copy page.

verdict: pass when score ≥ threshold, near when within `margin` (5 by default) under it, fail below that; no threshold means no badge.
score and criteria share the same scale (max). percent shows score / max as a percentage.
verdictOf(score, threshold, margin) is exported for consistent logic in tables and filters.

FAQ

Can I weight criteria?

Compute the overall score yourself and pass it; criteria are displayed as given.

Number flow

Digits roll to the new value with locale formatting, prefixes and suffixes.

Usage meter

Labeled usage meter like "SMS credits 7,420 / 10,000" whose fill springs to the new value and shifts to amber and rose near the limit, with optional per-seat segments.

Delta badge

"+12.4%" change badge whose digits roll, arrow rotates to the new direction and background pulses green or red, with an inverted mode for metrics where down is good.

Stat Card

KPI card with seven variants, tones, shadows and sizes: count-up or rolling NumberFlow values, auto-toned delta badges (invertible for no-show rates), line, area or bar sparklines that draw in, icons, footers and a skeleton state.