React Metric Card
A KPI stat tile built for engineering and operations dashboards. Values are set in a monospaced, tabular-numeral face so digits align as data refreshes; trend deltas are signed and color-coded; an optional sparkline shows the recent trajectory with a hover readout. Flat, sharp, and light-background first — the visual language of industrial control software.
Wafer Yield
94.2
%▲ +1.8%vs last lot
Equipment Uptime
99.97
%0%30-day rolling
Defect Density
0.12
def/cm²▼ -8.3%vs baseline
Die Per Wafer
1,482
▲ +2.4%N-1 vs N
Installation
npx shadcn@latest add "http://localhost:3000/registry/metric-card.json"
Usage
Loading...
Design notes
- Tabular numerals — the value uses
font-monowithtabular-numsso live-updating digits do not shift layout. - Signed deltas — positive trends render
▲ +x%, negative render▼ x%; direction is carried by the glyph as well as color, so state is never encoded by color alone. - Sparkline — a 2px line with a subtle area fill. Hovering shows a cursor and the exact sample value; the latest sample is always marked.
- Restrained hover — the border shifts toward the primary color and corner ticks appear; no shadows, no lift.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | — | Metric label, rendered uppercase |
| value | string | — | Headline value (pre-formatted string) |
| unit | string | — | Optional unit rendered beside the value |
| trend | number | — | Signed percentage delta; sign selects color and glyph |
| trendLabel | string | — | Context for the delta, e.g. "vs last lot" |
| icon | React.ReactNode | — | Optional icon shown in the header row |
| sparkline | number[] | — | Series rendered as a sparkline with hover readout |
New components every week
Get the week's new Kelvin UI components and templates in one short email. No spam, unsubscribe anytime.