Cards

Latency Budget Card

A stacked performance card for queue, model, and render timing budgets.

latencyperformancemetrics

Installation

Copy and paste the code into your project.

Accessibility notes

Every timing value is shown as text so the bars are supporting visuals only.

Latency budget

271ms

Queue18ms

Model212ms

Render41ms

Preview accent

TypeScript

const checkpoints = [
  { label: "Queue", value: "18ms", width: "w-[18%]" },
  { label: "Model", value: "212ms", width: "w-[62%]" },
  { label: "Render", value: "41ms", width: "w-[28%]" },
];

export function LatencyBudgetCard() {
  return (
    <section className="w-full max-w-sm rounded-lg border border-white/12 bg-white/[0.06] p-5 shadow-2xl backdrop-blur">
      <div className="flex items-center justify-between gap-3">
        <p className="text-xs font-semibold uppercase tracking-[0.18em] text-[#40E0D0]">Latency budget</p>
        <span className="rounded-full bg-[#40E0D0]/12 px-2.5 py-1 text-xs font-semibold text-[#d8fffb]">271ms</span>
      </div>
      <div className="mt-4 space-y-3">
        {checkpoints.map((checkpoint) => (
          <div key={checkpoint.label}>
            <div className="flex justify-between text-xs font-semibold text-slate-300">
              <span>{checkpoint.label}</span>
              <span>{checkpoint.value}</span>
            </div>
            <div className="mt-1.5 h-2 overflow-hidden rounded-full bg-[#1b1b1d]">
              <div className={`${checkpoint.width} h-full rounded-full bg-gradient-to-r from-[#40E0D0] to-[#fb923c]`} />
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

Usage

<LatencyBudgetCard />

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