daisyUI Component Library

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

When to Use This Skill

Activate when:

Building UI components with daisyUI
Choosing appropriate daisyUI components for design needs
Implementing responsive layouts with daisyUI
Configuring or customizing themes
Converting designs to daisyUI components
Troubleshooting daisyUI component styling

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")],
}

For detailed installation options and CDN usage, see references/installation.md.

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, consult the appropriate reference file.

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>

Theming

Using Built-in Themes

Set theme via HTML attribute:

<html data-theme="cupcake">

Available themes: light, dark, cupcake, bumblebee, emerald, corporate, synthwave, retro, cyberpunk, valentine, halloween, garden, forest, aqua, lofi, pastel, fantasy, wireframe, black, luxury, dracula, cmyk, autumn, business, acid, lemonade, night, coffee, winter, dim, nord, sunset

Theme Switching

<select class="select" data-choose-theme>
  <option value="light">Light</option>
  <option value="dark">Dark</option>
  <option value="cupcake">Cupcake</option>
</select>

For advanced theming and customization, see references/theming.md.

Responsive Design

daisyUI components work with Tailwind's responsive prefixes:

<button class="btn btn-sm md:btn-md lg:btn-lg">
  Responsive Button
</button>

<div class="card w-full md:w-96">
  <!-- Responsive card -->
</div>

When to Consult References

Installation details: Read references/installation.md
Complete component list: Read references/components.md
Theming and customization: Read references/theming.md
Layout patterns: Read references/layouts.md
Form components: Read references/forms.md
Common patterns: Read references/patterns.md

Combining with Tailwind Utilities

daisyUI semantic classes combine with Tailwind utilities:

<!-- daisyUI component + Tailwind utilities -->
<button class="btn btn-primary shadow-lg hover:shadow-xl transition-all">
  Enhanced Button
</button>

<div class="card bg-base-100 border-2 border-primary rounded-lg p-4">
  <!-- Card with custom styling -->
</div>

Key Principles

Semantic over utility: Use component classes for common patterns
Utility for customization: Apply Tailwind utilities for unique styling
Theme-aware: Components adapt to theme colors automatically
Accessible: Components follow accessibility best practices
Composable: Combine components to build complex UIs

Pro Tips

Use btn-{size} modifiers: btn-xs, btn-sm, btn-md, btn-lg
Add btn-outline for outlined button variants
Use badge component for status indicators
Combine modal with modal-backdrop for better UX
Use drawer for mobile navigation patterns
Leverage stats component for dashboard metrics
Use loading class on buttons for async operations

daisyui