MetricCard
A metric card surfaces a single KPI: a title, a primary value, an optional signed delta that drives the trend arrow and colour, and an optional inline sparkline.
Monthly revenue
$48.2kIncreased by 12.5vs last month
| Prop | Type | Default | Description |
|---|---|---|---|
title |
React.ReactNode |
— | Metric caption (required). |
value |
React.ReactNode |
— | Primary metric value (required). |
delta |
number | { value: number; label?: string } |
— | Signed change; drives the trend arrow and colour. |
sparkline |
number[] |
— | Numbers for the inline sparkline. |
sparklineLabel |
string |
— | Accessible label; makes the sparkline meaningful. |
All native <div> attributes are also accepted.