Home

Stat

One figure that matters: its label, its value, how it moved against a named period, and an optional sparkline under it.

ui.statcomponents/ui/stat.tsx

Use case

For the AI

Use it across the top of a dashboard or a report: the month's sales, the orders this week, the average order, the return rate. Give it the change in percent and the period it is compared with (vs last month), and say which way is good with goodWhen, so more returns read as bad even though the number went up. Put a Sparkline in trend for the shape of the last weeks. Four sit across a wide page, in cards (chart-card.stat).

Use it when

  • A dashboard's headline figures, four across
  • A figure with its change against the period before
  • A figure whose last weeks matter as much as today's value

Use something else when

  • The figure is a share of a goal (80 % of the month's target): Progress ring
  • Several figures that belong to one record (an order's total, paid, owing): Card
  • The value over the whole period is the point, not one number: Area chart

Examples

Sales$128,460+12.6 %vs previous 30 days
Return rate2.4 %+0.3 %vs previous 30 days

Code

Import

import { Sparkline } from "@/components/ui/sparkline"
import { Stat } from "@/components/ui/stat"

Usage

<Card className="p-5">
  <Stat
    label="Ventes"
    value="128 460 $"
    change={12.6}
    period="vs 30 jours avant"
    trend={<Sparkline values={lastTwelveWeeks} aria-label="Ventes, 12 dernières semaines" />}
  />
</Card>

Rules

  • Always say what the change is compared with (period); a percentage with no period means nothing.
  • goodWhen decides the colour: a rise is green only when a rise is good. The arrow and the sign say the direction whatever the colour.
  • The value uses the font's proportional figures at this size; keep tabular-nums for columns.
  • Format the value in the client's language before passing it (128 460 $ in French, $128,460 in English) and pass locale for the change.