Countdown
Launch and sale countdown timer with flipping digits.
Countdown counts down to a launch, sale or event in day, hour, minute and second tiles; each digit flips down as it changes. The remaining time is also rendered in a <time> element, so crawlers and screen readers get a real date rather than a stream of numbers.
Preview
Installation
pnpm dlx shadcn@latest add https://ui.cuelark.com/r/countdown.jsonThe CLI also installs the Cuelark theme tokens, the GSAP motion layer. With the @cuelark namespace configured, use @cuelark/countdown.
Builds on: motion
Usage
import { Countdown } from "@/components/ui/countdown";
<Countdown to="2026-12-01T17:00:00Z" onComplete={openSale} />Motion
Each changing digit drops in with a short blur (GSAP).
Scale it with --cl-motion (0 off, 1 default, 1.5 expressive) on any ancestor. Reduced-motion preferences always switch it off.
API reference
Countdown
| Prop | Type | Default | Description |
|---|---|---|---|
| to | Date | string | number | — | Target moment. |
| units | ("days" | "hours" | "minutes" | "seconds")[] | all four | Units to show. |
| onComplete | () => void | — | Fires once at zero. |
| labels | boolean | true | Unit labels. |
Accessibility
- role=timer with a readable sentence; the visual tiles are aria-hidden so seconds are not announced every tick.
FAQ
Also searched as: react countdown timer component · countdown timer tailwind · launch countdown react · flip countdown · sale countdown timer