Animated Number Flow

FreeNew

A number whose digits roll like an odometer to the new value, with Intl formatting for currency, percent and compact notation.

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.

value1

locale

prefix

suffix

announce

fade


pnpm dlx shadcn@latest add https://ui.tealmac.com/r/animated-number-flow.json

import { AnimatedNumberFlow } from "@/components/ui/animated-number-flow"

<AnimatedNumberFlow
  value={price}
  format={{ style: "currency", currency: "USD", maximumFractionDigits: 0 }}
/>

<AnimatedNumberFlow value={0.42} format={{ style: "percent" }} announce />

Prop	Type	Default	Description
`value`	`number`	-	The number to show. Change it and the digits roll to the new value.
`locale`	`string`	`"en-US"`	BCP 47 locale for grouping and decimals. Fixed so server and browser agree.
`format`	`Intl.NumberFormatOptions`	-	Currency, percent, compact notation, fraction digits and so on.
`prefix`	`string`	-	Text before the number, such as a unit label.
`suffix`	`string`	-	Text after the number.
`announce`	`boolean`	`false`	Read each change aloud politely. Off by default because it can be noisy.
`fade`	`boolean`	`true`	Fade the top and bottom edge of each rolling digit.

Also accepts all <span> props.

Digits are keyed by place value, so the ones column stays put when a thousands column appears or disappears.
Screen readers get the full formatted value as plain text; the rolling digits are hidden from them.
With reduced motion the digits change without rolling.

Guide and examples


pnpm dlx shadcn@latest add https://ui.tealmac.com/r/animated-number-flow.json

import { AnimatedNumberFlow } from "@/components/ui/animated-number-flow"

<AnimatedNumberFlow
  value={price}
  format={{ style: "currency", currency: "USD", maximumFractionDigits: 0 }}
/>

<AnimatedNumberFlow value={0.42} format={{ style: "percent" }} announce />

Prop	Type	Default	Description
`value`	`number`	-	The number to show. Change it and the digits roll to the new value.
`locale`	`string`	`"en-US"`	BCP 47 locale for grouping and decimals. Fixed so server and browser agree.
`format`	`Intl.NumberFormatOptions`	-	Currency, percent, compact notation, fraction digits and so on.
`prefix`	`string`	-	Text before the number, such as a unit label.
`suffix`	`string`	-	Text after the number.
`announce`	`boolean`	`false`	Read each change aloud politely. Off by default because it can be noisy.
`fade`	`boolean`	`true`	Fade the top and bottom edge of each rolling digit.

Also accepts all <span> props.

Digits are keyed by place value, so the ones column stays put when a thousands column appears or disappears.
Screen readers get the full formatted value as plain text; the rolling digits are hidden from them.
With reduced motion the digits change without rolling.