ComponentsNumber Flow

Number Flow

A component that animates the transition of numbers, showcasing smooth animations for incrementing and decrementing values.

Code

Install with shadcn Beta

Terminal

npx shadcn@latest add "https://smoothui.dev/r/number-flow.json"

Or install the demo

Terminal

npx shadcn@latest add "https://smoothui.dev/r/number-flow-demo.json"

Add the CSS

global.css

@layer utilities {
  .slide-in-up {
    animation: slideInUp 0.3s forwards;
  }

  .slide-out-up {
    animation: slideOutUp 0.3s forwards;
  }

  .slide-in-down {
    animation: slideInDown 0.3s forwards;
  }

  .slide-out-down {
    animation: slideOutDown 0.3s forwards;
  }

  @keyframes slideInUp {
    from {
      transform: translateY(50px);
      filter: blur(5px);
    }
    to {
      transform: translateY(0px);
      filter: blur(0px);
    }
  }

  @keyframes slideOutUp {
    from {
      transform: translateY(0px);
      filter: blur(0px);
    }
    to {
      transform: translateY(-50px);
      filter: blur(5px);
    }
  }

  @keyframes slideInDown {
    from {
      transform: translateY(-50px);
      filter: blur(5px);
    }
    to {
      transform: translateY(0px);
      filter: blur(0px);
    }
  }

  @keyframes slideOutDown {
    from {
      transform: translateY(0px);
      filter: blur(0px);
    }
    to {
      transform: translateY(50px);
      filter: blur(5px);
    }
  }
}

How to use

Demo.tsx

"use client"

import React, { useState } from "react"

import NumberFlow from "@/components/smoothui/ui/NumberFlow"

const NumberFlowDemo = () => {
  const [value, setValue] = useState(0)
  return <NumberFlow value={value} onChange={setValue} />
}

export default NumberFlowDemo

Props

Prop	Type	Description
value?	number	Controlled value.
onChange?	(value: number) => void	Callback when value changes.
min?	number	Minimum value.
max?	number	Maximum value.
className?	string	Optional additional class names for the root container.
digitClassName?	string	Class name for the digit containers.
buttonClassName?	string	Class name for the increment/decrement buttons.