Metric Card
A dashboard stat card displaying a key metric with delta indicator and inline sparkline.
Preview
Import
import { MetricCard } from "@sigil-ui/components";Usage
<MetricCard
label="Revenue"
value="$24.5K"
delta="+12.3%"
deltaLabel="vs last month"
sparkData={[18, 22, 19, 25, 28, 24, 30, 35, 32, 38]}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | — | Metric name |
value | string | number | — | Main display value |
delta | string | — | Change indicator (prefix with +/- for coloring) |
deltaLabel | string | — | Context text next to delta |
icon | ReactNode | — | Optional icon next to label |
sparkData | number[] | — | Mini sparkline data array |
sparkColor | string | var(--s-primary) | Sparkline color |
Token integration
| CSS Variable | Purpose |
|---|---|
--s-primary | Default sparkline color |
--s-success | Positive delta text |
--s-error | Negative delta text |
--s-border | Card border |
--s-surface | Card background |
--s-text | Value text |
--s-text-muted | Label and delta context |
--s-font-mono | Value and delta font |
--s-radius-card | Card border radius |
--s-shadow-sm | Card shadow |
--s-border-style | Card border style |