# NumberFlow

> Animated, accessible rolling-number component built on native Intl.NumberFormat and Web Animations.

NumberFlow is an open-source, dependency-free web component that creates smooth, rolling digit transitions when numbers change. Built on Intl.NumberFormat and standard Web Animations APIs, it supports localization, custom prefixes and suffixes, and reduced-motion preferences out of the box. It works as a vanilla custom element or with modern UI frameworks like React.

Website: https://number-flow.barvian.me/vanilla

Also at: https://github.com/barvian/number-flow

## What it is for

- Animate pricing changes and currency tickers in dashboard interfaces
- Display smooth rolling transitions for metric counters, stats, and steppers
- Build accessible countdown timers with custom digit-roll logic

## Features

- Dependency-free web component with React wrapper support
- Built-in localization and formatting using standard Intl.NumberFormat
- Configurable animation timings for transforms, digit spin, and opacity
- Customizable trend directions (always up, always down, or individual digit trends)
- Continuous rolling plugin to simulate transitions passing through intermediate values
- Group syncing via number-flow-group for multi-number layouts
- CSS Shadow DOM parts exposure for granular styling
- Built-in support for SSR and reduced motion preferences

## Pricing

Open source. Free and open-source (MIT)

## Details

- Type: Web app
- Category: [Development](https://xiry.app/topics/development.md)
- Topic: [UI Components](https://xiry.app/topics/development/ui-components.md)
- Open source: yes
- Platforms: Web, Code library
- For: Front-end developers and UI designers looking for accessible animated counters
- Alternative to: MotionNumber, react-countup
- Tags: web components, animation, react, ui, javascript, typography

## Why it was saved

- [@mbarvian, 15 October 2024](https://x.com/mbarvian/status/1846234563695333605): Transitions, formats and localizes numbers (steppers, prices, sliders, stat counters); built on Intl.NumberFormat and Web Animations, dependency-free, accessible, customizable; works with Framer Motion.
- [@mbarvian, 11 March 2025](https://x.com/mbarvian/status/1899459924796772861): Drop-in component for animating rolling numbers (counters, prices, stats) in any web project.

## Related

- [shadcn/ui](https://xiry.app/resources/shadcn-ui-1902): Copy-paste React UI components built with Tailwind CSS and Radix primitives. (Website, Open source)
- [Efferd](https://xiry.app/resources/efferd): Pre-built, responsive shadcn/ui blocks and layouts for React applications (Web app, Freemium)
- [Motion](https://xiry.app/resources/motion): Open-source animation library for React, Vue, and vanilla JavaScript (Website, Freemium)
- [React Bits](https://xiry.app/resources/react-bits): Open-source animated and interactive React UI components and backgrounds (Website, Freemium)
- [21st.dev](https://xiry.app/resources/21st-dev): Curated directory of crafted React, Tailwind, and shadcn UI components. (Website, Freemium)
- [lucide-animated](https://xiry.app/resources/lucide-animated): Open-source animated React icons built with Lucide and Motion (Web app, Open source)

Updated 11 October 2026. Page: https://xiry.app/resources/numberflow-2047

Make your own library: Xiry takes your saved reels, tweets, Reddit bookmarks and Watch Later videos, makes them searchable and pulls the useful stuff out, like this library. It's invite-only for now; join the waitlist at https://xiry.app/#waitlist.