KPI Card
A compact, highly legible card for key metrics. Supports tones, sizes, trend arrows and delta percentages.
Examples
Basic
Sessions
6,132
vs Previous 30 Days
+150%
Negative trend
Bounce Rate
62.4%
vs Previous 30 Days
-8.2%
Flat trend
Active Plans
10,234
month over month
Installation
npx shadcn-extras@latest add kpi-card
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | Small title above the value. | |
| value | string | number | Main metric. | |
| delta | number | string | % delta (formatted if string). | |
| trend | 'up' | 'down' | 'flat' | 'flat' | Which arrow/color to show. |
| caption | string | Text under the value. | |
| icon | ReactNode | Optional top-right icon. | |
| tone | 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'primary' | Visual theme. |
| size | 'sm' | 'md' | 'lg' | 'md' | Density/scale. |
| compact | boolean | false | Reduce min-height/padding. |