A labeled headline figure with an optional trend delta — a reusable form of a "Revenue: $12.4k, +8%" style dashboard tile.
tsx
Revenue
$12.4k+8%
<Stat />Examples
trend is optional — a plain figure with no history to compare against just omits it:
tsx
Revenue
$12.4k+8%
Active users
1,204
<Row gap="24">
<Stat label="Revenue" value="$12.4k" trend={{ value: "+8%", direction: "up" }} />
<Stat label="Active users" value="1,204" />
</Row>A Grid of Stats is the common dashboard-tile layout — see
Grid for the responsive-columns pattern.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| children | readonly | — | Optional content below the figure — a `Meter`, a helper `Text`, etc. |
| label * | readonly | — | — |
| trend | readonly | — | `"up"` renders in the success color and `"down"` in the error one — the common case (revenue, users, ...). For a metric where down is the good direction (spend, errors, ...), swap which one you pass rather than reaching for a config flag here. |
| value * | readonly | — | The headline number/figure, already formatted by the caller (e.g. `"$1,400"`). |