Countdown

Days, hours, minutes and seconds until a date, with each changing unit popping in. Comes boxed or compact.

Early bird pricing ends

Fraser Valley Business Summit, 15 January 2027.

Seat held for

Installation


pnpm dlx shadcn@latest add https://anotherui.dev/r/countdown.json

Usage

import { Countdown } from "@/components/ui/countdown"

<Countdown target="2027-01-15T09:00:00-08:00" />
 
<Countdown
  variant="compact"
  target={holdEndsAt}
  onComplete={() => releaseSeat()}
/>

Countdown never reads the clock while it renders. The first paint shows dashes, and the real time arrives in an effect. That keeps the page safe to prerender with Cache Components, and the server and browser always agree.

If you build the target from the current time, do it in an effect or an event handler, not during render.

Props

target. A Date, a date string or a timestamp.
variant. boxed (the default) puts each unit in its own card. compact is one inline line, like 4m 09s.
onComplete. Runs once when the count hits zero, or straight away if the target has already passed. The success sound only plays when it hits zero while the page is open.
hideDays, hideSeconds. Days hide on their own when there are none left. hideDays folds them into the hours.
completeLabel. Shown in place of the zeros once it is done.

useCountdown(target) is exported too, for a custom layout. It returns null until mounted.

Copy Button Data Grid

On This Page

Installation Usage Server rendering Props