Display

Stat

Single label + display-font value pair. The basic readout for a metric.

Examples

Row of stats

Books 1,204

Passages 8,421

Indexed 98%

<div class="uin-stat-row">
  <Stat label="Books" value={1204} />
  <Stat label="Passages" value={8421} tone="accent" />
  <Stat label="Indexed" value="98%" />
</div>

size="lg"

Total 42,000

<Stat label="Total" value={42000} size="lg" tone="accent" />

Props

Prop	Type	Default	Description
`label`	`string`	`—`	Tiny eyebrow caption above the value.
`value`	`string \| number`	`—`	The display value. Numbers auto-locale via toLocaleString().
`tone`	`'default' \| 'accent'`	`'default'`	Accent flips the value to the accent color (KPI emphasis).
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Value font-size tier.
`hint`	`Snippet`	`—`	Small caption below the value.

Install

CLI

npx @a3tai/mittsu add stat