DaisyUI

DaisyUI is a component library built on Tailwind CSS, offering many pre-designed components.

Features

🎨 pure CSS components：no JavaScript dependency
🎭 30+ themes: multiple built-in themes with dark mode support
🧩 semantic class names：easy to understand and use
🎯 Tailwind-compatible: integrates cleanly with Tailwind CSS
📦 lightweight：load on demand，small size

Installation

npm install -D daisyui@latest

Configuration tailwind.config.js：

module.exports = {
  plugins: [require('daisyui')],
  daisyui: {
    themes: ['light', 'dark', 'cupcake'],
  },
}

Common Components

Button

<button class="btn">Button</button>
<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-accent">Accent</button>
<button class="btn btn-ghost">Ghost</button>
<button class="btn btn-link">Link</button>

<!-- 大小 -->
<button class="btn btn-xs">Tiny</button>
<button class="btn btn-sm">Small</button>
<button class="btn btn-md">Normal</button>
<button class="btn btn-lg">Large</button>

<!-- State -->
<button class="btn btn-disabled">Disabled</button>
<button class="btn loading">Loading</button>

Card

<div class="card w-96 bg-base-100 shadow-xl">
  <figure>
    <img src="image.jpg" alt="Image" />
  </figure>
  <div class="card-body">
    <h2 class="card-title">Card Title</h2>
    <p>Card description text</p>
    <div class="card-actions justify-end">
      <button class="btn btn-primary">Buy Now</button>
    </div>
  </div>
</div>

<!-- 触发Button -->
<label for="my-modal" class="btn">Open Modal</label>

<!-- Modal -->
<input type="checkbox" id="my-modal" class="modal-toggle" />
<div class="modal">
  <div class="modal-box">
    <h3 class="font-bold text-lg">Modal Title</h3>
    <p class="py-4">Modal content here</p>
    <div class="modal-action">
      <label for="my-modal" class="btn">Close</label>
    </div>
  </div>
</div>

<div class="navbar bg-base-100">
  <div class="flex-1">
    <a class="btn btn-ghost text-xl">daisyUI</a>
  </div>
  <div class="flex-none">
    <ul class="menu menu-horizontal px-1">
      <li><a>Link</a></li>
      <li>
        <details>
          <summary>Parent</summary>
          <ul class="bg-base-100 rounded-t-none p-2">
            <li><a>Link 1</a></li>
            <li><a>Link 2</a></li>
          </ul>
        </details>
      </li>
    </ul>
  </div>
</div>

Form

<!-- Input -->
<input type="text" placeholder="Type here" class="input input-bordered w-full" />

<!-- Textarea -->
<textarea class="textarea textarea-bordered" placeholder="Bio"></textarea>

<!-- Checkbox -->
<input type="checkbox" class="checkbox" />

<!-- Radio -->
<input type="radio" name="radio-1" class="radio" />

<!-- Select -->
<select class="select select-bordered w-full">
  <option disabled selected>Pick one</option>
  <option>Option 1</option>
  <option>Option 2</option>
</select>

<!-- Toggle -->
<input type="checkbox" class="toggle" />

Alert

<div class="alert alert-info">
  <svg>...</svg>
  <span>Info message</span>
</div>

<div class="alert alert-success">Success</div>
<div class="alert alert-warning">Warning</div>
<div class="alert alert-error">Error</div>

Badge

<div class="badge">Default</div>
<div class="badge badge-primary">Primary</div>
<div class="badge badge-secondary">Secondary</div>
<div class="badge badge-accent">Accent</div>
<div class="badge badge-ghost">Ghost</div>

Theme Switching

Using an HTML attribute

<html data-theme="dark">

Switching with JavaScript

// 切换主题
document.documentElement.setAttribute('data-theme', 'dark');

// 保存到 localStorage
localStorage.setItem('theme', 'dark');

// 读取主题
const theme = localStorage.getItem('theme') || 'light';
document.documentElement.setAttribute('data-theme', theme);

Theme SwitchingComponent

<div class="dropdown">
  <label tabindex="0" class="btn m-1">Theme</label>
  <ul tabindex="0" class="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-52">
    <li><a data-set-theme="light">Light</a></li>
    <li><a data-set-theme="dark">Dark</a></li>
    <li><a data-set-theme="cupcake">Cupcake</a></li>
  </ul>
</div>

Custom Theme

// tailwind.config.js
module.exports = {
  daisyui: {
    themes: [
      {
        mytheme: {
          "primary": "#a991f7",
          "secondary": "#f6d860",
          "accent": "#37cdbe",
          "neutral": "#3d4451",
          "base-100": "#ffffff",
        },
      },
    ],
  },
}

Useful utility classes

<!-- Space -->
<div class="divider">OR</div>

<!-- 加载 -->
<span class="loading loading-spinner loading-lg"></span>

<!-- 头像 -->
<div class="avatar">
  <div class="w-24 rounded-full">
    <img src="avatar.jpg" />
  </div>
</div>

<!-- 面Package屑 -->
<div class="breadcrumbs text-sm">
  <ul>
    <li><a>Home</a></li>
    <li><a>Documents</a></li>
    <li>Add Document</li>
  </ul>
</div>

Layout Components

Drawer

<div class="drawer">
  <input id="my-drawer" type="checkbox" class="drawer-toggle" />
  <div class="drawer-content">
    <label for="my-drawer" class="btn btn-primary drawer-button">Open</label>
  </div>
  <div class="drawer-side">
    <label for="my-drawer" class="drawer-overlay"></label>
    <ul class="menu p-4 w-80 min-h-full bg-base-200">
      <li><a>Menu 1</a></li>
      <li><a>Menu 2</a></li>
    </ul>
  </div>
</div>

Best Practices

Combine with Tailwind: DaisyUI components work well with Tailwind utility classes.
Keep themes consistent across the whole project.
Use Tailwind responsive prefixes for responsive design.
Avoid unnecessary customization and start with presets.
Load on demand by configuring PurgeCSS to remove unused styles.

Backend

Frontend

Desktop

Algorithms

DaisyUI

DaisyUI

Features

Installation

Common Components

Button

Card

Navbar

Form

Alert

Badge

Theme Switching

Using an HTML attribute

Switching with JavaScript

Theme SwitchingComponent

Custom Theme

Useful utility classes

Layout Components

Drawer

Best Practices

References

​DaisyUI

​Features

​Installation

​Common Components

​Button

​Card

​Modal

​Navbar

​Form

​Alert

​Badge

​Theme Switching

​Using an HTML attribute

​Switching with JavaScript

​Theme SwitchingComponent

​Custom Theme

​Useful utility classes

​Layout Components

​Drawer

​Best Practices

​References

DaisyUI

Features

Installation

Common Components

Button

Card

Modal

Navbar

Form

Alert

Badge

Theme Switching

Using an HTML attribute

Switching with JavaScript

Theme SwitchingComponent

Custom Theme

Useful utility classes

Layout Components

Drawer

Best Practices

References