An animated number component for React, Vue, Svelte, and TS/JS.
7.5k
Stars
151
Forks
18
Open issues
4
Contributors
AI Analysis
NumberFlow is an animated number component library supporting React, Vue, Svelte, and vanilla TypeScript/JavaScript. It specializes in smoothly animating numeric transitions with accessibility built in, serving developers who need polished odometer-style or counter effects in web applications. Best suited for dashboards, analytics UIs, e-commerce price displays, and any interface requiring visually smooth numeric updates.
Inferred from signals mentioned in the README (tests, CI, type safety) — not a review of the actual code.
AI's overall editorial judgment — not an average of the bars above, can weigh other factors too.
NumberFlow brings smooth animated number transitions to React, Vue, Svelte, and vanilla JS
NumberFlow is a lightweight TypeScript component library that animates numeric value changes — digits slide in/out, decimals and separators reflow naturally — across four major frontend frameworks. It targets UI engineers and product teams who want polished number transitions (dashboards, counters, pricing displays) without building custom animation logic. With ~7,500 GitHub stars less than two years after creation and active weekly pushes, it has established a clear niche. It does one narrow thing well and ships framework-native packages rather than a single adapter-based wrapper.
Created in July 2024 by Mason Barvian, the project grew quickly after launch, likely amplified by social media sharing of its demo video. It evolved from a single React component into a multi-framework library covering Vue, Svelte, and vanilla JS/TS.
Growth appears driven primarily by viral demo content — the README embeds a video showing the animation quality, which performs well on Twitter/X and developer communities. Reaching ~7,475 stars in roughly two years without a backing organization suggests sustained organic interest from frontend developers attracted to the visual quality of the output. The 83 stars in the last 7 days indicates continued steady momentum rather than a fading spike.
NPM badge is present and links to an active package. The existence of framework-specific packages and a dedicated documentation site (number-flow.barvian.me) suggests real deployment effort beyond a demo. However, no explicit case studies, download statistics, or named production users are cited in the README. Adoption is plausible given the star count and multi-framework support, but large-scale production usage is not directly verified from available metadata.
Likely structured as a monorepo with separate framework-specific packages (number-flow, @number-flow/react, @number-flow/vue, @number-flow/svelte based on common patterns for this type of library). The core animation logic appears to live in a shared TypeScript package, with thin framework wrappers. Based on README, it uses CSS-based animations rather than a JS animation engine, which likely contributes to its performance profile.
not documented in README
Last push was June 30, 2026 — one week before the current date. This indicates active, ongoing development. The project has been maintained consistently since its July 2024 creation, suggesting a healthy maintenance cadence with 150 forks indicating community engagement beyond passive use.
ADOPT IF: you need polished, per-digit animated number transitions across React, Vue, or Svelte and want a maintained, MIT-licensed drop-in component rather than building custom animation logic. AVOID IF: you only need a simple count-up from zero to a target, your project targets environments where CSS animation support is limited, or bundle size is extremely constrained and the visual effect is not important enough to justify the dependency. MONITOR IF: you are evaluating it for heavy server-side rendering use cases or need accessibility guarantees (screen reader behavior with live animated numbers), as README does not clearly document either.
Independent dimensions
Mainstream potential
5/10
Technical importance
6/10
Adoption evidence
4/10
- Single primary maintainer (barvian) — bus factor risk is real for a solo-author project with no evident organizational backing.
- Framework churn risk: supporting React, Vue, Svelte, and vanilla JS simultaneously means each major framework release (e.g., React 20, Svelte 6) could require coordinated updates across all packages.
- The project's appeal is largely visual — if browser-native CSS animations or a competing library ships an equally elegant solution, switching costs for users are low.
- No documented accessibility (ARIA live region) behavior in the README; animated numeric content can be problematic for screen reader users if not handled carefully.
- NPM download statistics and actual production usage depth are not publicly surfaced in the README, making it difficult to assess true adoption beyond star count.
Likely to remain a stable, well-regarded specialist library in the frontend UI space. May expand framework coverage (e.g., Solid, Angular) but is unlikely to grow into a general animation system. Continued slow, steady star growth is the most probable trajectory.
Newsletter
Get analyses like this every Monday
Free weekly digest of the most interesting open-source discoveries.
Languages
Information
- Website
- https://number-flow.barvian.me
- Language
- TypeScript
- License
- MIT
- Last updated
- 17h ago
- Created
- 24mo ago
- Analyzed with
- anthropic/claude-haiku-4-5
Stars over time
Contributors over time
Top 100 contributors only — repos with more will plateau at 100.
Open issues
Numberflow svelte 5 props seem to be wrongly typed as `any`
NumberFlow does not work for older Safari versions
NumberFlow displays old and new values simultaneously during value changes
Svelte 5 Runes support?
Visual bugs between animations if italic text is used
Similar repos
inorganik/countUp.js
CountUp.js is a lightweight, dependency-free JavaScript library that animates...
bcakmakoglu/vue-flow
Vue Flow is a highly customizable flowchart/diagram component for Vue 3 that...
themesberg/flowbite-react
Flowbite React is an official open-source component library providing pre-built...
| Repository | Stars | Week Δ | Language | Score | Updated |
|---|---|---|---|---|---|
|
barvian/number-flow
this
|
7.5k | +107 | TypeScript | 8/10 | 17h ago |
|
inorganik/countUp.js
|
8.2k | — | TypeScript | 8/10 | 1w ago |
 xyflow/xyflow
|
37.6k | — | TypeScript | 8/10 | 17h ago |
|
bcakmakoglu/vue-flow
|
6.7k | — | TypeScript | 8/10 | 2w ago |
|
themesberg/flowbite-react
|
2.1k | — | TypeScript | 7/10 | 2w ago |
 davidjerleke/embla-carousel
|
8.3k | — | TypeScript | 8/10 | 2d ago |
countUp.js (~8,160 stars) is the most direct ancestor — it animates numbers counting up from zero or between values. NumberFlow differentiates by animating individual digit slots with directional slides, supporting formatted numbers (currency, decimals, separators), and offering native framework components rather than imperative API calls. CountUp.js is more mature and battle-tested; NumberFlow offers more visual sophistication.
Framer Motion can animate numbers via its motion values and layout animations, but requires significantly more configuration to replicate NumberFlow's digit-level transitions. NumberFlow is a drop-in component with sensible defaults; Framer Motion is a full animation system. They are not mutually exclusive — some teams may use both.
GSAP's text/number plugins can produce similar effects but require a commercial license for many use cases, carry a much larger bundle footprint, and have no framework-native components. NumberFlow is MIT-licensed and framework-native, making it a more practical default for typical web app use cases.
Smaller Vue-specific number animation libraries exist but typically only handle simple count-up behavior without per-digit animation or Intl formatting support. NumberFlow's Vue package covers this use case with higher visual fidelity.
Some developers implement number animations with CSS custom properties and @keyframes. This avoids JS dependencies but cannot handle arbitrary formatting (currency, separators) or variable digit counts. NumberFlow handles these cases natively.
