Stat

v0.4.5
Stable

A label over a large value, for dashboards and summary rows — with an optional prefix (a currency sign) and suffix (a unit) around the value.

pnpm add @behivetech/atoms.stat

This is the snapshot of v0.4.5, the current version, as recorded on 2026-11-10. The live page runs its examples →

A label over a large value, for dashboards and summary rows — with an optional prefix (a currency sign) and suffix (a unit) around the value.

Usage

1import { Stat } from '@behivetech/atoms.stat';
2

3<Stat label="Total pages" value={42} />
4<Stat label="Revenue" value={1200} prefix="$" />
5<Stat label="Uptime" value={99.9} suffix="%" />

Examples

Open all 4 →
Basic Stat
1const BasicStat = () => <Stat label="Total Pages" value={42} />;
2

3render(<BasicStat />);
Stat With Prefix
1const StatWithPrefix = () => (
2  <Stat label="Revenue" value={1200} prefix="$" />
3);
4

5render(<StatWithPrefix />);

Properties

Stat props

PropTypeDefaultDescription
label*string—Descriptive label shown above the value
value*string | number—The primary metric to display
classNamestring—Additional class names to merge with the component root element
prefixReactNode—Optional prefix rendered before the value (e.g. "$")
suffixReactNode—Optional suffix rendered after the value (e.g. "%", "ms")

Also accepts the native attributes of its root element (className, aria-*, event handlers, …).