Stats & Numbers
KPI Tile Row
A shared-card row of metric tiles for a dashboard header or report summary — label, value and an optional directional delta badge per tile. Reflows to a two-column grid on mobile so nothing truncates at narrow widths.
$ velocityx add kpi-tile-rowBuilt for astro.
Needs a licence key —
subscribe here, then
velocityx loginonce.
- Revenue
- $48.2k 12.4% was unchanged
- Signups
- 2,940 8.1% was unchanged
- Churn
- 1.2% -0.3% was unchanged
Props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| items | KpiTileItem[] | No | [ { label: 'Revenue', value: '$48.2k', delta: '12.4%', deltaDirection: 'up' }, { label: 'Active users', value: '2,940', delta: '3.1%', deltaDirection: 'up' }, { label: 'Churn', value: '1.8%', delta: '0.4%', deltaDirection: 'down' }, { label: 'Avg. session', value: '6m 12s', delta: '0%', deltaDirection: 'flat' }, ] | |
| mobileColumns | 2 | 3 | No | 2 | Tiles per row on mobile before it scrolls to a second row. |
| className | string | No | '' |
File this creates
The CLI writes this path into your project, relative to its root — nothing else moves.
components/velocity/kpi-tile-row/KpiTileRow.astroUsing the KPI Tile Row component
Install it with velocityx add kpi-tile-row.
The CLI writes the source straight into your project — no runtime dependency, no registry
lock-in, and it themes itself from the same primary-*/accent-* scale as the rest of the library.
Related components
More from Stats & Numbers.
Stat band whose numbers count up when the section scrolls into view, then settle. No runtime dependency — plain Astro plus a small inline observer. Honours prefers-reduced-motion by rendering final values immediately.
astroPuts two numbers on one shared scale and calls out the delta — the proof-point shape for 'we cut your load time' or 'conversion rate before vs. after' case studies. Ships a screen-reader summary alongside the bars, so the comparison reads correctly even without the visual.
astroOne headline figure sized to carry a section on its own, with a short annotation line underneath for context. Locale-safe number formatting (including compact '4.2M' notation) and a count-up that lands on the real value immediately for reduced-motion users.
astroThe compact way to show actual-vs-target on a scorecard row: a thin fill against a qualitative poor/satisfactory/good band, with a tick marking the target, so a whole KPI reads in the space a single number used to take. Values stay in text too, so it holds up for anyone who can't read the bar visually.
astro