Animated Number - Saturation UI

Installation

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

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

<AnimatedNumber value={1234} />

Currency display with $ prefix.

Large numbers with locale formatting.

Custom spring physics animation.

Load Budget

980,100

Loads from 99% of target with a gradual animation

Gradual fade-in animation from near-target value.

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

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

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

<AnimatedNumber value={1234} />

Total Amount

$1,234