MetricCard

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

Dashboard Metrics

Revenue

+12.4%

$84.2K

Compared with the previous 7 days.

Last sync 2 min agoNet sales

Review queue

Orders waiting on supervisor approval.

12 high riskOrders

Fulfilment SLA

-3.1%

96.8%

Bangkok warehouse, rolling 24 hours.

Target 98%Warehouse

View 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

Compact Metric

Failed payments

Needs operator follow-up.

View 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'`	-	Overrides the card tone for mixed signals, such as an info metric with a negative delta.

Backoffice Guidance

Use MetricCard for dashboard KPIs that need trend or status context; keep Stat for plain numbers.
Use aria-label to 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.