Stat

A figure and what it counts.

import { Stat } from '@zitdevs/ui';

Examples

16

services under one agreement

EN / ES

languages we work in

16

services under one agreement

<Stat value="16" label="services under one agreement" />
<Stat surface="dark" value="16" label="services under one agreement" />

Props

Prop	Type	Default	Notes
value	string	required	Shown as written, such as “16” or “EN / ES”.
label	string	required	What the figure counts.
surface	Surface	'light'	dark is the inverse band only; see Theming.
ref	Ref<HTMLDivElement>	—	The root.
className	string	—	Placement.
anything else	<div> attributes	—

Exported type: StatProps.

Accessibility

• Two paragraphs, read as the figure followed by what it counts.
• Static on purpose: never animate the figure. An invented number that ticks up on a timer reads as live data, and costs the page its credibility once it is understood to be neither.

Without JavaScript

It needs none: two paragraphs, rendered as a Server Component.

Theming

The figure is text-stat (a fluid 34–48px) in primary on a light field and on-inverse on a dark one; the label is body or on-inverse-muted.

surface="dark" means the inverse band: on-inverse-muted reads at 14.9:1 there but only 4.19:1 on the primary band, so do not set it on the primary band.