Animated Counter React chart component for Tailwind CSS v4

Add to a project

Requirements: React 19 and Tailwind CSS v4, in Next.js (App Router or Pages), Vite or React Router. Installation guide · Next.js setup · Vite setup

Usage

Import AnimatedCounter from @/components/ui/animated-counter.

"use client"

import { AnimatedCounter } from "@/components/ui/animated-counter"

export function Revenue({ total }: { total: number }) {
  return <AnimatedCounter value={total} size="lg" weight="medium" />
}

// money: two decimals and a currency mark that stays put
// <AnimatedCounter value={total} decimals={2} prefix={<span>₹</span>} grouping="indian" />

// fixed width, so a timer never shifts as it rolls over
// <AnimatedCounter value={seconds} padStart={4} separator="" />

Props

• value*
  number

  The number to show. Each change animates from whatever is on screen, so it can be updated as often as you like. Negative values get a leading minus.

• decimalsdefault 0
  number

  How many decimal places to keep, up to 15. The value is rounded to that precision, so the wheels always land on a whole digit.

• durationdefault 0.6
  number

  Roughly how many seconds a digit takes to settle on its new face. Lower it when the value updates continuously, so the wheels stay close to the number.

• padStartdefault 1
  number

  Fewest whole digits to show, up to 24, padded with leading zeros. Use it to hold the width steady when the number crosses a power of ten.

• separatordefault ","
  string

  Placed between digit groups. Pass an empty string to group nothing.

• decimalSeparatordefault "."
  string

  Character between the whole and decimal digits.

• localedefault ""
  string

  Intl locale whose group and decimal marks replace separator and decimalSeparator, unless you pass those: "en-US" writes 1,234.5, "de-DE" 1.234,5, "fr-FR" 1 234,5. Falls back to UIProvider's locale; empty keeps the separators.

• groupingdefault "western"
  "western" | "indian"

  Where the separators land. Western groups every three digits, 1,234,567. Indian groups the last three then pairs, 12,34,567.

• sizedefault "inherit"
  "inherit" | "sm" | "md" | "lg" | "xl"

  Font size: 24px (sm), 36px (md), 60px (lg) or 72px (xl). Inherit takes the size of the surrounding text, so a text class on the counter or its parent sizes it instead.

• fontdefault "inherit"
  "inherit" | "sans" | "mono" | "serif"

  Font family from your theme tokens. Figures are tabular in every family, so the width only changes when a place is gained or lost.

• weightdefault "inherit"
  "inherit" | "normal" | "medium" | "semibold" | "bold"

  Font weight of the digits, the separators and any string prefix or suffix.

• colordefault "currentColor"
  string

  Text color, any CSS color. currentColor follows the surrounding text, so it adapts to light and dark on its own.

• fadedefault true
  boolean

  Fades each digit window at its top and bottom edge, so rolling faces blur in and out. Turn it off for a hard cut like a mechanical counter.

• fadeSizedefault 22
  number

  How deep the top and bottom fade of each digit reaches, as a percent of the line box. Only with fade on.

• bouncedefault 0.18
  number

  Spring bounce of the wheels and the width changes, from 0 (settles with no overshoot) to 1.

• prefix
  ReactNode

  Rendered before the number, for a currency mark or an icon. It sits outside the wheels and never animates, but glides when the width changes.

• suffix
  ReactNode

  Rendered after the number, for a unit or a percent sign.

• className
  string

  Extra classes merged onto the root element (data-slot="animated-counter"). With size, font and weight left on inherit it styles like text, so a text class here or on a parent works too. The digit columns carry data-slot="animated-counter-digit" and the separators data-slot="animated-counter-mark", for reaching either from the root.

FAQ

Used in

More React chart and stat components