KpiCard
Metric card for dashboard summaries.
Quick Preview
Qualified leads
248
12%vs last month
Composition
Use this public composition when building KpiCard:
KpiCard
├── KpiCardTitle
├── KpiCardValue
└── KpiCardTrend
├── KpiCardTrendValue
└── KpiCardTrendCaptionUsage
<KpiCard><KpiCardTitle>Revenue</KpiCardTitle><KpiCardValue>₦24m</KpiCardValue></KpiCard>Examples
Default KpiCard
Use this as the starting point for KpiCard. Keep product data, routing, fetching, and authorization logic in the consuming app.
Qualified leads
248
12%vs last month
Props
| Prop/API | Type | Default | Description |
|---|---|---|---|
loading | boolean | false | Shows skeleton loading content. |
direction on KpiCardTrend | `"up" | "down" | "flat"` |
showIcon on KpiCardTrend | boolean | true | Toggles trend icon. |
className | string | - | Local layout or spacing overrides. |
| native/root props | React component props | - | Passed through to the underlying root or primitive. |
Accessibility
- Preserve the documented KpiCard composition so labels, triggers, content, and controls remain connected.
- Provide visible labels or accessible names for interactive controls.
- Preserve the component-provided focus, keyboard, disabled, and invalid-state behavior.
- Do not communicate state with color alone; include text, icons, or helper copy.