Countdown

Days, hours, minutes and seconds left until a date, each rolling to its new value.

--Days

--Hours

--Minutes

--Seconds

Installation#

pnpm dlx shadcn@latest add @balick/countdown

Or pass the full URL: https://ui.balick.me/r/countdown.json

Usage#

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

export function Launch() {
  return <Countdown to="2026-12-01T09:00:00Z" onComplete={() => location.reload()} />
}

Props#

Prop	Type	Default	Description
`to` The moment the countdown reaches zero. Required.	`Date \| string \| number`	—	The moment the countdown reaches zero. Required.
`onComplete` Called once, when the countdown reaches zero.	`() => void`	—	Called once, when the countdown reaches zero.
`labels` Labels under each unit, e.g. for another language.	`{ days, hours, minutes, seconds }`	—	Labels under each unit, e.g. for another language.
`className` Size the numbers with a text size on the root (text-4xl by default).	`string`	—	Size the numbers with a text size on the root (text-4xl by default).