Animated Number - Saturation UI

Installation

pnpm dlx shadcn@latest add @saturation-ui/animated-number

Tailwind v4 — Source Scanning

The public shadcn registry installs component source into your project. If Tailwind v4 isn't scanning your components directory, add this to your CSS entry file:

@source "../components";

This ensures all utility classes in CVA variants and data attribute selectors are included in your build.

Usage

import { AnimatedNumber } from "@/components/ui/animated-number"

<AnimatedNumber value={1234} />

Examples

Currency

Currency display with $ prefix.

Large Numbers

Large numbers with locale formatting.

Custom Spring

Custom spring physics animation.

Fade In Effect

Load Budget

980,100

Loads from 99% of target with a gradual animation

Gradual fade-in animation from near-target value.

API Reference

Prop	Type	Default	Description
`value`*	`number`	—	The target number to animate toward.
`className`	`string`	—	Additional CSS classes.
`springOptions`	`SpringOptions`	—	Motion spring configuration for the animation.
`as`	`React.ElementType`	`span`	The HTML element type to render.

1,000