Cards

Eval Radar Card

A live evaluation card for accuracy, latency, grounding, and release-readiness signals.

evalmetricsquality

Installation

Copy and paste the code into your project.

Accessibility notes

Expose each metric as text and avoid using the gradient bar as the only signal.

Eval radar

live

Accuracy

Latency

42ms

Grounding

Preview accent

TypeScript

const scores = [
  { label: "Accuracy", value: "96" },
  { label: "Latency", value: "42ms" },
  { label: "Grounding", value: "91" },
];

export function EvalRadarCard() {
  return (
    <section className="w-full max-w-sm rounded-lg border border-white/12 bg-[#0b0f14]/88 p-5 shadow-2xl">
      <div className="flex items-center justify-between">
        <p className="text-xs font-semibold uppercase tracking-[0.18em] text-[#40E0D0]">Eval radar</p>
        <span className="rounded-full bg-[#fb923c]/12 px-2.5 py-1 text-xs font-semibold text-[#fdba74]">live</span>
      </div>
      <div className="mt-5 grid grid-cols-3 gap-2">
        {scores.map((score) => (
          <div key={score.label} className="rounded-md border border-white/10 bg-white/[0.04] p-3">
            <p className="text-[0.65rem] uppercase tracking-[0.14em] text-slate-500">{score.label}</p>
            <p className="mt-2 text-xl font-black text-white">{score.value}</p>
          </div>
        ))}
      </div>
      <div className="mt-4 h-2 overflow-hidden rounded-full bg-[#1b1b1d]">
        <div className="h-full w-[88%] rounded-full bg-gradient-to-r from-[#40E0D0] via-[#a78bfa] to-[#fb923c]" />
      </div>
    </section>
  );
}

Usage

<EvalRadarCard />

Related components

Command palette

⌘K

Generate dashboard layout

3 actions ready · 1 agent online

Cards

Glass Command Card

Beginner

A glassmorphism command card for product shortcuts, palettes, and agent actions.

glasscommandshortcut

View component

component.tsx

<Button glow>
  Ship it
</Button>

Cards

Copy Code Card

Beginner

A compact code surface for snippets, component recipes, and copy actions.

codecopysnippet

View component

Eval score

94.8%+6.2

Cards

Glass Metric Card

Beginner

A compact KPI card with a progress rail for evals, usage, and model quality signals.

metricdashboardglass

View component