The most popular
component library
for Tailwind CSS

daisyUI adds component class names to Tailwind CSS
so you can make beautiful websites faster than ever.

don't re-invent
the wheel
every time yawing face emoji

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
sunglasses emoji

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

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.

No more ugly HTML

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

Click
<div class="w-80 rounded-2xl bg-gray-100">
  <div class="flex flex-col gap-2 p-8">
    <input placeholder="Email" class="w-full rounded-lg border border-gray-300 bg-white px-4 py-3 focus:outline-none focus:ring-2 focus:ring-gray-700 focus:ring-offset-2 focus:ring-offset-gray-100" />
    <label class="flex cursor-pointer items-center justify-between p-1">
      Accept terms of use
      <div class="relative inline-block">
        <input type="checkbox" class="peer h-6 w-12 cursor-pointer appearance-none rounded-full border border-gray-300 bg-white checked:border-gray-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-900 focus-visible:ring-offset-2" />
        <span class="pointer-events-none absolute start-1 top-1 block h-4 w-4 rounded-full bg-gray-400 transition-all duration-200 peer-checked:start-7 peer-checked:bg-gray-900"></span>
      </div>
    </label>
    <label class="flex cursor-pointer items-center justify-between p-1">
      Submit to newsletter
      <div class="relative inline-block">
        <input type="checkbox" class="peer h-6 w-12 cursor-pointer appearance-none rounded-full border border-gray-300 bg-white checked:border-gray-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-900 focus-visible:ring-offset-2" />
        <span class="pointer-events-none absolute start-1 top-1 block h-4 w-4 rounded-full bg-gray-400 transition-all duration-200 peer-checked:start-7 peer-checked:bg-gray-900"></span>
      </div>
    </label>
    <button class="inline-block cursor-pointer rounded-md bg-gray-700 px-4 py-3.5 text-center text-sm font-semibold uppercase text-white transition duration-200 ease-in-out hover:bg-gray-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-700 focus-visible:ring-offset-2 active:scale-95">Save</button>
  </div>
</div>

Fewer class names
Faster development
Smaller file size

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

CSS Class names

Tailwind only 107
Tailwind + daisyUI 14
86% fewer class names

HTML size

Tailwind only 1884 byte
Tailwind + daisyUI 471 byte
74% 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.

<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.

daisyUI vuedaisyUI reactdaisyUI sveltedaisyUI qwikdaisyUI remixdaisyUI nextjsdaisyUI solidjsdaisyUI preactdaisyUI phoenixdaisyUI nuxtjsdaisyUI astrodaisyUI angulardaisyUI vitedaisyUI laravel

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.

55 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

33,416
GitHub Stars
16,765,225
NPM Installs

Try daisyUI
on your favorite framework

daisyUI sveltedaisyUI vuedaisyUI reactdaisyUI solidjsdaisyUI preactdaisyUI angulardaisyUI qwikdaisyUI nextjsdaisyUI nuxtjsdaisyUI remixdaisyUI 11tydaisyUI vitedaisyUI astro
Or play with daisyUI on: CodePen Tailwind Play

Install daisyUI