ComponentsData Display
MetricCard
Dashboard KPI card with trend, tone, visual slot, and footer metadata
MetricCard gives dashboards a structured KPI surface for operational health, revenue, queue load, and SLA signals.
Import
import {
MetricCard,
MetricCardHeader,
MetricCardLabel,
MetricCardValue,
MetricCardDelta,
MetricCardDescription,
MetricCardVisual,
MetricCardFooter,
} from '@nim-ui/components';Basic Usage
Revenue
+12.4%$84.2K
Compared with the previous 7 days.
Last sync 2 min agoNet sales
Review queue
+842
Orders waiting on supervisor approval.
12 high riskOrders
Fulfilment SLA
-3.1%96.8%
Bangkok warehouse, rolling 24 hours.
Target 98%Warehouse
Code
<MetricCard aria-label="Revenue metric" tone="success">
<MetricCardHeader>
<MetricCardLabel>Revenue</MetricCardLabel>
<MetricCardDelta>+12.4%</MetricCardDelta>
</MetricCardHeader>
<MetricCardValue>$84.2K</MetricCardValue>
<MetricCardDescription>Compared with the previous 7 days.</MetricCardDescription>
<MetricCardFooter>
<span>Last sync 2 min ago</span>
<span>Net sales</span>
</MetricCardFooter>
</MetricCard>Compact Density
Failed payments
+317
Needs operator follow-up.
Code
<MetricCard density="compact" tone="danger" aria-label="Failed payments metric">
<MetricCardHeader>
<MetricCardLabel>Failed payments</MetricCardLabel>
<MetricCardDelta>+3</MetricCardDelta>
</MetricCardHeader>
<MetricCardValue>17</MetricCardValue>
</MetricCard>Props
MetricCard
| Name | Type | Default | Description |
|---|---|---|---|
tone | 'neutral' | 'success' | 'warning' | 'danger' | 'info' | 'neutral' | Semantic tone for the card border, accent, and default delta styling. |
density | 'comfortable' | 'compact' | 'comfortable' | Adjusts card padding for dashboard rows or dense side panels. |
showAccent | boolean | true | Shows the top accent bar that makes dense KPI rows easier to scan. |
MetricCardDelta
| Name | Type | Default | Description |
|---|---|---|---|
tone | 'neutral' | 'success' | 'warning' | 'danger' | 'info' | 'neutral' | Overrides the tone inherited from the parent MetricCard. Falls back to neutral only when MetricCardDelta is used outside a MetricCard. |
Backoffice Guidance
- Use MetricCard for dashboard KPIs that need trend or status context; keep Stat for plain numbers.
- Use
aria-labelto name the metric card when the visible label is not enough on its own. - Put short sparkline or threshold visuals in
MetricCardVisual; avoid full charts inside the card. - Keep footer text factual: time range, data source, target, or owner.