Four numbers with their change and trend that count up, and a period switch that moves all of them.
$ pnpm dlx shadcn@latest add @dashral/stats-cardsWhen to use
- Four headline numbers with their change and trend, and a period switch that moves all of them.
- The top row of a dashboard's overview.
When not to use
- One number that matters more than the rest: give it the room on its own, in a Metric Card.
- More than four to six numbers: Analytics panels groups them instead of a long row.
Usage
Stats cards with your own data: every prop has the sample as its default, so pass only what you have.
import { StatsCards } from "@/components/dashral/blocks/stats-cards"
<StatsCards
metrics={metrics}
periods={periods}
period={period}
onPeriodChange={setPeriod}
/>API reference
StatsCards
The top of a dashboard: four numbers with their change and trend, and a period switch that moves all of them. Response time goes down when it gets better, so its fall shows in green. Four columns, then two, then one. Every part comes from props: your metrics and each period's figures; with period and onPeriodChange you load a period's figures as it's picked.
| Prop | Type | Default |
|---|---|---|
title | React.ReactNode | "Overview" |
description | React.ReactNode | sample |
metrics | StatMetric[] | sample |
periods | StatPeriod[] | sample |
period | stringThe period picked (the cards keep it without it). | — |
onPeriodChange | (period: string) => void | — |
type Stat
| Prop | Type | Default |
|---|---|---|
value | number | — |
change | number | — |
trend | number[] | — |
type StatMetric
A card: what it measures and how its number reads; its figures come from each period, under key.
| Prop | Type | Default |
|---|---|---|
key | string | — |
label | string | — |
icon | React.ReactNode | — |
formatOptions | Intl.NumberFormatOptions | — |
formatValue | (value: number) => string | — |
changeUnit | stringAfter the change, e.g. " pts". | — |
invert | booleanA fall is good news (response times): it shows in green. | — |
chart | "area" | "bar" | "line" | — |
type StatPeriod
A period on the switch: its label there, what the change is against, and each card's figures by key.
| Prop | Type | Default |
|---|---|---|
value | string | — |
label | string | — |
compare | string | — |
stats | Record<string, Stat> | — |