MetricCard
KPI card with label, value, and optional trend indicator.
All trends
MRR
$4,820
+12%
Churn
2.1%
-0.3%
DAU
1,240
import { MetricCard } from '@canarist/ui'
<MetricCard label="MRR" value="$4,820" change="+12%" trend="up" />
<MetricCard label="Churn" value="2.1%" change="-0.3%" trend="down" />
<MetricCard label="DAU" value="1,240" trend="neutral" />Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | — | Small uppercase label above the value. |
| value | string | number | — | The primary metric value. |
| change | string | — | Change indicator text (e.g. "+12%"). |
| trend | 'up' | 'down' | 'neutral' | 'neutral' | Direction of the trend arrow. |
| className | string | — | Additional CSS classes. |