---
name: NumberFlow
slug: number-flow
url: "https://dontmakeitugly.com/resources/number-flow"
website: "https://number-flow.barvian.me"
github: "https://github.com/barvian/number-flow"
npm: "https://www.npmjs.com/package/@number-flow/react"
type: package
categories:
  - motion
  - components
tags:
  - react
  - vue
  - svelte
  - numbers
  - counters
  - pricing
  - dashboards
  - microinteractions
frameworks:
  - react
  - vue
  - svelte
pricing: free
license: MIT
openSource: true
agentFriendly: excellent
agentAccessMethods:
  - documentation
  - github
  - npm
installCommand: "npm install @number-flow/react"
difficulty: beginner
dateAdded: "2026-09-02"
---

# NumberFlow

Animated number transitions that make counters, prices and stats feel expensive.

- Type: Package
- Categories: Motion, Components
- Pricing: Free · License: MIT
- Open source: yes
- Works with: React, Vue, Svelte, TypeScript

## What it is

NumberFlow is a small component that animates changes between numbers digit by digit, with proper formatting for currency, percentages and locales. Available for React, Vue and Svelte. Accessible and respects reduced motion.

## Why it's here

A tiny detail that makes dashboards, pricing toggles and stat counters feel like a premium product. Use it on numbers that actually change.

## Best for

- pricing toggles
- stat counters
- dashboards
- small delightful details

## Links

- Website: https://number-flow.barvian.me
- GitHub: https://github.com/barvian/number-flow
- npm: https://www.npmjs.com/package/@number-flow/react

## Can my agent use this?

Yes. Clear docs with formatting examples. Point it at the framework package you need.

Agent friendliness: Excellent. Public docs, public source or an installable package. An agent can read, install and implement this directly.
Access methods: Docs, GitHub, npm.
Install: `npm install @number-flow/react`

## Prompt to hand your agent

```text
Use NumberFlow as a design and implementation reference for this project.

What it is: Animated number transitions that make counters, prices and stats feel expensive.

Website: https://number-flow.barvian.me
GitHub: https://github.com/barvian/number-flow
npm: https://www.npmjs.com/package/@number-flow/react
Install: npm install @number-flow/react

Use it specifically for:
- pricing toggles
- stat counters
- dashboards
- small delightful details

How you can access it: Docs, GitHub, npm.
Works with: React, Vue, Svelte.
License: MIT. Respect it.

Read the documentation before writing code, and use the current version's API. Install it properly rather than re-implementing it. Adapt the defaults to this project's existing design tokens, typography, spacing and accessibility requirements. Do not blindly copy the entire resource.
```

## Related

- [AutoAnimate](https://dontmakeitugly.com/resources/autoanimate.md): One line of code that animates list changes for you.
- [Tremor](https://dontmakeitugly.com/resources/tremor.md): Copy-paste React components for dashboards and charts.
- [Thinking Orbs](https://dontmakeitugly.com/resources/thinking-orbs.md): An animated orb that shows what your AI is doing: listening, thinking, searching, working.
- [Aceternity UI](https://dontmakeitugly.com/resources/aceternity-ui.md): Showy, copy-paste React components for landing pages that need a moment.

## In collections

- [Beautiful open-source React components](https://dontmakeitugly.com/collections/beautiful-open-source-components.md)
- [Make your shadcn app look less generic](https://dontmakeitugly.com/collections/less-generic-shadcn.md)
- [Motion resources worth knowing](https://dontmakeitugly.com/collections/motion-worth-knowing.md)
- [Resources for beautiful SaaS dashboards](https://dontmakeitugly.com/collections/saas-dashboards.md)

NumberFlow is an independent resource listed by Don't Make It Ugly. We link to it; we aren't affiliated with it. Pricing and licence details are as understood at the time of listing; check the official site.