KPI card with a counting value, a green or red delta pill, a caption and an embedded sparkline.
npx shadcn@latest add https://hyperblur.dev/r/stat-card.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/stat-card.tsx.
import { StatCard } from "@/components/hyperblur/stat-card"
<StatCard label="Monthly revenue" value={48290} prefix="$" delta={12.4} caption="vs last month" data={[18, 22, 21, 27, 31, 36, 41, 52]} />| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | required | Metric name shown above the value. |
| value | string | number | required | Headline value. Numbers count up on mount; strings render as given. |
| delta | number | Change in percent. Positive shows a green up arrow, negative a red down arrow. | |
| caption | string | Small comparison text next to the delta, such as "vs last month". | |
| data | number[] | Series for the sparkline at the bottom of the card. Hidden when omitted. | |
| color | string | "#2f7bff" | Sparkline color. |
| prefix | string | "" | Text before the number, such as a currency symbol. |
| suffix | string | "" | Text after the number. |
| decimals | number | 0 | Fraction digits for numeric values. |
| locale | string | "en-US" | Locale passed to Intl.NumberFormat. |