NumberFlow
Accessible animated numbers with digit wheels, Intl formatting, and reduced-motion support.
Installation
Basic
Formatting
Timing and direction
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | bigint | — | The numeric value to render. Changes transition automatically. |
| format | Intl.NumberFormatOptions | — | Formatting options for the rendered number, such as currency or compact notation. |
| locales | Intl.LocalesArgument | — | Locale or locale list passed to Intl.NumberFormat. |
| prefix / suffix | string | — | Static text placed before or after the formatted value. |
| trend | number | (oldValue, value) => number | Math.sign(value - oldValue) | Controls whether digit wheels travel up, down, or choose their shortest independent path. |
| transformTiming / spinTiming / opacityTiming | EffectTiming | — | Web Animations timing objects for layout, digit spin, and added or removed characters. |
| animated | boolean | true | Disables current and future transitions when set to false. |
| respectMotionPreference | boolean | true | Honors the user's reduced-motion preference by default. |
Credits
NumberFlow is powered by NumberFlow for React by Maxwell Barvian, released under the MIT License.