Installation
Basic
Monthly visitors
Formatting
Revenue
Conversion
Blur and timing
8px · 320ms
21px · 560ms
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | — | The numeric value to format. Changed character slots animate automatically. |
| format | Intl.NumberFormatOptions | — | Formatting options such as grouping and fixed fraction digits. |
| locale | string | "en-US" | Locale passed to Intl.NumberFormat. Keep it fixed for SSR consistency. |
| prefix / suffix | ReactNode | — | Content rendered before or after the formatted number. |
| duration | number | 450 | Duration of the slide, spring settle, and blur transition in milliseconds. |
| blur | number | 21 | Peak blur in pixels. Set it to 0 for a crisp changed-character slide. |
| style | BlurNumberStyle | — | Native span styles plus "--bui-blur-number-distance" for travel-distance tuning. |
| aria-label | string | — | Overrides the generated accessible value when a non-text prefix or suffix needs context. |
Credits
BlurNumber is adapted from animated-blur-number by serafim, released under the MIT License. See the original demo. For continuous digit wheels, formatting plugins, and grouped transitions, use NumberFlow.