A component to transition, format, and animate numbers smoothly in modern web.
Included Components
31
Examples7KFollowBasic usagePropsStylingGroupingHooksLimitationsTake the courseLearn to build components like NumberFlowformat: Intl.NumberFormatOptionslocales: Intl.LocalesArgumentprefix: string, suffix: stringTimingsisolate: booleanDefault: falseanimated: booleanDefault: truedigits: Record<number, { max?: number }>respectMotionPreference: booleanDefault: trueplugins: Plugin[]willChange: booleanDefault: falsenonce: stringonAnimationsStart: (e: CustomEvent) => voidonAnimationsFinish: (e: CustomEvent) => voidline-heightDefault: 1font-variant-numeric: tabular-numsContinuous CounterCurrency FormatterPercentage ShiftTrend Indicator AnimationDynamic Number Scroller
NumberFlow is an open-source UI component designed for smooth, continuous number transitions and localized numerical animations. Created by Max Barvian, it handles decimal changes, currency shifts, sign changes, and layout resizing with zero layout shift, supporting React, Vue, Svelte, and vanilla JavaScript.
