> ## Documentation Index
> Fetch the complete documentation index at: https://base.bangwu.me/llms.txt
> Use this file to discover all available pages before exploring further.

# DaisyUI

> DaisyUI is a Tailwind CSS component library with pre-designed buttons, cards, modals, and navbars, covering installation, themes, and examples.

# 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

```bash theme={"theme":{"light":"github-light","dark":"github-dark"}}
npm install -D daisyui@latest
```

Configuration `tailwind.config.js`：

```javascript theme={"theme":{"light":"github-light","dark":"github-dark"}}
module.exports = {
  plugins: [require('daisyui')],
  daisyui: {
    themes: ['light', 'dark', 'cupcake'],
  },
}
```

## Common Components

### Button

```html theme={"theme":{"light":"github-light","dark":"github-dark"}}
<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

```html theme={"theme":{"light":"github-light","dark":"github-dark"}}
<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>
```

### Modal

```html theme={"theme":{"light":"github-light","dark":"github-dark"}}
<!-- 触发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>
```

### Navbar

```html theme={"theme":{"light":"github-light","dark":"github-dark"}}
<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

```html theme={"theme":{"light":"github-light","dark":"github-dark"}}
<!-- 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

```html theme={"theme":{"light":"github-light","dark":"github-dark"}}
<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

```html theme={"theme":{"light":"github-light","dark":"github-dark"}}
<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 theme={"theme":{"light":"github-light","dark":"github-dark"}}
<html data-theme="dark">
```

### Switching with JavaScript

```javascript theme={"theme":{"light":"github-light","dark":"github-dark"}}
// 切换主题
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

```html theme={"theme":{"light":"github-light","dark":"github-dark"}}
<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

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

## Useful utility classes

```html theme={"theme":{"light":"github-light","dark":"github-dark"}}
<!-- 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

```html theme={"theme":{"light":"github-light","dark":"github-dark"}}
<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

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

## References

* [DaisyUI website](https://daisyui.com/)
* [Componentdocumentation](https://daisyui.com/components/)
* [Theme list](https://daisyui.com/docs/themes/)
* [GitHub repository](https://github.com/saadeghi/daisyui)