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 →

Examples of v0.4.5 are shown as code; only the latest version runs live. Open the live examples →

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 />);
Stat With Suffix
1const StatWithSuffix = () => (
2 <Stat label="Uptime" value={99.9} suffix="%" />
3);
4
5render(<StatWithSuffix />);
Stat With Prefix And Suffix
1const StatWithPrefixAndSuffix = () => (
2 <Stat label="Response Time" value={120} suffix="ms" />
3);
4
5render(<StatWithPrefixAndSuffix />);