KPI Group
KPI row: value, change vs. previous period, sparkline and progress to goal. Free, MIT · Data and metrics › Metrics and widgets
Responsive row of KPI tiles: value, change vs the comparison period, sparkline and progress toward a target — the dashboard header of Stripe- and Vercel-style apps.
Installation
npx valyro-cli@latest add kpi-groupnpx shadcn@latest add https://valyro.xyz/r/kpi-group.jsonnpm install valyro-ui
import 'valyro-ui/styles.css';
import { KpiGroup } from 'valyro-ui';Props
| Prop | Type | Default | |
|---|---|---|---|
items * | KpiItem[] | Metrics, one tile each in order: value, change vs the previous period, optional sparkline and target. | |
comparisonLabel | ReactNode | Context after every delta, e.g. "vs last month". | |
variant | 'joined' | 'cards' | 'joined' | joined — one panel split by hairlines (default); cards — a panel per metric. |
minTileWidth | number | 200 | Narrowest tile before the grid wraps, px. Default 200. |
loading | boolean | false | Skeleton tiles; with no items yet, skeletonCount of them. |
skeletonCount | number | 4 | Placeholder tiles shown while loading and items is still empty. |
locale | string | BCP 47 locale for numbers and dates; defaults to the ThemeProvider's, then the browser's. | |
labels | Partial<KpiGroupLabels> | Overrides for the built-in English text; keys left out keep their defaults. |
Related components
- Stats Card — Metric cards
- Widget — Dashboard container: title, actions, big number, legend and chart area
- Number Value — Locale-aware number: currency, percent, compact notation and units
- Trend Value — Metric change: arrow, sign and color, as text or a pill
- Proportion Bar — Proportion bar with a legend: storage, budget, breakdown
- Activity Rings — Concentric progress rings toward goals
- Leaderboard — Leaderboard: medal places, thumbnails, numbers and change over a period
- Data Table — Tables with search and sorting
- Data Grid — Grid for 100,000 rows: grouping, filters, inline editing
- Virtual List — Virtual list for 100,000 rows
- Bulk Action Bar — Actions for selected rows, with keyboard shortcuts
- List Block — List with images or icons, descriptions and values
Previous: Stats Card · Next: Widget · All Data and metrics