Data Display

Stat

A labelled number with unit, trend, hint, and tone, plus a responsive grid.

BetaUsed in Aback Tools, Aback LaunchRegistry JSON

Installation

Copy the source with the CLI to own and edit it, or import it from the npm package.

npx aback-ui@latest add stat

Writes components/ui/stat.tsx. First time in this project? Run npx aback-ui@latest init first, as the installation guide shows.

Import the parts you need from the installed file. The Code tab above has a complete, working example.

tsx

import { Stat, StatGrid } from "@/components/ui/stat";

Props and composition points for Stat. Native element props pass through.

Prop	Type	Default	Description
`label / value`	`ReactNode`	None	The term and the formatted number. Format the value before passing it, with Intl.NumberFormat for locales. Required.
`unit / hint`	`ReactNode`	None	A muted unit after the value and a sub-line under it.
`icon / badge`	`ReactNode`	None	A decorative 16px icon in a brand chip, and a badge after the label.
`tone / emphasis`	`"neutral" \| "success" \| "warning" \| "danger" \| "info" / boolean`	"neutral" / false	Colours the value, and with emphasis tints the tile. Always pair a tone with words.
`trend`	`{ direction: "up" \| "down" \| "flat"; label: string; tone? }`	None	A change with an arrow. The label must carry the change on its own, such as "+8 vs last week". Up is success and down is danger unless you set tone, for metrics where lower is better.
`size`	`"sm" \| "default" \| "lg"`	"default"	Value size: a compact result tile, a KPI tile, or a headline number.
`StatGrid columns / joined`	`2 \| 3 \| 4 / boolean`	3 / false	Responsive columns that start at one on phones, and a joined panel with hairline dividers.

Dependencies: @tabler/icons-react, plus the shared @/lib/utils helper.

Semantics, keyboard behavior, and the decisions that keep the component operable.

The label and value are a dt and dd pair, so the value is announced with its label rather than as a stray number.
The value is not a live region. A ticking counter does not interrupt a screen reader; announce important changes separately.
Trend direction is shown by an arrow and stated in the trend label. Colour is supplementary.
Icons are decorative and hidden from assistive technology.

The Aback products whose interfaces shaped this component.