Number flow

Renders animated numbers with spinning digits. Only changed digits animate, using Intl formatting and locale. Shows smooth transitions for value changes. Use for dynamic numerical displays.

bypreet from Hextaui

Installation

terminal

pnpm dlx layro-cli add @preetsuthar17/number-flow

npx layro-cli add @preetsuthar17/number-flow

npx layro-cli add @preetsuthar17/number-flow

bunx layro-cli add @preetsuthar17/number-flow

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Dependencies

Demo

"use client"

import * as React from "react"
import { cn } from "cn"

import { easeSpring } from "@/lib/motion"

type NumberFlowTrend = "auto" | "up" | "down" | "shortest"

type NumberFlowChar = {
  key: string
  section: number
  order: number
  value: string