Skip to content
IndexDesign corpus
Motion & InteractionAnimation LibraryPrimitiveComponent LibraryMITFreeReact

NumberFlow

Dependency-free animated number component for React, Vue, Svelte and JS

Aboutnumber-flow.barvian.me

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.

Install
npm i @number-flow/react
For an agent

Reach 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.

Install command, framework, licence and component list.
Components it ships1 total
Helps you build4
Notable for
  • 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
Provenance

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

Related resourcesMotion & Interaction