NumberFlow
Dependency-free animated number component for React, Vue, Svelte and JS
NumberFlow by Maxwell Barvian animates a number as its value changes, rendering an odometer-style digit roll. It is built on a custom element with no runtime dependencies and ships as four MIT packages — @number-flow/react, @number-flow/vue, @number-flow/svelte and the framework-agnostic number-flow. Formatting goes through Intl.NumberFormatOptions so currency, percent, compact notation and locale come free; transform, spin and opacity timings are independently controllable, digit trend can be forced up, down or neutral, and prefers-reduced-motion is respected. Styling is done through CSS ::part selectors and custom properties, NumberFlowGroup syncs several instances whose layout shifts affect each other, and a `continuous` plugin makes a transition appear to pass through the intermediate numbers.
npm i @number-flow/reactReach for NumberFlow any time a displayed number changes and the change should be legible — pricing toggles, live counters, stat tiles, cart totals, usage meters — instead of hand-rolling a count-up with a spring library. It composes with anything because the core is a custom element with zero dependencies: install @number-flow/react, @number-flow/vue or @number-flow/svelte to match the host app, and use the plain `number-flow` package outside a framework. Two gotchas: pass formatting through the `format` prop as Intl.NumberFormatOptions rather than pre-formatting the string, or the digit diffing breaks; and wrap instances in NumberFlowGroup when one animating number shifts another's position, otherwise their transitions desync.
Why it is here. The reference implementation for animated numbers on the web — four framework bindings, no dependencies, motion-preference aware, and 7.6k stars behind it. There is no reason to write this yourself.
- custom-element core with zero dependencies
- React, Vue, Svelte and vanilla packages
- Intl.NumberFormat-driven formatting
- ::part and CSS custom property styling
- NumberFlowGroup transition syncing
- continuous plugin for pass-through digits
Verified 2026-08-15. HTTP 200. https://number-flow.barvian.me/, https://number-flow.barvian.me/vue, https://github.com/barvian/number-flow, https://api.github.com/repos/barvian/number-flow, https://registry.npmjs.org/@number-flow/react|vue|svelte and number-flow








