Animated number

Animates a number when its value changes.

Views today

animated-number-basic-demo.tsx

"use client";import { useState } from "react";import { AnimatedNumber } from "@/components/vip-ui/animated-number";import { Button } from "@/components/vip-ui/button";export function AnimatedNumberBasicDemo() {  const [views, setViews] = useState(1284);  return (    <div className="grid justify-items-center gap-4 text-center">      <div>        <p className="text-sm text-muted-foreground">Views today</p>        <AnimatedNumber          value={views}          aria-live="polite"          className="mt-1 block text-5xl font-semibold tracking-[-0.06em]"        />      </div>      <Button        variant="secondary"        size="sm"        onPress={() => setViews((value) => value + 125)}      >        Add 125 views      </Button>    </div>  );}

Installation

CLI

Manual

The CLI adds the files, packages, theme variables, and Tailwind plugin that this component uses. Before you run it, set up your project.

npm

yarn

pnpm

bun

pnpm dlx shadcn@latest add https://vip-ui.dev/r/vip-animated-number.json

Digit slide

Set variant="slide" to move only the digits that change.

Open tasks

animated-number-slide-demo.tsx

"use client";import { useState } from "react";import { AnimatedNumber } from "@/components/vip-ui/animated-number";import { Button } from "@/components/vip-ui/button";export function AnimatedNumberSlideDemo() {  const [open, setOpen] = useState(198);  return (    <div className="grid justify-items-center gap-4 text-center">      <div>        <p className="text-sm text-muted-foreground">Open tasks</p>        <AnimatedNumber          value={open}          variant="slide"          aria-live="polite"          className="mt-1 block text-5xl font-semibold tracking-[-0.06em]"        />      </div>      <div className="flex flex-wrap justify-center gap-2">        <Button          variant="secondary"          size="sm"          onPress={() => setOpen((value) => value + 1)}        >          Add task        </Button>        <Button          variant="outline"          size="sm"          isDisabled={open === 0}          onPress={() => setOpen((value) => Math.max(0, value - 1))}        >          Complete task        </Button>      </div>    </div>  );}

Number format

Set locale and formatOptions. Screen readers hear the same format.

Monthly budget

animated-number-format-demo.tsx

"use client";import { useState } from "react";import { AnimatedNumber } from "@/components/vip-ui/animated-number";import { Button } from "@/components/vip-ui/button";const euro: Intl.NumberFormatOptions = { style: "currency", currency: "EUR" };export function AnimatedNumberFormatDemo() {  const [budget, setBudget] = useState(1249.5);  return (    <div className="grid justify-items-center gap-4 text-center">      <div>        <p className="text-sm text-muted-foreground">Monthly budget</p>        <AnimatedNumber          value={budget}          locale="de-DE"          formatOptions={euro}          aria-live="polite"          className="mt-1 block text-5xl font-semibold tracking-[-0.06em]"        />      </div>      <Button        variant="secondary"        size="sm"        onPress={() => setBudget((value) => value + 250.75)}      >        Increase budget      </Button>    </div>  );}

API reference

value: numberRequired: The number to show. A change animates. Screen readers get the new value at once. A number wider than its container wraps.
variant: "count" | "slide" = "count": count counts to the new value. slide moves only the digits that change.
locale: string = "en-US": Locale for the number format.
formatOptions: Intl.NumberFormatOptions = { maximumFractionDigits: 0 }: Options for Intl.NumberFormat, such as a currency or a unit.