Number Flow

Overview

Number Flow (number-flow.barvian.me) is an open-source animated number transitions component crafted with over 7,600+ GitHub Stars. It solves the subtle layout shift and animation jank common in numeric counters by animating individual character transitions smoothly using spring physics, locale-aware formatting, and fractional masking.

Key Features

• Spring-Tuned Character Transitions: Digits, commas, decimals, and currency symbols morph smoothly without jarring layout jumps.
• Full Multi-Framework Ecosystem: Native first-class packages for React (@number-flow/react), Vue (@number-flow/vue), Svelte (@number-flow/svelte), and Vanilla JS.
• Intl.NumberFormat Native: Built-in support for currencies, percentages, unit notations, and localized compact formatting.
• Zero-Layout Shift Layouts: Automatic layout measurement prevents surrounding UI elements from jittering during number ticks.

Installation & Quick Start

# Install React component
npm install @number-flow/react

import React, { useState } from 'react';
import NumberFlow from '@number-flow/react';

export function RevenueMetric() {
  const [value, setValue] = useState(14850.50);

  return (
    <div className="p-5 rounded-2xl bg-card border border-border flex flex-col gap-2">
      <span className="text-xs font-medium text-muted-foreground">Total ARR</span>
      <NumberFlow
        value={value}
        format={{ style: 'currency', currency: 'USD' }}
        className="text-3xl font-bold font-mono text-foreground"
      />
    </div>
  );
}

Why Choose Number Flow?

1. Financial Dashboard Polish: Delivers Bloomberg / Stripe-grade ticker fidelity to pricing matrices, trading desks, and analytics cards.
2. Accessible by Default: Screen readers read the true computed numeric value, not the animating SVG/DOM intermediate ticks.