This component no longer exists. It was in motion-primitives’s manifest when we first indexed it and is not there now — the registry served its inventory on 2026-08-06 and this item was not on it. The install command below will fail. It is kept here because a tutorial somewhere still tells people to run it.
Animated Number
motion-primitives/animated-numberRemovedComponent
A component that animates number changes with smooth transitions.
Install it
npx shadcn@latest add https://raw.githubusercontent.com/ibelick/motion-primitives/HEAD/public/c/animated-number.jsonSource
1'use client';2import { cn } from '@/lib/utils';3import { motion, SpringOptions, useSpring, useTransform } from 'motion/react';4import { useEffect } from 'react';56export type AnimatedNumberProps = {7 value: number;8 className?: string;9 springOptions?: SpringOptions;10 as?: React.ElementType;11};1213export function AnimatedNumber({14 value,15 className,16 springOptions,17 as = 'span',18}: AnimatedNumberProps) {19 const MotionComponent = motion.create(as as keyof JSX.IntrinsicElements);2021 const spring = useSpring(value, springOptions);22 const display = useTransform(spring, (current) =>23 Math.round(current).toLocaleString()24 );2526 useEffect(() => {27 spring.set(value);28 }, [spring, value]);2930 return (31 <MotionComponent className={cn('tabular-nums', className)}>32 {display}33 </MotionComponent>34 );35}
What it pulls in
npm packages
