Stat
FREEMetric card with a counting value, a colored change and a sparkline.
Installation
Terminal
npx @bloxa/cli add stat
# or: npx shadcn@latest add @bloxa/statExamples
Dashboard
invertDelta on errors: a drop shows green.
Revenue
TRY 128,450+12.4%vs last month
Customers
2,841+5.2%
Orders
612-3.1%
Errors
14-42%
API reference
Every component also accepts the props of the element it renders.
Stat
| Prop | Type | Default | Description |
|---|---|---|---|
| label / value | ReactNode / number | — | Label and value. |
| format | Intl.NumberFormatOptions | — | Value format (currency, percent). |
| delta | number | — | Change vs previous period; 0.12 = 12%. |
| invertDelta | boolean | false | When lower is better (cost, errors). |
| trend | number[] | — | Sparkline below. |
| variant | "card" | "plain" | "card" | Card or plain. |