Stat

Stat is used to show numbers and data in a box.

Class name
Type
statsComponent Container of multiple stat items
statComponent One stat item
stat-titleComponent Title text
stat-valueComponent Value text
stat-descComponent Description text
stat-figureComponent For icon, image, etc
stat-actionsComponent For buttons, input, etc
stats-horizontal
Responsive
Shows items horizontally (default)
stats-vertical
Responsive
Shows items vertically
# Stat
Total Page Views
89,400
21% more than last month
# Stat with icons or image
Total Likes
25.6K
21% more than last month
Page Views
2.6M
21% more than last month
Tailwind CSS stat example component
86%
Tasks done
31 tasks remaining
# Stat
Downloads
31K
Jan 1st - Feb 1st
New Users
4,200
↗︎ 400 (22%)
New Registers
1,200
↘︎ 90 (14%)
# Centered items
Downloads
31K
From January 1st to February 1st
Users
4,200
↗︎ 40 (2%)
New Registers
1,200
↘︎ 90 (14%)
# Vertical
Downloads
31K
Jan 1st - Feb 1st
New Users
4,200
↗︎ 400 (22%)
New Registers
1,200
↘︎ 90 (14%)
# Responsive (vertical on small screen, horizontal on large screen)
Downloads
31K
Jan 1st - Feb 1st
New Users
4,200
↗︎ 400 (22%)
New Registers
1,200
↘︎ 90 (14%)
# With custom colors and button
Account balance
$89,400
Current balance
$89,400
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
daisyUI store

Official daisyUI
Figma Library

Available on daisyUI store

More details