Countdown

A launch countdown with rolling digits that morphs into a live state at zero.

$npx shadcn@latest add @silicon-ui/countdown

feedbacknew

Installation

$npx shadcn@latest add @silicon-ui/countdown

Install the dependencies.
$npm install motion
Copy these files into your project. Shared files are skipped if you already have them.
- components/silicon-ui/countdown/countdown.tsx
- components/silicon-ui/countdown/countdown.module.css
Install the foundation once per app for the design and motion tokens: $npx shadcn@latest add @silicon-ui/silicon-foundation

Source codetsx

import { Countdown } from "@/components/silicon-ui/countdown/countdown";

Prop	Type	Default
`target*` The moment to count down to. A number is epoch milliseconds, a Date is used as is, and an ISO string with `Z` or an offset such as `2026-10-06T10:00:00-07:00` is exact. A string without an offset is wall time in `timeZone`, or UTC when no zone is given, so the result never depends on the visitor's own time zone.	`Date \| number \| string`	—
`timeZone` IANA zone for a target string without an offset, such as "America/Los_Angeles". Daylight saving is resolved for the target date.	`string`	—
`units` Units to show, largest first. The largest unit absorbs the rest, so hours can pass 24 when days are left out.	`CountdownUnit[]`	`DEFAULT_UNITS`
`variant` Large digits with unit labels, or one compact line for banners and table cells.	`"large" \| "compact"`	`"large"`
`completeLabel` Shown once the target passes. The digits morph into it.	`ReactNode`	`"Live now"`
`onComplete` Fires once, the moment the countdown reaches zero while mounted. It fires on time even when the tab is hidden.	`() => void`	—
`label` Accessible name, such as "Keynote starts in".	`string`	`"Time remaining"`
`clock` Clock source in epoch milliseconds. Pass a server-synced clock when the visitor's device time cannot be trusted.	`() => number`	`systemClock`
`ref`	`Ref<HTMLDivElement>`	—
`className`	`string`	—