Prism UI

$1,234

The NumberFlow component provides smooth, animated number transitions with support for various formats including currency, percentage, and compact notation. Perfect for dynamic counters, prices, statistics, and any numeric data that changes over time.

Installation

Examples

Interactive Social Card

A demo of NumberFlow with social media interactions. Click the buttons to see smooth number transitions.

28K

Usage

Basic Usage

import NumberFlow from '@number-flow/react'
 
export default function Example() {
  return <NumberFlow value={123} />
}

Currency Format

<NumberFlow
  value={1234.56}
  format={{
    style: 'currency',
    currency: 'USD',
    minimumFractionDigits: 0
  }}
  transformTiming={{
    duration: 500,
    easing: 'ease-out'
  }}
/>

Compact Notation

<NumberFlow
  value={1234567}
  format={{
    notation: 'compact',
    compactDisplay: 'short',
    roundingMode: 'trunc'
  }}
  willChange
  continuous
/>

Customization

Custom Animation Timing

<NumberFlow
  value={value}
  transformTiming={{
    duration: 500,
    easing: 'ease-out'
  }}
  spinTiming={{
    duration: 750,
    easing: 'linear(...)'
  }}
/>

Custom Number Formatting

<NumberFlow
  value={0.8567}
  format={{
    style: 'percent',
    minimumFractionDigits: 1
  }}
/>

Custom Trend Control

<NumberFlow
  value={value}
  trend={(oldValue, value) => {
    // Return:
    //  1: digits always go up
    //  0: each digit goes up/down based on its change
    // -1: digits always go down
    return Math.sign(value - oldValue)
  }}
/>

Notes

Built with accessibility in mind
Numbers are properly formatted for screen readers
Animations respect prefers-reduced-motion
ARIA attributes are automatically applied
Uses spring-based animations for smooth transitions
Supports various number formats through Intl.NumberFormat
Optimized for performance with willChange prop

Props

Prop	Type	Description	Default
value	number	The number to display and animate	Required
format	Intl.NumberFormatOptions	Formatting options for the number
locales	string \| string[]	The locale(s) for number formatting	undefined
prefix	string	Text to display before the number	undefined
suffix	string	Text to display after the number	undefined
spinTiming	EffectTiming	Timing for digit spin animations	transformTiming
willChange	boolean	Optimize for animations	false

See the NumberFlow docs for a full list of props.

Credits

NumberFlow was created by Maxwell Barvian. The animations were inspired by Emil Kowalski's Animations on the Web course.

NumberFlow