All components
Countdown Boxes
Data DisplayUnit boxes that flip in, then tick down to a target time.
Infinity
Days
NaN
Hours
NaN
Mins
NaN
Secs
Installation
Add it with the shadcn CLI:
$
pnpm dlx shadcn@latest add https://nawalkattel.com.np/r/countdown-boxes.jsonOr install manually
1. Install dependencies
pnpm add motion clsx tailwind-merge2. Copy the component source into
components/library/countdown-boxes.tsx
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| to | Date | string | number | - | Target time. Omit for a static display. |
| units | { value: string; label: string }[] | - | Fixed units, used when `to` is not given. |
| onComplete | () => void | - | Fires once when the countdown reaches zero. |
Accessibility
- Values and labels are real text, so a screen reader reads the countdown.
- Tabular numerals stop the boxes resizing as digits tick over.
- The live value resolves after mount, so server and client markup agree.
Dependencies
motionclsxtailwind-merge