Statistic

FreeNew

A single figure with a title, prefix, suffix, precision, locale grouping, a custom formatter, a tone and a loading state.

The full demo as documented.

Customize

Derived from this item’s props table, because it declares no controls of its own. Changes drive the preview live.

precision1

locale

tone


pnpm dlx shadcn@latest add @tealmac/statistic

import { Statistic } from "@/components/ui/statistic"

<Statistic title="Revenue" value={48210.5} precision={2} prefix="$" />
<Statistic title="Uptime" value={99.95} suffix="%" tone="positive" />

Prop	Type	Default	Description
`title`	`ReactNode`	`-`	Label of the figure.
`value`	`number \| string`	`-`	The figure.
`precision`	`number`	`-`	Fraction digits for numbers.
`prefix / suffix`	`ReactNode`	`-`	Content before and after.
`formatter`	`(value) => ReactNode`	`-`	Replaces number formatting.
`locale`	`string`	`runtime`	BCP 47 locale for grouping.
`loading`	`boolean`	`false`	Show a skeleton.
`tone`	`"default" \| "positive" \| "negative" \| "warning"`	`"default"`	Colour of the value.

Role: term/definition.

Title and value are a dt/dd pair so the figure is read with its name.
The loading state is a role=status skeleton with a Loading label; the value is not rendered.
Tone changes colour only; pair a negative tone with a sign or word.

Guide and examples


pnpm dlx shadcn@latest add @tealmac/statistic

import { Statistic } from "@/components/ui/statistic"

<Statistic title="Revenue" value={48210.5} precision={2} prefix="$" />
<Statistic title="Uptime" value={99.95} suffix="%" tone="positive" />

Prop	Type	Default	Description
`title`	`ReactNode`	`-`	Label of the figure.
`value`	`number \| string`	`-`	The figure.
`precision`	`number`	`-`	Fraction digits for numbers.
`prefix / suffix`	`ReactNode`	`-`	Content before and after.
`formatter`	`(value) => ReactNode`	`-`	Replaces number formatting.
`locale`	`string`	`runtime`	BCP 47 locale for grouping.
`loading`	`boolean`	`false`	Show a skeleton.
`tone`	`"default" \| "positive" \| "negative" \| "warning"`	`"default"`	Colour of the value.

Role: term/definition.

Title and value are a dt/dd pair so the figure is read with its name.
The loading state is a role=status skeleton with a Loading label; the value is not rendered.
Tone changes colour only; pair a negative tone with a sign or word.