daisyUI

The most popular, free and open-source
Tailwind CSS component library

A plugin for Tailwind CSS
Faster development
Cleaner HTML
Customizable and themeable
Pure CSS. Works on all frameworks
npm i daisyui
Superpower settings
Enable your favorite superpowers. Terms and conditions apply
Card Component

Use card component to easily show blog posts, products, features, items and more.

Beatrice Thurman
220 Followers
Audience Report

4,600

Page views

Downloading...

Clean HTML

with component classes

Don't reinvent the wheel!
daisyUI adds classes to Tailwind CSS for all common UI components. Classes like btn, card, etc. This allows us to focus on important things instead of making basic elements for every project.

Creating a button
using only utility classes vs using daisyUI component classes

<a class="inline-block px-4 py-3
    text-sm font-semibold text-center
    text-white uppercase transition
    duration-200 ease-in-out bg-indigo-600 
    rounded-md cursor-pointer
    hover:bg-indigo-700">Button</a>
vs
<a class="btn btn-primary">Button</a>

Creating a toggle
using only utility classes vs using daisyUI component classes

<div class="relative">
    <input type="checkbox" class="peer
    appearance-none cursor-pointer
    border border-gray-300 rounded-full
    checked:border-gray-900 w-12 h-6"/>
    <span class="peer-checked:left-7
    peer-checked:bg-gray-900
    transition-all duration-200
    pointer-events-none w-4 h-4
    block absolute top-1 left-1
    rounded-full bg-gray-300"></span>
  </div>
vs
<input type="checkbox" class="toggle"/>

Creating a menu component
using only utility classes vs using daisyUI component classes

<ul class="py-3 bg-gray-100 rounded-xl">
    <li>
      <span class="block px-5 py-1 text-xs text-gray-400 font-bold">Menu Title</span>
    </li>
    <li><a class="block px-5 py-3 rounded-lg text-gray-900 hover:bg-gray-200 active:bg-indigo-600 active:text-white outline-none cursor-pointer">First Menu Item</a></li>
    <li><a class="block px-5 py-3 rounded-lg text-gray-900 hover:bg-gray-200 active:bg-indigo-600 active:text-white outline-none cursor-pointer">Second Menu Item</a></li>
    <li><a class="block px-5 py-3 rounded-lg text-gray-900 hover:bg-gray-200 active:bg-indigo-600 active:text-white outline-none cursor-pointer">Third Menu Item</a></li>
  </ul>
vs
<ul class="menu p-3 bg-base-200 rounded-xl">
    <li class="menu-title">
      <span>Menu Title</span>
    </li>
    <li><a>First Menu Item</a></li>
    <li><a>Second Menu Item</a></li>
    <li><a>Third Menu Item</a></li>
  </ul>

Highly customizable

Powered by Tailwind CSS utility classes

daisyUI components have low CSS specificity so you can customize everything using Tailwind CSS utility classes.
You can even use @apply to add your custom styles to components or you can change colors and other design decisions using CSS variables.

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

Powerful theming

Apply your own design decisions

daisyUI adds a set of semantic color names to Tailwind. So instead of using constant color names like bg-blue-500, we can use semantic names like bg-primary or bg-success.
All colors are CSS variables so you can easily change the theme of your entire app without having to edit your HTML. Read more about themes

Luxury Theme

Cupcake Theme

Cyberpunk Theme

Read more about themes

Try it online

Use daisyUI file from CDN


  <link href="https://cdn.jsdelivr.net/npm/daisyui@2.24.0/dist/full.css" rel="stylesheet" type="text/css" />
  <script src="https://cdn.tailwindcss.com"></script>

Or try it online:

Install daisyUI

Pure CSS. Works on all frameworks. daisyUI can be used as a Tailwind CSS plugin or as an independent CSS library

1. Install daisyUI as a Node package:

npm i daisyui

2. Add daisyUI to Tailwind CSS as a plugin:

// tailwind.config.js
  module.exports = {
    plugins: [
      require('daisyui'),
    ],
  }
Install guide