Stat Card

KPI cards for dashboards. Large display-font value, mono label, optional trend indicator and icon. Color variants signal meaning. StatGrid renders a responsive 4-column layout.

StatGrid

Responsive 4-column grid (2 on mobile). Use as a dashboard KPI row above tables or charts.

TOTAL EQUIPMENT 1,247 +3.2% vs last month

ACTIVE 892 +1.8% vs last month

OVERDUE MAINTENANCE 23 -12.5% vs last week

SCHEDULED THIS WEEK 47

Variants

Color variants change the value color. Label stays muted. Use to signal meaning: success for healthy metrics, error for problems.

NEUTRAL 1,247

SUCCESS 892

WARNING 156

ERROR 23

Trend Indicators

Pass a percentage change via the trend prop. Positive = green up arrow, negative = red down arrow, zero = neutral dash.

REVENUE €48,200 +12.4% vs last quarter

INCIDENTS 7 -33.0% vs last month

UPTIME 99.97% 0.0% no change

With Icons

Icons render in the top-right corner. Pass any SVG or Phosphor icon via the icon snippet.

BUILDINGS 34

INSPECTIONS DUE 12

COMPLETED TODAY 8 +60.0%

Loading State

Shows skeleton placeholders while data is being fetched.

TOKEN REFERENCE

StatCard use component tokens from components.css:

--stat-padding: var(--space-lg)--stat-radius: var(--radius-md)--stat-border: var(--elevation-border)--stat-value-font: var(--type-display-font)--stat-value-size: var(--type-display-size)--stat-label-font: var(--type-label-font) (Berkeley Mono)--stat-trend-up-color: var(--color-success)--stat-trend-down-color: var(--color-destructive)--stat-icon-size: var(--icon-size-lg)--stat-grid-gap: var(--space-md)