Countdown Number

Component 137

About

Here is Countdown Number component

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

Code

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

Usage.tsx

"Use client"

import React from "react"
import { Puzzle } from "lucide-react"

import { Badge } from "@/components/ui/badge"

import AnimatedNumberCountdown from "@/components/ui/countdown-number"

const AnimatedNumberCountDownDemo = () => {
  return (
    <div className="flex flex-col items-center justify-center">
      <Badge
        variant="outline"
        className=" rounded-[14px] border border-black/10 text-base text-neutral-800 md:left-6"
      >
        <Puzzle className=" fill-[#D2F583]  stroke-1 text-neutral-800" /> &nbsp;
        CountDown component
      </Badge>
      <AnimatedNumberCountdown
        endDate={new Date("2025-12-31")}
        className="my-4"
      />
    </div>
  )
}

export default AnimatedNumberCountDownDemo;