daisyui

daisyUI Component Library

Use this skill when building user interfaces with daisyUI and Tailwind CSS, implementing UI components, or configuring themes.

What is daisyUI?

daisyUI is a Tailwind CSS component library providing:

• Semantic component classes - High-level abstractions of Tailwind utilities
• 33+ built-in themes - Light, dark, and creative theme variants
• Framework-agnostic - Works with any HTML/CSS project
• Utility-first compatible - Combine components with Tailwind utilities

Installation

Add daisyUI to your project:

npm install -D daisyui@latest

Configure tailwind.config.js:

module.exports = {
  plugins: [require("daisyui")],
}

Component Categories

daisyUI provides components across these categories:

• Actions: Buttons, dropdowns, modals, swap
• Data Display: Cards, badges, tables, carousels, stats
• Data Input: Input, textarea, select, checkbox, radio, toggle
• Navigation: Navbar, menu, tabs, breadcrumbs, pagination
• Feedback: Alert, progress, loading, toast, tooltip
• Layout: Drawer, footer, hero, stack, divider

For component-specific guidance, see references/components.md.

Quick Usage

Basic 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>

Card Component

<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">Action</button>
    </div>
  </div>
</div>

Modal

<button class="btn" onclick="my_modal.showModal()">Open Modal</button>

<dialog id="my_modal" 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">
      <form method="dialog">
        <button class="btn">Close</button>
      </form>
    </div>
  </div>
</dialog>