Kpi

In the app

The dashboard headline number: icon chip, label, tabular value, delta row under a soft divider.

@varick/ui/components/kpiAdded 26 Aug 2026

Time saved

41.4 hrs

+12%vs last week

Usage

import { Kpi } from "@varick/ui/components/kpi";

export function Example() {
  return (
    <Kpi
      label="Time saved"
      value="41.4 hrs"
      delta="+12%"
      tone="success"
      spark={[18, 22, 21, 27, 31, 30, 36, 41]}
    />
  );
}

Variants

Without a sparkline, and a falling delta

Runs today

342

+8%vs last week

Exceptions

+3vs yesterday

<Kpi label="Runs today" value="342" delta="+8%" tone="success" />
<Kpi label="Exceptions" value="7" delta="+3" tone="danger" caption="vs yesterday" spark={series} />

API reference

Every component also accepts className and the native props of its root element.

Prop	Type	Default	Description
label	string	required	What the number measures.
value	string	required	Preformatted. The component sets tabular numerals.
delta	string	undefined	Change, with its sign. Omit it and the footer row disappears.
tone	'success' \| 'warn' \| 'danger' \| 'teal' \| 'neutral'	'neutral'	Tone of the delta.
caption	string	'vs last week'	What the delta compares against.
icon	ReactNode	trend icon	The 14px icon in the chip.
spark	number[]	undefined	Recent values, oldest first. Draws a Sparkline in the delta tone.

Styles

The CSS as it appears in the app. The live component above is the same values as Tailwind classes.

.kpi {
  border: 1px solid var(--hairline);
  border-radius: 4px;
  background: #FFFFFF;
  padding: 20px;
}
.kpi-chip {
  width: 32px; height: 32px;
  border: 1px solid var(--hairline-soft);
  border-radius: 8px;
  display: grid; place-items: center;
}
.kpi-value { font-size: 22px; font-variant-numeric: tabular-nums; }
.kpi-bottom { border-top: 1px solid var(--hairline-soft); padding-top: 14px; }