Components
/
Animated Number
Animated Number
A number component that smoothly animates between values with spring physics.
1,234
Installation
npx shadcn@latest add https://ui.saturation.io/r/animated-number.jsonUsage
import { AnimatedNumber } from "@/components/ui/animated-number"
export default function Example() {
const [count, setCount] = useState(0)
return (
<div>
<AnimatedNumber value={count} className="text-2xl font-bold" />
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
)
}Examples
Counter
A simple counter with increment and decrement buttons.
0
Currency
Display animated currency values.
Total Amount
$1,234
Large Numbers
Animate large numbers with automatic comma formatting.
Total Views
1,234,000Custom Spring
Customize the animation with spring options.
Score
0Fade In Effect
Number loads from 99% of target value (1% less) with smooth, gradual animation that slows down naturally.
990,000
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | - | The number value to animate to |
| className | string | - | Additional CSS classes for styling |
| springOptions | SpringOptions | - | Motion spring configuration for animation behavior |
| as | React.ElementType | span | The HTML element to render as |
On This Page
Deploy your Saturation UI app
Build beautiful, saturated interfaces with our component library.
Deploy to Vercel for the best performance and developer experience.