Skip to content
Index730 resources
NumberFlow

NumberFlow

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

Tier S · Best in classAnimation LibraryPrimitiveComponent Librarynumber-flow.barvian.me

(Visit number-flow.barvian.me ↗)(Docs)(Repository)
Preview image from number-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.

Facts

License
MIT
Pricing
Free, Open source
Framework
React, Vue, Svelte, Vanilla JS, Web Components
Styling
CSS custom properties, Vanilla CSS
Distribution
npm package, GitHub repository
Platform
Web
Content type
Code
Agent readiness
Structured documentation, Readable open source, Copy-paste ready code
Accessibility
Accessible, Honors reduced motion
Maturity
Actively maintained
GitHub stars
7,635
Package
@number-flow/react

Components it ships

1 total
Count UpStatTicker

Helps you build

4
AnalyticsPricing WebsitePricing Web AppUsage And Limits

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

Also in Motion & Interaction

6
number-flow.barvian.meTier S