Countdown

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

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 99.

Countdown

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

Large text

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

Clock countdown

10h 24m 59s
<span class="$$countdown font-mono text-2xl">
  <span style="--$$value:10;">10</span>
  h
  <span style="--$$value:24;">24</span>
  m
  <span style="--$$value: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 */ }>10</span>h
  <span style={{"--$$value":24} /* as React.CSSProperties */ }>24</span>m
  <span style={{"--$$value":59} /* as React.CSSProperties */ }>59</span>s
</span>

Clock countdown with colons

10: 24: 59
<span class="$$countdown font-mono text-2xl">
  <span style="--$$value:10;">10</span>
  :
  <span style="--$$value:24;">24</span>
  :
  <span style="--$$value: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 */ }>10</span>:
  <span style={{"--$$value":24} /* as React.CSSProperties */ }>24</span>:
  <span style={{"--$$value":59} /* as React.CSSProperties */ }>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;">15</span>
    </span>
    days
  </div>
  <div>
    <span class="$$countdown font-mono text-4xl">
      <span style="--$$value:10;">10</span>
    </span>
    hours
  </div>
  <div>
    <span class="$$countdown font-mono text-4xl">
      <span style="--$$value:24;">24</span>
    </span>
    min
  </div>
  <div>
    <span class="$$countdown font-mono text-4xl">
      <span style="--$$value: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 */ }>15</span>
    </span>
    days
  </div>
  <div>
    <span class="$$countdown font-mono text-4xl">
        <span style={{"--$$value":10} /* as React.CSSProperties */ }>10</span>
    </span>
    hours
  </div>
  <div>
    <span class="$$countdown font-mono text-4xl">
      <span style={{"--$$value":24} /* as React.CSSProperties */ }>24</span>
    </span>
    min
  </div>
  <div>
    <span class="$$countdown font-mono text-4xl">
      <span style={{"--$$value":59} /* as React.CSSProperties */ }>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;">15</span>
    </span>
    days
  </div>
  <div class="flex flex-col">
    <span class="$$countdown font-mono text-5xl">
      <span style="--$$value:10;">10</span>
    </span>
    hours
  </div>
  <div class="flex flex-col">
    <span class="$$countdown font-mono text-5xl">
      <span style="--$$value:24;">24</span>
    </span>
    min
  </div>
  <div class="flex flex-col">
    <span class="$$countdown font-mono text-5xl">
      <span style="--$$value: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 */ }>15</span>
    </span>
    days
  </div>
  <div class="flex flex-col">
    <span class="$$countdown font-mono text-5xl">
      <span style={{"--$$value":10} /* as React.CSSProperties */ }>10</span>
    </span>
    hours
  </div>
  <div class="flex flex-col">
    <span class="$$countdown font-mono text-5xl">
      <span style={{"--$$value":24} /* as React.CSSProperties */ }>24</span>
    </span>
    min
  </div>
  <div class="flex flex-col">
    <span class="$$countdown font-mono text-5xl">
      <span style={{"--$$value":59} /* as React.CSSProperties */ }>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;">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;">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;">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;">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 */ }>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 */ }>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 */ }>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 */ }>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

Official daisyUI
Figma Library

Available on daisyUI store

More details