Official daisyUI Figma Library is now available for designers!

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

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>

// Result:

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

→ ↓

Accept terms of use

Submit to newsletter

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.

Get started

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.

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?

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