---
title: Countdown
desc: Countdown gives you a transition effect when you change a number between 0 to 99.
source: https://raw.githubusercontent.com/saadeghi/daisyui/refs/heads/master/packages/daisyui/src/components/countdown.css
layout: components
classnames:
component:
- class: countdown
desc: Countdown wrapper
---
> :INFO:
>
> you need to change the span text and the `--value` CSS variable using JS. Value must be a number between 0 and 99.
### ~Countdown
{counter}
```html
59
```
```jsx
{/* For TSX uncomment the commented types below */}
59
```
### ~Large text
{counter}
```html
59
```
```jsx
{/* For TSX uncomment the commented types below */}
59
```
### ~Clock countdown
10h
24m
{counter}s
```html
10
h
24
m
59
s
```
```jsx
{/* For TSX uncomment the commented types below */}
10h
24m
59s
```
### ~Clock countdown with colons
10:
24:
{counter}
```html
10
:
24
:
59
```
```jsx
{/* For TSX uncomment the commented types below */}
10:
24:
59
```
### ~Large text with labels
15
days
10
hours
24
minutes
{counter}
sec
```html
15
days
10
hours
24
min
59
sec
```
```jsx
{/* For TSX uncomment the commented types below */}
15
days
10
hours
24
min
59
sec
```
### ~Large text with labels under
15
days
10
hours
24
min
{counter}
sec
```html
15
days
10
hours
24
min
59
sec
```
```jsx
{/* For TSX uncomment the commented types below */}
15
days
10
hours
24
min
59
sec
```
### ~In boxes
15
days
10
hours
24
min
{counter}
sec
```html
15
days
10
hours
24
min
59
sec
```
```jsx
{/* For TSX uncomment the commented types below */}
15
days
10
hours
24
min
59
sec
```