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

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