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

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.

Faster development

Cleaner HTML

Customizable

Themeable

Pure CSS

Pure CSS.

No JS dependency

Works on all frameworks

Design system

checkbox-xs checkbox-sm checkbox-md checkbox-lg

radio-xs radio-sm radio-md radio-lg

Semantic colors

primary

secondary

accent

neutral

info

success

warning

error

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.