xiry.

Development · Web app

NumberFlow

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

From the Xiry library · Updated 11 October 2026

Visit number-flow.barvian.me ↗

Also at github.com

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.

What it's 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
Topic
UI Components
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: 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: Drop-in component for animating rolling numbers (counters, prices, stats) in any web project.

Related

  • shadcn/ui

    Copy-paste React UI components built with Tailwind CSS and Radix primitives.

  • Efferd

    Pre-built, responsive shadcn/ui blocks and layouts for React applications

  • Motion

    Open-source animation library for React, Vue, and vanilla JavaScript

  • React Bits

    Open-source animated and interactive React UI components and backgrounds

  • 21st.dev

    Curated directory of crafted React, Tailwind, and shadcn UI components.

  • lucide-animated

    Open-source animated React icons built with Lucide and Motion

All 114 in UI Components →

Updated