Beta
KPI Card Row
A stat band of KPI cards — each headline counts up on mount over a full-bleed area chart, and hovering the chart reads that sample's amount with the date it landed on.
KPI Card Row
A stat band of KPI cards — each headline counts up on mount over a full-bleed area chart, and hovering the chart reads that sample's amount with the date it landed on.
When to use it
The band across the top of a dashboard that answers "how are we doing" before the reader scrolls. The full-bleed chart behind each number gives the trend without a second component, and hovering recovers the exact sample.
Install
Adds KPI Card Row and its dependencies to your project through the shadcn CLI.
$ npx shadcn@latest add https://www.ssicevs.com/r/kpi-card-row.jsonProps · KpiCardRow
| Prop | Type | Default |
|---|---|---|
| items? | KpiItem[]one card per metric | DEFAULT_ITEMS |
| labels? | string[] | DEFAULT_LABELS |
Generated from the component source. Run npm run props:extract after changing a signature.