Countdown

CSS-based digit flip animation. Set the --value CSS variable (0–999) to display a number with a smooth transition effect. Drive live countdowns via JS.

Basic

A single value renders the number with the transition animation.

Large text with 2 digits

digits=2 zero-pads to at least 2 characters. Combine with Tailwind size utilities for large displays.

Clock (h / m / s)

Compose multiple Countdown units inline with label text between them.

Clock with colons

Use digits=2 on minutes and seconds to keep two-digit formatting.

Large with inline labels

Label text placed after each countdown unit on the same line.

Large with labels underneath

Stack the number above the label using flex-col.

In boxes

Wrap each unit in a card-style box using DaisyUI's bg-neutral rounded-box.

Live countdown

Update --value and aria-label via JS to drive a real countdown. The CSS transition fires automatically on each value change.