UnoCSS + daisyUI

Actions

Drawer

Drawer responsive

Button

Buttons with brand colors

Buttons with state colors

Outline buttons

Button sizes

Dropdown

open or close

Modal

Swap

Data display

Alert

✅ Your purchase has been confirmed!

Badge

default
neutral
primary
secondary
accent
ghost

Badge Outline

default
neutral
primary
secondary
accent
ghost

Card

Shoes

Shoes!

If a dog chews shoes whose shoes does he choose?

Carousel

Burger
Burger
Burger
Burger
Burger
Burger
Burger

Accordion

Click to open this one and close others

hello

Click to open this one and close others

hello

Click to open this one and close others

hello

Collapse

Focus me to see content

tabindex="0" attribute is necessary to make the div focusable

Focus me to see content

tabindex="0" attribute is necessary to make the div focusable

Custom color

Focus me to see content

tabindex="0" attribute is necessary to make the div focusable

Click me to show/hide content

hello

Countdown

days
hours
min
sec

Chat with image, header and footer

Obi-Wan Kenobi
You were the Chosen One!
Delivered
Anakin
I hate you!
Seen at 12:46

Chat with colors

What kind of nonsense is this
Put me on the Council and not make me a Master!??
That's never been done in the history of the Jedi. It's insulting!
Calm down, Anakin.
You have been given a great honor.
To be on the Council at your age.
It's never happened before.

Kbd

⌘ ⌥ ⇧ ⌃

Progress

Data Input

Checkbox

Text input

Radio

Layout

Mask

Navigation

Breadcrumbs

Link

I'm a simple link

Menu

Navbar

daisyUI

Pagination

Steps

Tab

Tab 1 Tab 2 Tab 3

Mockup

Code

npm i unocss-preset-daisy
installing...
Done!

Phone

Hi.

Window

Hello!
Hello!

Congratulations random Internet user!

You've been selected for a chance to get one year of subscription to use Wikipedia for free!