Page Inspect

daisyUI — Tailwind CSS Components ( version 5 update is here )

5.0.43

- daisyUI 5

- Changelog

- Version 4.x
- Version 3.x
- Version 2.x
- Version 1.x

- Roadmap

Search

Components

Template Store

- 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
- dim
- nord
- sunset
- caramellatte
- abyss
- silk

- Make your theme!

- EN English
- AR العربية
- BN বাংলা
- CA Català
- CS Čeština
- DE Deutsch
- ES Español
- FA فارسی
- FR Français
- HU Magyar
- ID Bahasa Indonesia
- IT Italiano
- JA 日本語
- KO 한국어
- MS Bahasa Melayu
- PL Polski
- PT Português
- RO Română
- RU Русский
- UK Українська
- VI Tiếng Việt
- ZH 简体中文
- ZH 繁體中文

npm i -D daisyui@latest

Watch
daisyUI 5.0 intro

# Faster, cleaner, easier
Tailwind CSS development

daisyUI is the Tailwind CSS plugin you will love!
It provides useful component class names
to help you write less code and build faster.

How to use?

## don't re-invent
the wheel
every time

In a Tailwind CSS project, you need to write utility class names for every element. Thousands of class names just to style the most basic elements.

## instead of writing
100 class names

For every element, every page, every project,
again and again…

## use semantic
class names

It's descriptive, faster, cleaner and easier to maintain.

Features Links Message

Faster development

Cleaner HTML

Customizable

Themeable

Pure CSS

Pure CSS.
No JS dependency

Works on all frameworks

## Design system

xs  sm  md  lg  xl

xs  sm  md  lg  xl

## Semantic colors

primary

secondary

accent

neutral

info

success

warning

error

// Styling a simple button
<button class="">
Tailwind Button
</button>

// Result:

Tailwind Button

Used by engineers at

Meta Research

Alibaba

Amazon

Adobe

Google Cloud

## Take Tailwind CSS
to the next level

daisyUI adds class names to Tailwind CSS
for all common UI components.
Class names like btn , card , toggle and many more.

This allows us to focus on important things
instead of styling basic elements for every project.

See All Components

## No more ugly HTML

Write fewer class names
Use component class names
modify them using Tailwind CSS utilities.

Click

Tailwind only

Tailwind + daisyUI

<div class="w-80 rounded-lg bg-zinc-50 text-zinc-800">
<div class="flex flex-col gap-3 p-8">
<input placeholder="Email" class="w-full rounded-sm border border-zinc-300 bg-white px-3 py-2 text-sm focus:ring-2 focus:ring-zinc-700 focus:ring-offset-2 focus:ring-offset-zinc-100 focus:outline-none focus-visible:border-zinc-900"/>
<label class="flex cursor-pointer items-center text-sm gap-1.5 text-zinc-500">
<div class="relative inline-block h-5">
<input type="checkbox" class="peer h-5 w-8 cursor-pointer appearance-none rounded-full border border-zinc-400 peer-checked:bg-white checked:border-zinc-900 focus-visible:ring-2 focus-visible:ring-zinc-400 checked:focus-visible:ring-zinc-900 focus-visible:ring-offset-2 focus-visible:outline-none"/>
<span class="pointer-events-none absolute start-0.75 top-0.75 block size-[0.875rem] rounded-full bg-zinc-400 transition-all duration-200 peer-checked:start-[0.9375rem] peer-checked:bg-zinc-900"></span>
</div>
Submit to newsletter
</label>
<label class="flex cursor-pointer items-center text-sm gap-1.5 text-zinc-500">
<div class="relative inline-block h-5">
<input type="checkbox" class="peer h-5 w-8 cursor-pointer appearance-none rounded-full border border-zinc-400 peer-checked:bg-white checked:border-zinc-900 focus-visible:ring-2 focus-visible:ring-zinc-400 checked:focus-visible:ring-zinc-900 focus-visible:ring-offset-2 focus-visible:outline-none"/>
<span class="pointer-events-none absolute start-0.75 top-0.75 block size-[0.875rem] rounded-full bg-zinc-400 transition-all duration-200 peer-checked:start-[0.9375rem] peer-checked:bg-zinc-900"></span>
</div>
Accept terms of use
</label>
<button class="inline-block cursor-pointer rounded-sm bg-zinc-900 px-4 py-2.5 text-center text-sm font-semibold text-white shadow-[0_.2rem_0.3rem_-.25rem_black] active:shadow-none transition duration-200 ease-in-out focus-visible:ring-2 focus-visible:ring-zinc-700 focus-visible:ring-offset-2 focus-visible:outline-none active:translate-y-[1px]" >Save</button>
</div>
</div>

\=

Submit to newsletter

Accept terms of use Save

## Fewer class names
Faster development
Smaller file size

With daisyUI, you write 88% fewer class names
And your HTML size will be about 79% smaller.

Get started

### CSS Class names

Tailwind only 114

Tailwind + daisyUI 14

88% fewer class names

### HTML size

Tailwind only 2110 byte

Tailwind + daisyUI 427 byte

79% smaller DOM size

## Highly customizable
Powered by Tailwind CSS utility classes

daisyUI is built on top of Tailwind CSS so you can customize everything using utility classes.

How to customize

<a class="btn btn-primary">Button</a>

↓

<a class="btn btn-primary rounded-full">Button</a>

## Pure CSS.
Framework agnostic.
Works everywhere.

daisyUI is a plugin for Tailwind CSS. It works on all JS frameworks and doesn't need a JS bundle file.

Install daisyUI as a dev dependency and use the class names just like any other Tailwind CSS class name.

How to use?

- Admin panel
- Dashboard
- Notifications
- Messages
- People
- Products 50

Neutral Primary Secondary Accent Info Success Warning Error

- Inbox 99+
- Updates NEW
- Stats

Unlimited themes

with zero effort

daisyUI adds a set of customizable color names to Tailwind CSS and these new colors use CSS variables for the values. Using daisyUI color names, you get Dark Mode and even more themes without adding a new class name.

See all themes



Semantic colors

primary

secondary

accent

neutral

primary content

secondary content

accent content

neutral content

base 100

base 200

base 300

base content

info

success

warning

error

info content

success content

warning content

error content

Learn more about colors

- Admin panel
- Dashboard
- Notifications
- Messages
- People
- Products 50

Neutral Primary Secondary Accent Info Success Warning Error

- Inbox 99+
- Updates NEW
- Stats

Unlimited themes

with zero effort

daisyUI adds a set of customizable color names to Tailwind CSS and these new colors use CSS variables for the values. Using daisyUI color names, you get Dark Mode and even more themes without adding a new class name.

See all themes



Semantic colors

primary

secondary

accent

neutral

primary content

secondary content

accent content

neutral content

base 100

base 200

base 300

base content

info

success

warning

error

info content

success content

warning content

error content

Learn more about colors

- Admin panel
- Dashboard
- Notifications
- Messages
- People
- Products 50

Neutral Primary Secondary Accent Info Success Warning Error

- Inbox 99+
- Updates NEW
- Stats

Unlimited themes

with zero effort

daisyUI adds a set of customizable color names to Tailwind CSS and these new colors use CSS variables for the values. Using daisyUI color names, you get Dark Mode and even more themes without adding a new class name.

See all themes



Semantic colors

primary

secondary

accent

neutral

primary content

secondary content

accent content

neutral content

base 100

base 200

base 300

base content

info

success

warning

error

info content

success content

warning content

error content

Learn more about colors

- Admin panel
- Dashboard
- Notifications
- Messages
- People
- Products 50

Neutral Primary Secondary Accent Info Success Warning Error

- Inbox 99+
- Updates NEW
- Stats

Unlimited themes

with zero effort

daisyUI adds a set of customizable color names to Tailwind CSS and these new colors use CSS variables for the values. Using daisyUI color names, you get Dark Mode and even more themes without adding a new class name.

See all themes



Semantic colors

primary

secondary

accent

neutral

primary content

secondary content

accent content

neutral content

base 100

base 200

base 300

base content

info

success

warning

error

info content

success content

warning content

error content

Learn more about colors

- Admin panel
- Dashboard
- Notifications
- Messages
- People
- Products 50

Neutral Primary Secondary Accent Info Success Warning Error

- Inbox 99+
- Updates NEW
- Stats

Unlimited themes

with zero effort

daisyUI adds a set of customizable color names to Tailwind CSS and these new colors use CSS variables for the values. Using daisyUI color names, you get Dark Mode and even more themes without adding a new class name.

See all themes



Semantic colors

primary

secondary

accent

neutral

primary content

secondary content

accent content

neutral content

base 100

base 200

base 300

base content

info

success

warning

error

info content

success content

warning content

error content

Learn more about colors

- Admin panel
- Dashboard
- Notifications
- Messages
- People
- Products 50

Neutral Primary Secondary Accent Info Success Warning Error

- Inbox 99+
- Updates NEW
- Stats

Unlimited themes

with zero effort

daisyUI adds a set of customizable color names to Tailwind CSS and these new colors use CSS variables for the values. Using daisyUI color names, you get Dark Mode and even more themes without adding a new class name.

See all themes



Semantic colors

primary

secondary

accent

neutral

primary content

secondary content

accent content

neutral content

base 100

base 200

base 300

base content

info

success

warning

error

info content

success content

warning content

error content

Learn more about colors

- Admin panel
- Dashboard
- Notifications
- Messages
- People
- Products 50

Neutral Primary Secondary Accent Info Success Warning Error

- Inbox 99+
- Updates NEW
- Stats

Unlimited themes

with zero effort

daisyUI adds a set of customizable color names to Tailwind CSS and these new colors use CSS variables for the values. Using daisyUI color names, you get Dark Mode and even more themes without adding a new class name.

See all themes



Semantic colors

primary

secondary

accent

neutral

primary content

secondary content

accent content

neutral content

base 100

base 200

base 300

base content

info

success

warning

error

info content

success content

warning content

error content

Learn more about colors

- Admin panel
- Dashboard
- Notifications
- Messages
- People
- Products 50

Neutral Primary Secondary Accent Info Success Warning Error

- Inbox 99+
- Updates NEW
- Stats

Unlimited themes

with zero effort

daisyUI adds a set of customizable color names to Tailwind CSS and these new colors use CSS variables for the values. Using daisyUI color names, you get Dark Mode and even more themes without adding a new class name.

See all themes



Semantic colors

primary

secondary

accent

neutral

primary content

secondary content

accent content

neutral content

base 100

base 200

base 300

base content

info

success

warning

error

info content

success content

warning content

error content

Learn more about colors

## Apply your own design decisions

Your website should be unique. Create a custom theme for yourself using daisyUI theme generator. The colors you pick will be applied to all daisyUI components.

Theme Generator Learn more about themes

## 61 Components
500+ utility classes
endless possibilities endless possibilities

Mix and match daisyUI class names to create unique web pages.

See All Components

## daisyUI is the most popular
component library for Tailwind CSS

GitHub Stars

open-source projects using daisyUI

NPM Installs

Featured in

Fireship.io

Syntax Podcast

FreeCodeCamp

Thinking Elixir Podcast

Coding Cat Podcast

Been using daisyUI for a while and I must say...such a fun addon for Tailwind CSS, well done 🔥

Dev Ed

Content Creator

DaisyUI just looks amazing.

Kelvin Htat

Solo founder

How much winning can one component library take?!?

htmx.org

high power tools for HTML

daisyUI is amazing and \*I use it for all my projects\*

Cyris

Software Engineer

daisyUI is such a \*time saver\*

Ollie The Dev

Amplify UI, texttodesign.ai

I've been \*enjoying daisyui\* since I discovered it very recently, great job!

Vincent Bergeron

Software Developer

Rails 8 + daisyUI = MVP Magic

Kaleb Lape

Rails developer

daisyUI is awesome!

borislav grigorov

Indiehacker

I was using bootstrap first than switched to tailwind but there's so many classes too much code, than i found daisyUI. if anyone coming from bootstrapcss background you will love daisyUI for sure. 🙌

Jagdish kashyap

Software developer

I used daisyUI theme generator's Halloween theme and tweaked it to what I want and now, I'm so proud of what I've got!

Ade

Software Engineer

I used daisyUI this week with Remix and am delighted by it so far.

Matt Ferrante

Developer

Can't state how much I love daisyUI ♥️

rootkid

Software Developer

daisyUI really makes it super easy to get a clean looking MVP up and out the door.

Josh Cirre

Entrepreneur

Writing technical blog posts and I just use daisyUI for styling and then I have a ton of free time 🌟

Lac Tran An

Software craftman

I Love daisyUI

Guillaume Meyer

Entrepreneur

Honestly, I spent like 20% of my time writing code and 80% of time playing with Tailwind CSS and daisyUI. Really love the daisyUI themes 😍

Jiří Kratochvíl

vuejs.berlin co-organizer

daisyUI is probably the \*best Tailwind Plugin I've ever used\*, I've been using it since 2023

Shaun Furtado

JS dev

The new daisyUI 5.0 is awesome! The UI components are smooth and has a lot of new goodies.

Ovi Stoica

Software Developer

daisyUI is the only way to use tailwind

Suspect

Dev

daisyUI is so good! I love how it sticks with the basic HTML components. Truly great.

Nico Devs

Software Engineer

Using daisyUI feels like using the old Bootstrap but with the additional power of Tailwind's customization.

Mazipan

Software developer

I found Tailwind CSS complicated, but daisyUI looks like something I can give a try.

Bonnie

Technical Writer

I \*absolutely love daisyUI\* and use it in all my projects.

Cam Pak

Developer

If you want to \*build beautiful apps in no time\* daisyUI is the way to go ✨ I've been using it for the past 6 months and can't imagine living without it...

Marc Lou

Solopreneur

\*daisyUI is underrated.\* The best mix of Bootstrap (semantic) + Tailwind (utility). Just pick your colors and go. Supports most common components. Now with Tailwind v4. Theme builder. Quick adjustment with Tailwind. \*CSS only and no JS. Zero dependencies.\* DHH's "No build" friendly.

Kenn Ejima

Co-Founder & CTO

I cannot thank you enough for daisyUI. It has completely taken over my UIs. It is a breeze to get consistent, great looking user interfaces and quickly!

jogi

Developer

I found daisyUI to be an amazing pair with htmx

Ryan Dsouza

DevOps enthusiast

If you want to create a quick MVP for your next project, I recommend daisyUI. It offers a simple and elegant design.✨

Jairon Landa

Software developer

It's great! Been using it in all my projects!

Sara Vieira

Developer at axo.dev

DaisyUI is really goated! I am a happy user for the past 5 years.

Nithur

Developer

daisyUI is a great project! Grabbed the file tree component, it works great and \*doesn't even use JS\* - it's just using summary and details elements, very neat!

Lachlan Miller

Vue.js team

We are using Go for the backend, daisyUI + Tailwind for styling, and HTMX for interactivity.

Jack Spirou

Founder

daisyUI is awesome!

Daniel Kelly

Teacher/Content Creator at vueschool.io

daisyUI has been my "go-to" for side projects and vibe coding for this past year

Joro Yordanov

Designer

I love daisyUI, It's by far \*my favorite CSS tool\* and what finally got me into Tailwind. I'm shipping great looking UIs thanks to daisyUI.

Alejandro Barrera Aponte

daisyUI is good, \*makes code much cleaner\* for often used sets of classes without massive amount's of extra css bloat.

Aaron Moy

Founder

daisyUI makes working with UI components \*so easy\*

Jason

Indie Game Dev

daisyUI is \*the goat\*

Dorian Develops

Self-Taught Programmer

daisyUI is a \*joy to use\* 🙏

Oli Nelson

Indie Software Dev

I'm glad I found daisyUI. daisyUI is built with Tailwind CSS which makes it perfect fit for me.

Rem Kim

Founder of resolveai.co

daisyUI 5 + Tailwind CSS 4 is just an amazing combo for fast and high-end results

Nacho Herrera

Developer

I recommend you to use daisyUI on top of Tailwind they work together and gives more possibilities and ease.

Christophe Anfry

Ex Google Workspace technical support

I'm a big fan of daisyUI

Dan Schoonmaker

Software engineer

We use daisyUI + Tailwind with our projects. It has been \*extremely helpful\* building websites fast and give us a red design line through several different projects.

TiiaAurora

Tech journalist

Been a big fan on daisyUI for 2 years, kudos to your great work! 👏👏

Kenn Ejima

Co-Founder & CTO

Why did it take me so long to pair Tailwind with daisyUI… \*Now I feel like a 10X developer\*.

Joel Pickin

Software developer

\*daisyUI saved me months of component design\*.

Erick Rodriguez

Software Engineer

daisyUI is what I use for everything now.

Pramod

Software developer

I used daisyUI, \*super happy with it!\*

Nick S.

SaaS builder

\*I'm enjoying daisyUI\*

Alexander Thomsen

Founder of moonbit.ai

I think daisyUI is very cool, it's \*easy to use\* and you can build a clean UI with it. 👍 😁

Nihad

Frontend Software Engineer

DaisyUI is pretty amazing

Shawn

Developer

With daisyUI I haven't written a single line of css, yet my div classes are pretty clean

Bogdan Chayka

Founder

If you use Tailwind and want prepackaged components then I wholeheartedly recommend daisyUI! An awesome set of defaults that's super configurable 🔥

Scott Spence

SvelteSociety London events organiser

Damn, daisyUI is NICE!

Dorian Develops

Indie hacker

Adding daisyUI to the front and adding new features to the products really affect all of our metrics.

Manuel Gracia

Developer

\*Love daisyUI\*, excited to use it again on my next job

Steve Williams

Applications developer

While I love the flexibility of Tailwind CSS, I always find myself configuring re-usable styles as I hammer out a visual concept. daisyUI made doing that a lot easier today.

Chris Tankersley

PHP Developer, Writer, Speaker, and Teacher

If you're a fan of Tailwind but hate writing 20+ class names to style a simple button or card, try daisyUI, it's really cool!

AbdulAzeez

Software Developer

I was already a fan of daisyUI because of their \*incredible components and theme system\* But did you know they also have entire templates 😍

Erwin

Founder of Tailscan

I like to use Tailwind+daisyUI to have a Bootstrap like experience.

Tiago Bastos

Software developer

daisyUI v5 is a \*game changer\*... It's never been this easy to customize components and theme in typical server rendered projects. 😍

iam\_bpn

Developer

Just revamped my personal website using daisyUI and I'm thrilled with the \*simplicity and cleanliness\* it brings!

Christian

Ruby on Rails Developer

Using a component library such as \*daisyUI is such a productivity hack\*. No going back from that.

Josef Büttgen

Developer

If you try daisyUI, there is no turning back... 😏

Marc Lou

Solopreneur

I would have never touched Tailwind CSS if it wasn't for daisyUI 🤗

lang

Software developer

I love daisyUI and we used it for a hackathon project last week

Loftwah

DevOps Engineer

daisyUI is \*so usefull\*. My clients love the look, it is so easy

Bailey Burnsed

Full Stack Dev

Found the power of tailwindcss and daisyUI these last few days. These makes front-end development so much \*faster and enjoyable\*.

Lourenço Matalonga

Developer, Indie Hacker

daisyUI is the missing part from Tailwind CSS which is the perfect choice for devs who need easy UI design

Mahdi M

Software developer

## Free and open-source
Built by the community

daisyUI welcomes contributions from developers around the world

Sponsors and backers

Become a sponsor

## Try daisyUI
on your favorite framework

See all examples

Or play with daisyUI on: CodePen Tailwind Play

## Install daisyUI

1\. Install daisyUI as a Node package:

NPM

npm i -D daisyui@latest

PNPM

pnpm add -D daisyui@latest

Yarn

yarn add -D daisyui@latest

Bun

bun add -D daisyui@latest

Deno

deno i -D npm:daisyui@latest

2\. Add daisyUI to app.css:

@import "tailwindcss";
@plugin "daisyui";

Install guide

Free Component library
For utility first CSS frameworks

daisyUI Logo and brand License FAQ Roadmap Changelog Contributing llms.txt

pages How to install How to use components How to customize How to use themes Color system Config Resources Blog Store daisyUI Figma Library

Frameworks Angular Astro Django Laravel Nextjs Nuxt Rails React Svelte Vue

Compare libraries MUI vs daisyUI shadcn/ui vs daisyUI Bootstrap vs daisyUI Flowbite vs daisyUI Radix vs daisyUI Bulma vs daisyUI NuxtUI vs daisyUI HeroUI vs daisyUI Preline UI vs daisyUI Chakra UI vs daisyUI

related projects Theme Change MaryUI (Laravel) Feliz.DaisyUI (F#) Phcurado (Phoenix) Laravel Starter Kit with daisyUI Tailscan extension

Created by

Pouya Saadeghi

Get the daisyUI updates and news

Subscribe

We don't share your email address with anyone

Please upgrade your browser

5.0.43

- daisyUI 5

- Changelog

- Version 4.x
- Version 3.x
- Version 2.x
- Version 1.x

- Roadmap

- Docs

- Introduction
- Install
- CDN

- Use
- Upgrade guide
- V5 release notes
- Code editor & LLM setup new

- Customize
- Config
- Colors
- Themes
- Base style
- Utilities & variables
- Layout & Typography
- Components

- ## Actions
- Button
- Dropdown
- Modal
- Swap
- Theme Controller
- ## Data display
- Accordion
- Avatar
- Badge
- Card
- Carousel
- Chat bubble
- Collapse
- Countdown
- Diff
- Kbd
- List new
- Stat
- Status new
- Table
- Timeline
- ## Navigation
- Breadcrumbs
- Dock
- Link
- Menu
- Navbar
- Pagination
- Steps
- Tab
- ## Feedback
- Alert
- Loading
- Progress
- Radial progress
- Skeleton
- Toast
- Tooltip
- ## Data input
- Calendar new
- Checkbox
- Fieldset new
- File Input
- Filter new
- Label new
- Radio
- Range
- Rating
- Select
- Input field
- Textarea
- Toggle
- Validator new
- ## Layout
- Divider
- Drawer
- Footer
- Hero
- Indicator
- Join (group items)
- Mask
- Stack
- ## Mockup
- Browser
- Code
- Phone
- Window
- Theme Generator new

- Store updated
- Blog
- Resources

- Playground
- GitHub
- Discord
- Support daisyUI
- T-shirts new
- llms.txt new