Number Flow

Smoothly animates between numeric values with digit-by-digit rolling animation. Supports prefix and suffix.

$1,23499%

Code

import { NumberFlow } from "@/components/ui/number-flow"

export default function Example() {
  return (
    <div className="flex gap-8">
      <NumberFlow value={1234} prefix="$" className="text-4xl font-bold" />
      <NumberFlow value={99} suffix="%" className="text-4xl font-bold" />
    </div>
  )
}

Installation

$npx particleui-cli add number-flow

Usage

TSX

import { NumberFlow } from "@/components/ui/number-flow"

export default function Example() {
  return (
    <div className="flex gap-8">
      <NumberFlow value={1234} prefix="$" className="text-4xl font-bold" />
      <NumberFlow value={99} suffix="%" className="text-4xl font-bold" />
    </div>
  )
}

Props

Prop	Type	Default	Required
value	number	—	yes
prefix	string	—	no
suffix	string	—	no
className	string	—	no

Details

Source filecomponents/ui/number-flow.tsx

Typeui

Categoriestext, particles

npm dependencies

Registry deps

Claude skill—