Count Up

Text 6

About

Minimalistic count up component

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

Code

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

Usage.tsx

import { useState, useEffect } from 'react';
import { CountUp } from "@/components/ui/count-up"; 

const DemoOne = () => {
  const [startCounting, setStartCounting] = useState(false);
  const [key, setKey] = useState(0); 
  const [isDarkMode, setIsDarkMode] = useState(false);

  useEffect(() => {
    if (isDarkMode) {
      document.documentElement.classList.add('dark');
    } else {
      document.documentElement.classList.remove('dark');
    }
  }, [isDarkMode]);

  const handleStart = () => {
    setStartCounting(false);
    setTimeout(() => {
      setKey(prevKey => prevKey + 1);
      setStartCounting(true);
    }, 50);
  };

  const toggleTheme = () => {
    setIsDarkMode(!isDarkMode);
  };

  return (
    <div className="flex flex-col w-full h-screen justify-center items-center 
                   bg-white text-black 
                   dark:bg-black dark:text-white 
                   transition-colors duration-300 ease-in-out">
      

      <button
        onClick={handleStart}
        className="font-medium py-3 px-6 rounded-lg mb-8 text-lg transition-colors
                   bg-neutral-200 hover:bg-neutral-300 text-black
                   dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:text-white"
      >
        Count to 500!
      </button>
      <div className="text-8xl font-bold">
        <CountUp
          key={key}
          from={0}
          to={500}
          direction="up"
          duration={1.5}
          startWhen={startCounting}
          className="count-up-text" 
        />
      </div>
    </div>
  );
};

export { DemoOne };