KPI
Display a key metric with a label and change indicator.
Preview
Import
import { KPI } from "@sigil-ui/components";Usage
<KPI label="Revenue" value="$12,340" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | — | Metric label. |
value | string | number | — | Current value. |
change | string | — | Change amount (e.g. "+12.5%"). |
trend | "up" | "down" | "neutral" | neutral | Trend direction. |
Token integration
| CSS Variable | Purpose |
|---|---|
--s-success | Success |
--s-error | Error |
--s-text-muted | Text muted |
--s-border-style | Border style |
--s-border | Border |
--s-radius-card | Radius card |
--s-surface | Surface |
--s-shadow-sm | Shadow sm |
--s-text | Text |