Stat Card
NEWA KPI tile with a count-up headline number, a direction-aware delta pill, and a scrubable sparkline. Pair several with StatGrid for a responsive metrics row that works from phones to wide dashboards.
Revenue
8.2%$0
Last 14 days
Active users
20%0
Last 14 days
Conversion
6.7%0.00%
Last 14 days
Churn
26%0.00%
Last 14 days
Installation
Add the component directly to your repository using shadcn CLI:
npx shadcn@latest add Surajmaurya1/easyui/stat-card
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | — | Metric name shown above the headline number |
| value | number | — | Headline number; usually the latest point of trend |
| trend | number[] | — | Sparkline points ordered oldest to newest |
| trendLabels | string[] | — | Names for each trend point, shown while scrubbing |
| previous | number | — | Previous-period value used to compute the delta pill |
| delta | number | — | Explicit delta percentage, overriding the computed value |
| goodWhen | "up" | "down" | "up" | Which direction counts as positive news |
| period | string | "vs previous period" | Caption under the number when not scrubbing |
| format | (n: number) => string | Intl.NumberFormat | Formats the headline, labels, and aria text |
| color | string | CHART_COLORS[0] | Sparkline stroke and gradient color |
| animated | boolean | true | Counts up on mount and animates the line (disabled for reduced motion) |
| className | string | "" | Additional CSS classes for the card |
| StatGrid.children | ReactNode | — | StatCard tiles to arrange responsively |
| StatGrid.className | string | "" | Additional CSS classes for the grid |