daisyUI
Tailwind CSS Components

npm i daisyui
Clean HTML with component classes
Customizable and themeable
Pure CSS, No dependencies
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

Your HTML doesn't need to be messy. daisyUI adds component classes to Tailwind CSS. Classes like btn, card, etc... No need to deal with hundreds of utility classes.

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-500 rounded-md
    cursor-pointer
    hover:bg-indigo-600">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-7"/>
    <span class="peer-checked:left-6
    peer-checked:bg-gray-900
    transition-all duration-500
    pointer-events-none w-5 h-5
    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 focus:bg-indigo-500 focus: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 focus:bg-indigo-500 focus: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 focus:bg-indigo-500 focus: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

using Tailwind's utility classes

daisyUI is based on Tailwind's utility classes and all components have low specificity so you can customize everything using 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 generic color names like bg-blue-500, we can use semantic role names like bg-primary or bg-success.
All colors are CSS variables so you easily add dark mode by changing a few CSS variables. Try daisyUI default themes or create your own theme in less than a minute!

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/tailwindcss@2.2/dist/tailwind.min.css" rel="stylesheet" type="text/css" />
  <link href="https://cdn.jsdelivr.net/npm/daisyui@1.16.0/dist/full.css" rel="stylesheet" type="text/css" />

Or try it online:

Install daisyUI

No dependencies, pure CSS. 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