Countdown
Countdown displays an animated number that counts down to zero.
Installation
npx jsx-daisyui add countdownSimple
countdown-simple
59
Clock
countdown-clock
1:30:0
Timer
countdown-timer
Timer Boxed
countdown-timer-boxed
Ecommerce
countdown-ecommerce
Props
Countdown.Value
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | - | The number to display. |
digits | 2 | 3 | - | Minimum digits to display (pads with leading zeros). |
aria-label | string | - | Accessible label for the countdown value. |
Countdown.Clock
| Prop | Type | Default | Description |
|---|---|---|---|
hours | number | 0 | Hours value. |
minutes | number | 0 | Minutes value. |
seconds | number | 0 | Seconds value. |
colons | boolean | false | Uses colons (10:24:59) instead of h/m/s suffixes. |
size | string | 'text-2xl' | Tailwind text size class. |
className | string | - | Custom CSS class. |
Countdown.Timer
| Prop | Type | Default | Description |
|---|---|---|---|
days | number | - | Days value (hides if omitted). |
hours | number | - | Hours value (hides if omitted). |
minutes | number | - | Minutes value (hides if omitted). |
seconds | number | - | Seconds value (hides if omitted). |
boxed | boolean | false | Wraps each unit in a styled background box. |
size | string | 'text-5xl' | Tailwind text size class. |
className | string | - | Custom CSS class. |
useCountdown
| Prop | Type | Default | Description |
|---|---|---|---|
initial | number | - | Starting value. Wraps back to this value after reaching zero. |
interval | number | 1000 | Tick interval in milliseconds. |