ns-ui
A KPI row implementing the stat-tile figure contract (value, delta, sparkline) honestly: the sparkline behind each number is the same series the delta is computed from, hovering or focusing surfaces exactly which point that delta is measured against, and color only ever means 'this is good news for this metric', never 'the number went up'.
Use when A KPI row for a dashboard header where the reader needs to trust the delta at a glance — the baseline it's measured against is always stated in words and pointed to on the sparkline, and a metric's color only means 'good for this metric', so a falling error rate reads as good news without relying on red/green. Reach for stats-radar-sweep instead when the point is an ambient, sweep-gated reveal theatre over the same kind of KPI data — that one earns its cards' attention over time; this one states its numbers' trust up front and stays static otherwise.
Install
npx shadcn add https://design.helpmarq.comns-ui / stat-row-baseline-spark
hover or tab to a tile to see exactly where its baseline sits on the sparkline — the delta always states what it's measured against, and latency's fall reads as good news here precisely because a fall is what "lower is better" means for it, not because down is colored green
| Prop | Type | Default | Description |
|---|---|---|---|
| tiles | StatTileData[] | — | — |
| className? | string | — | — |