Animated Number

Usage

Overview

A changing number is Text from @prepared911/ui/text with value. Text formats it, sets tabular numerals, and rolls the digits that changed. roll={false} renders the same formatted number as plain text.

When to use

KPI values that update in place (MetricCard, dashboards, counters).
Any numeric readout that should move when its value changes.

When not to use

Plain labels, headings, or prose: pass children to Text instead of value.
Copy the caller already wrote, including a preformatted duration.
Entire card activation: use MetricCard or Card.

Variants

Prop	Purpose
`value`	The number. Digits roll to each new value.
`type`	Typography role, such as `TextType.Title` or `TextType.Section`.
`from`	Optional entrance start. Omission paints `value` with no motion.
`roll`	`false` renders plain formatted text. Default is `true`.
`announcement`	Localized copy a polite live region speaks after the roll settles.

Text for typography and value mode.
MetricCard for the KPI preset.

Tokens

Animated Number / API and Development

On this page

Animated Number

Usage

Overview

When to use

KPI values that update in place (MetricCard, dashboards, counters).
Any numeric readout that should move when its value changes.

When not to use

Plain labels, headings, or prose: pass children to Text instead of value.
Copy the caller already wrote, including a preformatted duration.
Entire card activation: use MetricCard or Card.

Variants

Prop	Purpose
`value`	The number. Digits roll to each new value.
`type`	Typography role, such as `TextType.Title` or `TextType.Section`.
`from`	Optional entrance start. Omission paints `value` with no motion.
`roll`	`false` renders plain formatted text. Default is `true`.
`announcement`	Localized copy a polite live region speaks after the roll settles.

Text for typography and value mode.
MetricCard for the KPI preset.

Tokens

Animated Number / API and Development

On this page