Metrics
Stat card showing a label, large value, trend badge, and optional icon or sparkline chart. Maps 1:1 to Figma Metric item variants.
{ MetricItem } from "@pepulux/ui"Simple
Default layout — label, value, and a change badge. Maps to Figma: Type=Simple.
Total revenue
$45,231
+20.1%Active users
2,350
+180Churn rate
3.2%
+0.5%With actions
primaryAction adds a text link (e.g. View report). onMoreOptions shows the three-dot menu. Maps to Figma: Actions=True.
Total revenue
$45,231
+20.1%Active users
2,350
+180Icon above — Type Icon 01
Large circle icon above the label. Set type='icon-above' and pass metricIcon.
Monthly recurring
$12,400
+8%Total members
1,842
+12%Icon beside label — Type Icon 02
Circle icon sits to the left of the label. Inline trend text replaces the badge. Maps to Figma: Type=Icon 02.
Views 24 hours
2,000
Total revenue
$45,231
Compact icon — Type Icon 04
Small square bordered icon to the left; label and value in a horizontal row. Maps to Figma: Type=Icon 04.
Views 24 hours
2,000
100%Active members
1,842
+12%Sparkline beside value — Type Chart 01
Mini sparkline to the right of the value. Inline trend text appears below the value. Maps to Figma: Type=Chart 01.
Views 24 hours
2,000
Monthly revenue
$12,400
Full sparkline — Type Chart 04
Gray card header with label; white inner card with inline value + trend + full-width sparkline. Maps to Figma: Type=Chart 04.
Views 24 hours
2,000
Monthly revenue
$12,400
Negative trend
Set trend='negative' for red styling on the change indicator.
Churn rate
3.2%
+0.5%Bounce rate
68%
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| label* | string | — | Metric label above the value. |
| value* | string | number | — | The primary metric value. |
| type | "simple" | "icon-above" | "icon-beside" | "icon-compact" | "chart-side" | "chart-full" | "simple" | Card layout variant (maps 1:1 to Figma types). |
| change | string | — | Change amount or percentage (e.g. '+20.1%'). |
| trend | "positive" | "negative" | "neutral" | "positive" | Controls badge/text color: green / red / gray. |
| vsText | string | — | Comparison text shown inline (e.g. "vs last month"). Used in chart and icon-beside types. |
| metricIcon | { icon?: ReactNode, color?: string } | — | Circular icon shown above or beside the label. |
| compactIcon | { icon?: ReactNode } | — | Small square icon box — used with type='icon-compact'. |
| primaryAction | { label: string, onClick?: () => void } | — | Text link action (e.g. 'View report'). |
| secondaryAction | { label: string, onClick?: () => void } | — | Secondary text action. |
| onMoreOptions | () => void | — | Shows three-dot menu button — triggers this callback. |
| sparklineData | number[] | — | Data points for the sparkline chart. Defaults to a sample wave. |
| sparklineColor | string | "#22c55e" | Stroke and fill color of the sparkline. |