React stat cards and KPI blocks
KPI cards, metric grids, period comparisons and live counters for React dashboards — trends shown with glyphs, never colour alone.
Four-metric grid
The standard dashboard opener: four metrics with trend and sparkline.
Metrics where down is good
Burn rate, churn, cost per lead — a fall is an improvement.
Compact metric row
Six metrics on one line, for a page whose charts need the space.
Metric against target
A number that only means something next to what it was aiming at.
Split summary panel
One headline figure with its components broken out beside it.
Metrics against a prior period
Includes the flat case, and never signals direction by colour alone.
One metric, three period lengths
Switched rather than stacked, with figures that stay internally consistent.
Metric row loading state
Shaped like the content it replaces, so nothing jumps when data lands.
Six metrics as icon tiles
Breadth over depth, with a literal-class tone map Tailwind can scan.
This period against last
Paired bars, so a big percentage on a tiny base is visible.
Completion rings
Four SVG rings with pathLength, so the radius leaves the maths.
Count-up that respects motion
Jumps straight to the value under prefers-reduced-motion.