Dashboards / Page layout / Header KPI strip

Header KPI strip

The first row of the page has to answer 'is it okay' before the rest asks 'why'.

Updated September 10, 2026

Problem

Someone opens the page. In the first second they need to know whether anything requires them, before any chart has had a chance to demand interpretation.

Solution

A row of summary values across the top, all the same shape, each one a state rather than a number to think about. Four to six of them, sharing an anatomy so precisely that the eye reads the row as one object and only stops where something differs.

The uniformity is the pattern. Six tiles with six layouts is six things to read. Six tiles with identical label position, number size and delta placement is one thing to scan, and the odd one out announces itself without being looked for.

Which numbers go in the strip is the harder question, and the test is not importance but actionability. A number belongs here if a viewer would do something different depending on its value. Total requests is important and rarely actionable; error rate is both. Strips fill up with impressive-sounding totals because they are easy to agree on, and every one of them lowers the signal of the tiles either side.

Count matters more than it seems. Four to six reads as a row. Nine reads as a grid, and a grid has no privileged reading order, so the scan the pattern exists to enable stops happening. If nine numbers genuinely qualify, the page needs a second level, not a longer strip.

Few’s space argument applies here too: whatever goes in the strip is occupying the most valuable region of the page, so a tile that shows a bare value where a bullet graph would have shown value, target and qualitative range is wasting the site’s best real estate.

Use when

The page is monitored rather than explored, and there is a small set of numbers that determine whether anyone needs to keep reading.

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 takes the most valuable band of the page and spends it on the least detailed content. Every tile added dilutes the rest, and tiles are politically easy to add and hard to remove. Colour-coded state in the top row is trusted more than anything else on the page, which makes stale or wrong thresholds up here more damaging than anywhere else. And a strip of instantaneous values with no trend can say “fine” during a rapid deterioration that any of the charts below would have shown.

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 is the unit this row is made of and covers what belongs inside one. Panel grid is the layout system the strip sits at the top of. Semantic status color is what makes the odd tile findable. Delta indicator is the context a bare number needs. Overview then detail is the structure the strip is the first level of.

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={() => {}} />;
}