Stat Card

Pro

KPI tile with a big figure, a trend delta and an optional sparkline. Changed digits roll into place, and beating a best or goal marks the moment with a “New best” label.

Preview

Installation

npx @lumioui/cli add pro/stat-card

Usage

import { StatCard } from "@/components/ui/stat-card/stat-card";
<StatCard />

API reference

Prop Type Default
value* number

KPI value — each changed digit rolls in its own column.

 —
label* string

Caption under the value.

 —
icon IconName | null

Icon in the tinted disc. null drops the disc.

 "zap"
tone StatCardTone

Tint of the icon disc.

 "primary"
format (n: number) => string

Format the value (e.g. currency). Default: locale-formatted round.

 —
delta number

Signed percent change — green arrow up, red arrow down, grey flat.

 —
deltaLabel string

Small note after the label, e.g. "vs last week".

 —
precision number

Decimal places the figure tracks (see AnimatedNumber).

 —
index number

Position in a grid — tiles switch on 40ms apart in this order. Default 0.

 0
best number

Record or goal. When value reaches it, light pools behind the figure, one sheen crosses the tile and the label swaps to bestLabel.

 —
bestLabel string

Label while value is at or past best. Default "New best".

 "New best"
trend number[]

Recent values, oldest first — drawn on as a sparkline under the figure.

 —
size "default" | "hero"

"hero" sets a 48pt figure for the one tile that leads a dashboard.

 "default"
className string —