Sliding Number

Text 83

About

A component that slides numbers.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Sliding Number to your project and fits it to your theme.

Code

How Sliding Number is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

'use client';
import { SlidingNumber } from '@/components/ui/sliding-number';
import { useEffect, useState } from 'react';

export function Clock() {
  const [hours, setHours] = useState(new Date().getHours());
  const [minutes, setMinutes] = useState(new Date().getMinutes());
  const [seconds, setSeconds] = useState(new Date().getSeconds());

  useEffect(() => {
    const interval = setInterval(() => {
      setHours(new Date().getHours());
      setMinutes(new Date().getMinutes());
      setSeconds(new Date().getSeconds());
    }, 1000);
    return () => clearInterval(interval);
  }, []);

  return (
    <div className='flex items-center gap-0.5 font-mono'>
      <SlidingNumber value={hours} padStart={true} />
      <span className='text-zinc-500'>:</span>
      <SlidingNumber value={minutes} padStart={true} />
      <span className='text-zinc-500'>:</span>
      <SlidingNumber value={seconds} padStart={true} />
    </div>
  );
}