Motion Primitives
uianimated-numbersource: ok · hit
Animated Number
A component that animates number changes with smooth transitions.
npx shadcn add "https://motion-primitives.com/c/animated-number.json"free
No selection tags yet — empty means no evidence, not lack of support.
Dependencies
Bundle weight · mediumanimationmotion
Files1 · source cached 10/14/2026, 11:38:56 AM
animated-number.tsx
'use client';
import { cn } from '@/lib/utils';
import { motion, SpringOptions, useSpring, useTransform } from 'motion/react';
import { useEffect } from 'react';
export type AnimatedNumberProps = {
value: number;
className?: string;
springOptions?: SpringOptions;
as?: React.ElementType;
};
export function AnimatedNumber({
value,
className,
springOptions,
as = 'span',
}: AnimatedNumberProps) {
const MotionComponent = motion.create(as as keyof JSX.IntrinsicElements);
const spring = useSpring(value, springOptions);
const display = useTransform(spring, (current) =>
Math.round(current).toLocaleString()
);
useEffect(() => {
spring.set(value);
}, [spring, value]);
return (
<MotionComponent className={cn('tabular-nums', className)}>
{display}
</MotionComponent>
);
}