Faster, cleaner, easier
Tailwind CSS development
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.
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.
// Styling a simple button
<button class="">
Tailwind Button
</button>No more ugly HTML
Write fewer class names
Use component class names
modify them using Tailwind CSS utilities.
<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>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.
CSS Class names
HTML 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.
<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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
61
Components
500+
utility classes
endless possibilities
Mix and match daisyUI class names to create unique web pages.
daisyUI is the most popular
component library for Tailwind CSS
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.
Free and open-source
Built by the community
daisyUI welcomes contributions from developers around the world
Try daisyUI
on your favorite framework
Install daisyUI
1. Install daisyUI as a Node package:
npm i -D daisyui@latestpnpm add -D daisyui@latestyarn add -D daisyui@latestbun add -D daisyui@latestdeno i -D npm:daisyui@latest2. Add daisyUI to app.css:
@import "tailwindcss";
@plugin "daisyui";