BLUEPRINT
The Official daisyUI Code Generator MCP Server

Countdown

Countdown gives you a transition effect when you change a number between 0 to 999.

Class name		Type
countdown
Component
Countdown wrapper

you need to change the span text and the --value CSS variable using JS. Value must be a number between 0 and 999.

you can set the minimum number of digits to display to 2 or 3 with --digits: 2 or --digits: 3 CSS variable.

Countdown

59
<span class="$$countdown">
  <span style="--$$value:59;" aria-live="polite" aria-label="59">59</span>
</span>
{/* For TSX uncomment the commented types below */}
<span class="$$countdown">
  <span style={{"--$$value":59} /* as React.CSSProperties */ } aria-live="polite" aria-label={counter}>59</span>
</span>

Large text with 2 digits

59
<span class="$$countdown font-mono text-6xl">
  <span style="--$$value:59; --$$digits: 2;" aria-live="polite" aria-label="59">59</span>
</span>
{/* For TSX uncomment the commented types below */}
<span class="$$countdown font-mono text-6xl">
  <span style={{"--$$value":59, "--$$digits":2} /* as React.CSSProperties */ } aria-live="polite" aria-label={counter}>59</span>
</span>

Clock countdown

10h 24m 59s
<span class="$$countdown font-mono text-2xl">
  <span style="--$$value:10;" aria-live="polite" aria-label="10">10</span>
  h
  <span style="--$$value:24;" aria-live="polite" aria-label="24">24</span>
  m
  <span style="--$$value:59;" aria-live="polite" aria-label="59">59</span>
  s
</span>
{/* For TSX uncomment the commented types below */}
<span class="$$countdown font-mono text-2xl">
  <span style={{"--$$value":10} /* as React.CSSProperties */ } aria-live="polite" aria-label={counter}>10</span>h
  <span style={{"--$$value":24} /* as React.CSSProperties */ } aria-live="polite" aria-label={counter}>24</span>m
  <span style={{"--$$value":59} /* as React.CSSProperties */ } aria-live="polite" aria-label={counter}>59</span>s
</span>

Clock countdown with colons

10: 24: 59
<span class="$$countdown font-mono text-2xl">
  <span style="--$$value:10;" aria-live="polite" aria-label="10">10</span>
  :
  <span style="--$$value:24; --$$digits: 2;" aria-live="polite" aria-label="24">24</span>
  :
  <span style="--$$value:59; --$$digits: 2;" aria-live="polite" aria-label="59">59</span>
</span>
{/* For TSX uncomment the commented types below */}
<span class="$$countdown font-mono text-2xl">
  <span style={{"--$$value":10} /* as React.CSSProperties */ } aria-live="polite" aria-label={counter}>10</span>:
  <span style={{"--$$value":24} /* as React.CSSProperties */ } aria-live="polite" aria-label={counter}>24</span>:
  <span style={{"--$$value":59, "--$$digits":2} /* as React.CSSProperties */ } aria-live="polite" aria-label={counter}>59</span>
</span>

Large text with labels

15 days
10 hours
24 minutes
59 sec
<div class="flex gap-5">
  <div>
    <span class="$$countdown font-mono text-4xl">
      <span style="--$$value:15;" aria-live="polite" aria-label="15">15</span>
    </span>
    days
  </div>
  <div>
    <span class="$$countdown font-mono text-4xl">
      <span style="--$$value:10;" aria-live="polite" aria-label="10">10</span>
    </span>
    hours
  </div>
  <div>
    <span class="$$countdown font-mono text-4xl">
      <span style="--$$value:24;" aria-live="polite" aria-label="24">24</span>
    </span>
    min
  </div>
  <div>
    <span class="$$countdown font-mono text-4xl">
      <span style="--$$value:59;" aria-live="polite" aria-label="59">59</span>
    </span>
    sec
  </div>
</div>
{/* For TSX uncomment the commented types below */}
<div class="flex gap-5">
  <div>
    <span class="$$countdown font-mono text-4xl">
        <span style={{"--$$value":15} /* as React.CSSProperties */ } aria-live="polite" aria-label={counter}>15</span>
    </span>
    days
  </div>
  <div>
    <span class="$$countdown font-mono text-4xl">
        <span style={{"--$$value":10} /* as React.CSSProperties */ } aria-live="polite" aria-label={counter}>10</span>
    </span>
    hours
  </div>
  <div>
    <span class="$$countdown font-mono text-4xl">
      <span style={{"--$$value":24} /* as React.CSSProperties */ } aria-live="polite" aria-label={counter}>24</span>
    </span>
    min
  </div>
  <div>
    <span class="$$countdown font-mono text-4xl">
      <span style={{"--$$value":59} /* as React.CSSProperties */ } aria-live="polite" aria-label={counter}>59</span>
    </span>
    sec
  </div>
</div>

Large text with labels under

15 days
10 hours
24 min
59 sec
<div class="grid auto-cols-max grid-flow-col gap-5 text-center">
  <div class="flex flex-col">
    <span class="$$countdown font-mono text-5xl">
      <span style="--$$value:15;" aria-live="polite" aria-label="15">15</span>
    </span>
    days
  </div>
  <div class="flex flex-col">
    <span class="$$countdown font-mono text-5xl">
      <span style="--$$value:10;" aria-live="polite" aria-label="10">10</span>
    </span>
    hours
  </div>
  <div class="flex flex-col">
    <span class="$$countdown font-mono text-5xl">
      <span style="--$$value:24;" aria-live="polite" aria-label="24">24</span>
    </span>
    min
  </div>
  <div class="flex flex-col">
    <span class="$$countdown font-mono text-5xl">
      <span style="--$$value:59;" aria-live="polite" aria-label="59">59</span>
    </span>
    sec
  </div>
</div>
{/* For TSX uncomment the commented types below */}
<div class="grid grid-flow-col gap-5 text-center auto-cols-max">
  <div class="flex flex-col">
    <span class="$$countdown font-mono text-5xl">
      <span style={{"--$$value":15} /* as React.CSSProperties */ } aria-live="polite" aria-label={counter}>15</span>
    </span>
    days
  </div>
  <div class="flex flex-col">
    <span class="$$countdown font-mono text-5xl">
      <span style={{"--$$value":10} /* as React.CSSProperties */ } aria-live="polite" aria-label={counter}>10</span>
    </span>
    hours
  </div>
  <div class="flex flex-col">
    <span class="$$countdown font-mono text-5xl">
      <span style={{"--$$value":24} /* as React.CSSProperties */ } aria-live="polite" aria-label={counter}>24</span>
    </span>
    min
  </div>
  <div class="flex flex-col">
    <span class="$$countdown font-mono text-5xl">
      <span style={{"--$$value":59} /* as React.CSSProperties */ } aria-live="polite" aria-label={counter}>59</span>
    </span>
    sec
  </div>
</div>

In boxes

15 days
10 hours
24 min
59 sec
<div class="grid auto-cols-max grid-flow-col gap-5 text-center">
  <div class="bg-neutral rounded-box text-neutral-content flex flex-col p-2">
    <span class="$$countdown font-mono text-5xl">
      <span style="--$$value:15;" aria-live="polite" aria-label="15">15</span>
    </span>
    days
  </div>
  <div class="bg-neutral rounded-box text-neutral-content flex flex-col p-2">
    <span class="$$countdown font-mono text-5xl">
      <span style="--$$value:10;" aria-live="polite" aria-label="10">10</span>
    </span>
    hours
  </div>
  <div class="bg-neutral rounded-box text-neutral-content flex flex-col p-2">
    <span class="$$countdown font-mono text-5xl">
      <span style="--$$value:24;" aria-live="polite" aria-label="24">24</span>
    </span>
    min
  </div>
  <div class="bg-neutral rounded-box text-neutral-content flex flex-col p-2">
    <span class="$$countdown font-mono text-5xl">
      <span style="--$$value:59;" aria-live="polite" aria-label="59">59</span>
    </span>
    sec
  </div>
</div>
{/* For TSX uncomment the commented types below */}
<div class="grid grid-flow-col gap-5 text-center auto-cols-max">
  <div class="flex flex-col p-2 bg-neutral rounded-box text-neutral-content">
    <span class="$$countdown font-mono text-5xl">
      <span style={{"--$$value":15} /* as React.CSSProperties */ } aria-live="polite" aria-label={counter}>15</span>
    </span>
    days
  </div>
  <div class="flex flex-col p-2 bg-neutral rounded-box text-neutral-content">
    <span class="$$countdown font-mono text-5xl">
      <span style={{"--$$value":10} /* as React.CSSProperties */ } aria-live="polite" aria-label={counter}>10</span>
    </span>
    hours
  </div>
  <div class="flex flex-col p-2 bg-neutral rounded-box text-neutral-content">
    <span class="$$countdown font-mono text-5xl">
      <span style={{"--$$value":24} /* as React.CSSProperties */ } aria-live="polite" aria-label={counter}>24</span>
    </span>
    min
  </div>
  <div class="flex flex-col p-2 bg-neutral rounded-box text-neutral-content">
    <span class="$$countdown font-mono text-5xl">
      <span style={{"--$$value":59} /* as React.CSSProperties */ } aria-live="polite" aria-label={counter}>59</span>
    </span>
    sec
  </div>
</div>
Do you have a question? Ask on GitHub or Discord server
Do you see a bug? open an issue on GitHub
Do you like daisyUI? Post about it!
Support daisyUI's development: Open Collective
daisyUI store

NEXUS
Official daisyUI Dashboard Template

Available on daisyUI store

More details
Please upgrade your browser