Cards

Stat Strip

A dense row of metrics for build dashboards, model monitoring, and usage reports.

statsmetricsdashboard

Installation

Copy and paste the code into your project.

Accessibility notes

The definition-list structure preserves label and value relationships.

Runs: 1.8k
Pass: 98%
Cost: $42

Preview accent

TypeScript

const stats = [
  { label: "Runs", value: "1.8k" },
  { label: "Pass", value: "98%" },
  { label: "Cost", value: "$42" },
];

export function StatStrip() {
  return (
    <dl className="grid w-full max-w-md grid-cols-3 overflow-hidden rounded-lg border border-[#40E0D0]/20 bg-[#0b0f14]/86 shadow-2xl">
      {stats.map((stat) => (
        <div key={stat.label} className="border-r border-white/10 p-4 last:border-r-0">
          <dt className="text-[0.65rem] font-semibold uppercase tracking-[0.16em] text-slate-500">{stat.label}</dt>
          <dd className="mt-2 text-2xl font-black text-white">{stat.value}</dd>
        </div>
      ))}
    </dl>
  );
}

Usage

<StatStrip />

Related components

Eval radar

live

Accuracy

Latency

42ms

Grounding

Cards

Eval Radar Card

Intermediate

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

evalmetricsquality

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

GitHub

synced

Vercel

live

Docs

ready

Cards

Integration Status Grid

Beginner

A three-column status grid for connected services, deploy targets, and docs sync.

integrationstatusdashboard

View component