Components / Stat Card

Stat Card

A single KPI with an icon, a formatted value, and an optional period-over-period delta. Rows of these open area dashboards and post detail sheets.

import { StatCard } from '@layers/ui/stat-card'

Rendered stock

House rules

• Pass raw numbers; the card formats them (8200 renders as 8.2K). Preformat only string values like currency.
• Set deltaInverted on metrics where a drop is good, like cost per view, so the delta colors read correctly.
• A missing value renders as a dash placeholder; never substitute a fake zero.
• Loading goes through isLoading, which swaps the value for a Skeleton; no hand-rolled loading states.