StatCard
Card-based KPI variant with optional Sparkline and Actions slots
SSR mode
Examples
Minimal — label, value and trend
Active subscriptions
2,340
With Sparkline slot
Weekly revenue
$18,540
With Actions slot
Failed jobs
7
API
The element family below can be composed together. Click an element to jump to its properties.
| Element | Purpose |
|---|---|
| StatCard | A card-based KPI variant that pairs a label and bold value with a tonal trend badge. Supports an optional Sparkline slot for inline charts and an Actions slot for contextual buttons or links. Wrapper-styling. |
StatCard
A card-based KPI variant that pairs a label and bold value with a tonal trend badge. Supports an optional Sparkline slot for inline charts and an Actions slot for contextual buttons or links. Wrapper-styling.
| Property | Type | Required | Description |
|---|---|---|---|
| Label | string | Descriptive label shown above the value in text-sm text-muted-foreground. Default: empty string. | |
| Value | string | The primary metric value, rendered large and bold. Default: empty string. | |
| Trend | Trend | Controls the tonal badge colour and icon direction. Up = success, Down = danger, Neutral = neutral. Default: Trend.Neutral. | |
| Sparkline | RenderFragment? | Optional slot for an inline chart or sparkline SVG. Rendered inside a h-12 container. Omit to suppress. | |
| Actions | RenderFragment? | Optional slot for buttons or links, rendered below a top border at the card's foot. Omit to suppress. | |
| Borders | bool | Toggles border border-border rounded-lg. Default: true. | |
| BgFilled | bool | Toggles bg-background. Default: true. | |
| Gutters | bool | Toggles p-4 gap-3 on the card wrapper. Default: true. |