Docs
Animated Number

Animated Number

A Series of animated number components

 Shuffle component
$124.23 5.64%
  CountDown component
00Days
:
00Hours
:
00Minutes
:
00Seconds
  CountDown Componenet
0

References

Read Docs to more

Installation

components/ui/animated-number-random.tsx

  npx shadcn@latest add "http://skiper-ui.com/registry/animated-number-random.json"
 
  function example(){
 
  const numbers = [124.23, 41.75, 2125.95]
  const diffs = [0.0564, -0.114, 0.0029]
 
  const [currentIndex, setCurrentIndex] = useState(0)
  
  return (
 <AnimatedNumberRandom value={numbers[currentIndex]} diff={diffs[currentIndex]} />
  )}

components/ui/animated-number-countdown.tsx

  npx shadcn@latest add "http://skiper-ui.com/registry/animated-number-countdown.json"
<AnimatedNumberCountdown endDate={new Date("2025-12-31")} className="my-4" />

components/ui/animated-number-counter.tsx

  npx shadcn@latest add "http://skiper-ui.com/registry/animated-number-counter.json"
<AnimatedNumberCounter />

Skiper MarqueeCard Carousel