Dashboards / Page layout / Header KPI strip

Header KPI strip

People need a quick summary of the measures that require attention.

Updated September 10, 2026

Problem

People opening a dashboard need a quick way to see whether anything needs attention.

Solution

Place a short row of key values at the top. Use the same label, value, and context positions in each tile so the row is easy to scan.

Choose metrics that affect what the audience does next. Include a useful comparison, target, or trend rather than relying on a large number alone.

Keep the row focused. If too many metrics qualify, group them or move detail into another level. Show missing or stale data clearly, especially when color signals that everything is fine.

Use when

A small set of measures tells people whether they need to investigate further.

Don’t use when

The page is analytical. On an exploratory dashboard the summary numbers are the least interesting thing on screen, and putting them first trains people to scroll past the top of the page.

Trade-offs

The strip uses prominent space while showing limited detail. Adding more tiles makes priorities less clear. Current values can miss rapid changes, and incorrect status rules can give false reassurance.

Checklist

Would a viewer act differently depending on each of these values? If not, why is it here?
How many tiles, and does the row still read as a row?
Do all tiles share label position, number size, and delta placement exactly?
Does each tile carry context—a delta, a target, a sparkline—or just a number?
Is state encoded so the odd one out is findable without reading?
Where do the threshold colours come from, and when were they last reviewed?
Do the tiles cover the same time window as each other and as the page?
What does the strip show when a source is down?
Is the strip readable at wallboard distance if this page ever goes on a wall?
What is the process for adding a tile, and is there one for removing?

Compare

Grafana builds the strip from stat panels in the top row of the grid, so uniformity is a matter of whoever configured them using the same options six times, and drift between tiles is the normal state of a dashboard more than a year old. Plausible makes the strip the primary navigation: the top row of metrics is clickable and switches what the main chart plots, which turns the summary into a control rather than a readout. Datadog ties the row to the page’s tag scope so the strip re-scopes with the rest of the page, keeping the summary honest when someone filters to one region. AWS CloudWatch offers single-value widgets with sparkline backgrounds but no shared anatomy, so the row’s coherence depends entirely on the author, which is why most CloudWatch strips look assembled rather than designed.

KPI tile defines the contents of each item. Panel grid arranges the page below it. Semantic status color highlights conditions needing attention.

Delta indicator adds a comparison. Overview then detail connects the summary to investigation.

Wireframe — the pattern's anatomy, not any one product's version of it

Implementation

The first row answers whether it is okay before the rest asks why. Four tiles is the ceiling worth defending; a fifth means somebody could not choose and the row stops being scannable.

shadcn: npx shadcn@latest add card
Tokens: --card--card-foreground--accent--muted-foreground--border--ring--direction-up--direction-down--direction-flat

LightDarkCode

vs previous hour

KpiStrip.tsxOne anatomy repeated. The row is typed at four to six tiles, every tile has to say what someone does when it moves, the window belongs to the strip, and a source that is down says so.

import { Card } from "@/components/ui/card";
import { directionColor, directionGlyph, type Polarity } from "../red-green-direction/direction";

export type Tile = {
  label: string;
  /** null is a source that is down. The tile says so instead of showing the
   *  last number it had. */
  value: string | null;
  /** Signed change over the strip's window. `text` is the change in the unit
   *  the label uses ("24ms", "9 pts"); `value` carries the sign. */
  delta: { value: number; text: string };
  polarity?: Polarity;
  /** What someone does differently when this moves. Required, because the
   *  test for a place in the strip is actionability rather than importance,
   *  and a tile that cannot answer it is a total wearing a KPI's clothes. */
  action: string;
};

/** Four to six reads as a row. Nine reads as a grid, and a grid has no reading
 *  order, so the type stops at six. */
export type Row =
  | [Tile, Tile, Tile, Tile]
  | [Tile, Tile, Tile, Tile, Tile]
  | [Tile, Tile, Tile, Tile, Tile, Tile];

export function KpiStrip({ tiles, window, onSelect }: {
  tiles: Row;
  /** One window for the whole row. Tiles cannot be compared over different
   *  periods, so it is a property of the strip rather than of a tile. */
  window: string;
  onSelect?: (tile: Tile) => void;
}) {
  return (
    <div>
      <Card className="grid divide-x" style={{ gridTemplateColumns: `repeat(${tiles.length}, minmax(0, 1fr))` }}>
        {/* One anatomy, every time: label, number, delta, on the same three
            baselines. The eye stops only where a value differs. */}
        {tiles.map((t) => {
          const polarity = t.polarity ?? "higher-is-better";
          return (
            <button
              key={t.label}
              type="button"
              title={t.action}
              onClick={() => onSelect?.(t)}
              className="px-4 py-3 text-left hover:bg-accent/50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
            >
              <p className="text-[11px] uppercase tracking-wide text-muted-foreground">{t.label}</p>
              {t.value === null ? (
                <>
                  <p className="mt-1.5 text-2xl tabular-nums text-muted-foreground">—</p>
                  <p className="mt-1 text-[11px] text-muted-foreground">source down</p>
                </>
              ) : (
                <>
                  <p className="mt-1.5 text-2xl tabular-nums text-card-foreground">{t.value}</p>
                  <p className="mt-1 text-[11px] tabular-nums" style={{ color: directionColor(t.delta.value, polarity) }}>
                    <span aria-hidden="true">{directionGlyph(t.delta.value)} </span>
                    {t.delta.text}
                  </p>
                </>
              )}
            </button>
          );
        })}
      </Card>
      <p className="mt-1.5 text-right text-[10px] text-muted-foreground">{window}</p>
    </div>
  );
}

demo.tsxHow it is called: five checkout tiles against the previous hour. Hover a tile for the action it exists for.

import { KpiStrip, type Row } from "./KpiStrip";

/** Five tiles for a checkout service, each with the thing it changes. */
const TILES: Row = [
  { label: "Error rate", value: "0.04%", delta: { value: -0.01, text: "0.01" }, polarity: "lower-is-better", action: "Above 0.5% the release is rolled back." },
  { label: "P95", value: "312ms", delta: { value: 24, text: "24ms" }, polarity: "lower-is-better", action: "Above 400ms the on-call engineer is paged." },
  { label: "Checkouts", value: "4,182", delta: { value: 3.1, text: "3.1%" }, action: "A drop of 10% against last week opens an incident." },
  { label: "Queue depth", value: "7", delta: { value: -12, text: "12" }, polarity: "lower-is-better", action: "Above 50 a second worker is started." },
  { label: "Budget left", value: "61%", delta: { value: -9, text: "9 pts" }, action: "Below 25% non-urgent deploys are frozen." },
];

export default function Demo() {
  return <KpiStrip tiles={TILES} window="vs previous hour" onSelect={() => {}} />;
}