daisy
UI
3.8.2
Changelog
Version 2.x
Version 1.x
Search
Components
Blog
Theme
light
dark
cupcake
bumblebee
emerald
corporate
synthwave
retro
cyberpunk
valentine
halloween
garden
forest
aqua
lofi
pastel
fantasy
wireframe
black
luxury
dracula
cmyk
autumn
business
acid
lemonade
night
coffee
winter
Make your theme!
EN
English
ES
Español
FR
Français
ID
Indonesia
JA
日本語
KO
한국어
PT
Português
RU
Русский
UK
Українська
ZH
繁體中文
ZH
中文
Countdown
Countdown gives you a transition effect of changing numbers.
You need to change to `--value` CSS variable using JS. Value must be a number between 0 and 99.
Class name
Type
countdown
Component
Container element
#
Countdown
Preview
HTML
JSX
#
Large text
Preview
HTML
JSX
#
Clock countdown
Preview
HTML
JSX
h
m
s
#
Clock countdown with colons
Preview
HTML
JSX
:
:
#
Large text with labels
Preview
HTML
JSX
days
hours
minutes
sec
#
Large text with labels under
Preview
HTML
JSX
days
hours
min
sec
#
In boxes
Preview
HTML
JSX
days
hours
min
sec
Prev
Collapse
Next
Kbd
Do you have a question?
ask the community
Do you see a bug?
open an issue on GitHub
Do you like daisyUI?
tweet about it!
Support daisyUI's development:
Open Collective
Edit this page on GitHub
Sponsors
Never google
a command again
Become a sponsor
Sponsors
Never google
a command again
Become a sponsor