Stat

Displays a single statistic with a bold value and a label. Place multiple Stat components in a row for stat groups.

Also known as: metric, counter, figure, key figure, KPI

When to use

Showing numeric metrics like follower counts, order totals, or completion rates.
Displaying key-value pairs in profile cards or dashboards.
Building stat rows in card footers.

tsx

import { Stat } from '@vacano/ui'

tsx

<Stat value="97.1K" label="Followers" />

tsx

<div style={{ display: 'flex', gap: 16 }}>
  <Stat value="4" label="Following" />
  <Stat value="97.1K" label="Followers" />
</div>

tsx

<Stat value="$12,450" label="Revenue" />
<Stat value="1,024" label="Orders" />
<Stat value="89%" label="Completion" />

Prop	Type	Default	Description
`value`	`ReactNode`	required	The stat value (bold, dark text)
`label`	`string`	required	Description label (gray text)
`ref`	`Ref<HTMLSpanElement>`	-	Forwarded ref
`className`	`string`	-	CSS class name for the root element
`classnames`	`StatClassNames`	-	Custom class names for sub-elements

Key	Description
`value`	The bold value element
`label`	The gray label element