Stat

A cardless figure — value, muted unit, caption and delta — that drops into any card, cell or hero without bringing a surface of its own.

tsx
import { Stat } from "@pestoui/core"

Sizes

size scales the value and its unit. The caption steps more gently, so a large figure keeps a readable label.

Active agents
128
Active agents
128
Active agents
128
Active agents
128

Label position

labelPosition puts the caption above, below, or inline on the value's baseline. A unit starts flush against the value, so write the space into it when the design has one.

Runtime
41h 12m
2,380 / 5,000
Documents indexed
7/9Steps done

Deltas

The delta is a node, not a number. Compose it from metricDeltaVariants and whatever glyph the design uses; trailing copy in the slot is already muted caption text.

Runs this week
1,318Up +3.2%vs last week
Monthly spend
$3,915.20
Up 4.3%vs last month

Monospace figure

Family and weight set on the root reach the value only — the label and delta reset to sans, regular and muted, so a mono figure never turns its caption mono.

Run credits used
18,240
Up 6.1%since last cycle

Live value & leading node

value takes any node, so a NumberTicker rolls in place. leading sits on the value row, centred against it.

Messages today
8,412 sent
New workspaces
1,208 new

Props

PropTypeDefaultDescription
valueReactNode—The figure. Required. Any node, so it can host a NumberTicker or composed parts.
unitReactNode—Muted, about half the value's size, on its baseline and flush against it. Start it with a space when the design has one.
labelReactNode—What the figure measures. When present the root is a role="group" labelled by it.
labelPosition"above" | "below" | "inline""above"Above or below on its own line, or inline on the value's baseline after any inline delta.
deltaReactNode—A composed node — build it from metricDeltaVariants({ trend }). The slot is muted caption text and wraps.
deltaPlacement"inline" | "below""below"On the value's row, or on its own line under the value (and under a below label).
leadingReactNode—A node before the figure on the value row, vertically centred — an icon or a dot.
size"sm" | "default" | "lg" | "xl""default"Value text-2xl / 3xl / 4xl / 5xl; unit text-sm / base / lg / xl; caption text-xs / sm / sm / base.
classNamestring—On the root. font-mono, font-normal or a gap-* here reach the value and spacing, never the caption.

Pesto UI · 117 documented components