Centrim Design System — a token-first, accessible React component system.
KPI & metric cards
KPI card recipes and card grid layouts: metric cards with trend deltas, sparkline and progress KPIs, status and info cards, stat strips, dashboard grids and loading states.
MetricCard
The canonical KPI tile: label, headline figure, trend delta and a supporting line on a card surface. Every dashboard number uses this treatment so typography and spacing never drift.
import { MetricCard, CardGrid } from "@/design-system";
When to use
- A single headline number that summarises an area of the product
- A row of four comparable KPIs at the top of a dashboard or list screen
When not to use
- Exact values that need reading across time — use a chart instead
- Read-only label / value facts — use InfoCard
KPI row
Four comparable metrics with trend deltas, on a 4-column grid.
Accent KPI tiles
A bold headline figure over its label with a status accent bar along the bottom edge — for operational counters where the number is scanned at a glance. Compose from Card; the accent uses semantic status tokens.
0
Active visitors
0
Overstayed visitors
363
Residents on premise
0
Active staff
1
Visitor bookings for today
Elevated KPIs with sparklines
Add a 7-day sparkline in the footer when the direction of travel matters as much as the figure.
KPI with progress toward a target
Compose Progress in the footer when the number is measured against a goal.
Loading
Reserve the tile's height with skeletons so the KPI row does not jump when data arrives.
Stat
Typographic KPI readout with no surface of its own. Use it for a compact summary strip inside an existing card or section, where four bordered tiles would be too heavy.
import { Stat, Card } from "@/design-system";
When to use
- A summary strip above a table
- Several figures inside one shared card
When not to use
- A standalone tile on the page canvas — use MetricCard
Summary strip
Total projects
48
Increase: +9%vs. 44 last quarter
Active
31
In delivery
Needs attention
6
Increase: +2
Archived
11
Last 12 months
StatusCard & InfoCard
The two non-numeric KPI siblings: StatusCard reports the state of an area with a badge and text, InfoCard presents a read-only label / value fact.
import { StatusCard, InfoCard } from "@/design-system";
Status cards
Maintenance
41 open requests, 6 overdue
Compliance
All certificates in date
Incidents
2 unresolved this week
Info cards
Portfolio
Willow Group
14 properties · Manchester
Reporting period
Sep 2026
Generated 8 Sep 2026
Owner
Sarah Chen
CardGrid & DashboardGrid
The two layout containers for card sections. CardGrid lays out equal-weight cards; DashboardGrid adds spans so a wide tile can sit beside narrow KPIs.
import { CardGrid, DashboardGrid, DashboardGridItem } from "@/design-system";
When to use
- CardGrid for a row of comparable cards (2, 3 or 4 columns)
- DashboardGrid when tiles have different widths
When not to use
- Hand-written grid classes on a page — the gaps drift from the spacing scale
Column counts
2, 3 and 4 columns, stepping down automatically.
2 columns
Tile 1
2 columns
Tile 2
3 columns
Tile 1
3 columns
Tile 2
3 columns
Tile 3
4 columns
Tile 1
4 columns
Tile 2
4 columns
Tile 3
4 columns
Tile 4
Mixed spans
A wide tile beside two KPI tiles.
Portfolio performance
Requests raised vs. resolved, last 6 months