Countdown

Pro

Live countdown with rolling digits, inline or as blocks that brighten through the final ten seconds. At zero it can celebrate and show your result, or quietly fade if time ran out.

Preview

Installation

npx @lumioui/cli add pro/countdown

Usage

import { Countdown } from "@/components/ui/countdown/countdown";
<Countdown />

Examples

Blocks

A ticketing app's presale waiting room.

Compact

A seat hold at theatre checkout.

API reference

Prop Type Default
to* Date | number

Target time — epoch ms or Date. The display clamps at zero.

 —
format "auto" | "dhms" | "ms"

Which units to render. "auto" (default) drops leading zero units — under an hour you get MM:SS, over a day DD:HH:MM:SS. "dhms" always shows all four, "ms" forces MM:SS.

 "auto"
compact boolean

Compact "2d 4h 12m" text instead of the colon clock. Inline layout only.

 false
layout "inline" | "blocks"

"blocks" renders each unit as a labeled card; default "inline" clock.

 "inline"
onComplete () => void

Fires once when the countdown reaches zero.

 —
onResolve () => void

Fires after the zero moment has held (~700ms) — move the screen on here.

 —
resolved React.ReactNode

What the countdown resolves into, in place, after the hold ("On sale now").

 —
celebrate boolean

Zero is a launch (sheen + light, default) or a lapse (false: the digits dim).

 true
textClassName string

Text classes for the digits.

 —
blockClassName string

Classes for each unit tile in layout="blocks".

 —
className string —