KpiTile
Single big-number stat tile for dashboards and summary panels
SSR mode
Examples
Minimal — label and value
Total revenue
$84,320
Positive delta (Trend.Up)
Monthly users
12,480
+8.4% vs last month
Negative delta with icon (Trend.Down)
Bounce rate
54.2%
-3.1% vs last month
API
The element family below can be composed together. Click an element to jump to its properties.
| Element | Purpose |
|---|---|
| KpiTile | A compact stat tile that displays a label, a prominent numeric value, and an optional delta indicator with a directional trend arrow. Designed for dashboards, summary panels, and metric grids. Wrapper-styling. |
KpiTile
A compact stat tile that displays a label, a prominent numeric value, and an optional delta indicator with a directional trend arrow. Designed for dashboards, summary panels, and metric grids. 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. | |
| Delta | string? | Optional change string (e.g. +8.4%). Renders below the value with a trend arrow. Omit to suppress. | |
| Trend | Trend | Controls the colour and direction of the delta arrow. Up = success-fg, Down = danger-fg, Neutral = muted-foreground. Default: Trend.Neutral. | |
| IconSvg | string? | Optional SVG path string for a trailing icon on the label row. Rendered at size-4 text-muted-foreground. Omit to suppress. | |
| Borders | bool | Toggles border border-border rounded-lg. Default: true. Set to false when nesting inside a MetricGroup. | |
| BgFilled | bool | Toggles bg-background. Default: true. | |
| Gutters | bool | Toggles p-4 gap-1 on the tile wrapper. Default: true. |