All components
Countdown Timer
Data DisplayCounts down from a duration and fires a callback at zero.
02:05
Installation
Add it with the shadcn CLI:
$
pnpm dlx shadcn@latest add https://nawalkattel.com.np/r/countdown-timer.jsonOr install manually
1. Install dependencies
pnpm add clsx tailwind-merge2. Copy the component source into
components/library/countdown-timer.tsx
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| seconds | number | 60 | Starting duration in seconds. |
| onComplete | () => void | - | Fires once the timer reaches zero. |
Accessibility
- Renders as text, so the remaining time is readable by assistive tech.
- Tabular numerals keep the width stable as digits change.
- Clears its timeout on unmount and between ticks.
Dependencies
clsxtailwind-merge