Daisyui

by bobmatnyc718070a7d622No license77 starsListed Oct 8, 2026Updated Oct 8, 2026Repository updated 2 months ago

Tailwind CSS component library providing semantic class names for 50+ components with built-in themes, dark mode, and customization for rapid UI development.

Instructions onlySoftware DevelopmentDesign & Creative
AI-generated overview

Reference guide for using the DaisyUI Tailwind CSS component library, covering components, theming, colors and framework integration.

What it does
This skill is a documentation-style reference for DaisyUI, a Tailwind CSS component library that provides semantic class names for 50+ components. It shows installation and configuration snippets, markup examples for buttons, cards, modals, forms, navigation, layout, data display and feedback components, plus theming, dark mode, custom themes, semantic colors and framework integration. It produces guidance and code examples rather than running any tooling itself.
When to use it
Use it when building a UI with Tailwind CSS and you want pre-styled components with semantic class names. It suits projects needing built-in themes, dark mode, or a consistent design system across React, Vue, Svelte or plain HTML. It is also useful for quick prototyping with ready-made components.
Requirements
No scripts are included; it is instructions only. Applying the examples assumes a project with Tailwind CSS and the daisyui package installed via npm, plus a tailwind.config.js file.

DaisyUI Component Library

Summary

DaisyUI is the most popular Tailwind CSS component library providing semantic class names for 50+ components with built-in themes, dark mode, and customization. Framework-agnostic and production-ready.

When to Use

  • Building UI with Tailwind CSS and need pre-styled components
  • Want semantic class names (btn, card) instead of utility-only approach
  • Need built-in theming system with 30+ themes and dark mode
  • Require consistent design system across React, Vue, Svelte, or vanilla HTML
  • Want to prototype quickly with ready-made components
  • Need accessible components following semantic HTML patterns

Quick Start

Installation

bash
npm install -D daisyui@latest

Configuration

Add to tailwind.config.js:

javascript
module.exports = {  plugins: [require("daisyui")],  daisyui: {    themes: ["light", "dark", "cupcake"], // Enable specific themes    darkTheme: "dark", // Default dark theme    base: true, // Base styles    styled: true, // Component styles    utils: true, // Utility classes  },}

Basic Usage

html
<!-- Button component --><button class="btn btn-primary">Primary Button</button>
<!-- Card component --><div class="card w-96 bg-base-100 shadow-xl">  <div class="card-body">    <h2 class="card-title">Card Title</h2>    <p>Card description goes here</p>    <div class="card-actions justify-end">      <button class="btn btn-primary">Action</button>    </div>  </div></div>
<!-- Modal component --><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</p>    <div class="modal-action">      <button class="btn">Close</button>    </div>  </div></dialog>

Core Components

Buttons

html
<!-- Variants --><button class="btn">Default</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>
<!-- Sizes --><button class="btn btn-lg">Large</button><button class="btn btn-md">Medium</button><button class="btn btn-sm">Small</button><button class="btn btn-xs">Tiny</button>
<!-- States --><button class="btn btn-active">Active</button><button class="btn btn-disabled">Disabled</button><button class="btn loading">Loading</button>
<!-- Shapes --><button class="btn btn-circle">C</button><button class="btn btn-square">S</button><button class="btn btn-wide">Wide</button><button class="btn btn-block">Block</button>
<!-- Outline --><button class="btn btn-outline btn-primary">Outline</button>

Cards

html
<!-- Basic card --><div class="card w-96 bg-base-100 shadow-xl">  <figure><img src="image.jpg" alt="Album"/></figure>  <div class="card-body">    <h2 class="card-title">Card Title</h2>    <p>Description text</p>    <div class="card-actions justify-end">      <button class="btn btn-primary">Buy Now</button>    </div>  </div></div>
<!-- Compact card --><div class="card card-compact w-96 bg-base-100 shadow-xl">  <div class="card-body">    <h2 class="card-title">Compact Card</h2>    <p>Reduced padding</p>  </div></div>
<!-- Card with badge --><div class="card w-96 bg-base-100 shadow-xl">  <div class="card-body">    <h2 class="card-title">      Title      <div class="badge badge-secondary">NEW</div>    </h2>    <p>Content</p>  </div></div>
<!-- Image overlay card --><div class="card card-compact w-96 image-full bg-base-100 shadow-xl">  <figure><img src="image.jpg" alt="Album"/></figure>  <div class="card-body">    <h2 class="card-title">Overlay Text</h2>    <p>Text appears on top of image</p>  </div></div>

Modals

html
<!-- Modal structure --><dialog id="my_modal_1" class="modal">  <div class="modal-box">    <h3 class="font-bold text-lg">Hello!</h3>    <p class="py-4">Press ESC key or click the button to close</p>    <div class="modal-action">      <form method="dialog">        <button class="btn">Close</button>      </form>    </div>  </div></dialog>
<!-- Open modal with JavaScript --><button onclick="my_modal_1.showModal()" class="btn">Open Modal</button>
<!-- Modal with backdrop --><dialog id="my_modal_2" class="modal">  <div class="modal-box">    <h3 class="font-bold text-lg">Modal with backdrop</h3>    <p class="py-4">Click outside to close</p>  </div>  <form method="dialog" class="modal-backdrop">    <button>close</button>  </form></dialog>
<!-- Responsive modal --><dialog id="my_modal_3" class="modal modal-bottom sm:modal-middle">  <div class="modal-box">    <h3 class="font-bold text-lg">Responsive</h3>    <p class="py-4">Bottom on mobile, middle on desktop</p>    <div class="modal-action">      <button class="btn">Close</button>    </div>  </div></dialog>

Forms

html
<!-- Input fields --><input type="text" placeholder="Default" class="input input-bordered w-full max-w-xs" /><input type="text" placeholder="Primary" class="input input-bordered input-primary w-full max-w-xs" /><input type="text" placeholder="Disabled" class="input input-bordered w-full max-w-xs" disabled />
<!-- Input sizes --><input type="text" class="input input-bordered input-lg" /><input type="text" class="input input-bordered input-md" /><input type="text" class="input input-bordered input-sm" /><input type="text" class="input input-bordered input-xs" />
<!-- Textarea --><textarea class="textarea textarea-bordered" placeholder="Bio"></textarea>
<!-- Select --><select class="select select-bordered w-full max-w-xs">  <option disabled selected>Pick one</option>  <option>Option 1</option>  <option>Option 2</option></select>
<!-- Checkbox --><input type="checkbox" class="checkbox" /><input type="checkbox" class="checkbox checkbox-primary" checked /><input type="checkbox" class="checkbox checkbox-secondary" checked />
<!-- Radio --><input type="radio" name="radio-1" class="radio" checked /><input type="radio" name="radio-1" class="radio radio-primary" />
<!-- Toggle --><input type="checkbox" class="toggle" checked /><input type="checkbox" class="toggle toggle-primary" checked /><input type="checkbox" class="toggle toggle-secondary" checked />
<!-- Range slider --><input type="range" min="0" max="100" value="50" class="range range-primary" />
<!-- File input --><input type="file" class="file-input file-input-bordered w-full max-w-xs" />
<!-- Form control with label --><div class="form-control w-full max-w-xs">  <label class="label">    <span class="label-text">Email</span>  </label>  <input type="text" placeholder="Type here" class="input input-bordered w-full max-w-xs" />  <label class="label">    <span class="label-text-alt">Helper text</span>  </label></div>

Navigation

html
<!-- Navbar --><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="p-2 bg-base-100">            <li><a>Submenu 1</a></li>            <li><a>Submenu 2</a></li>          </ul>        </details>      </li>    </ul>  </div></div>
<!-- Menu --><ul class="menu bg-base-200 w-56 rounded-box">  <li><a>Item 1</a></li>  <li><a>Item 2</a></li>  <li>    <details open>      <summary>Parent</summary>      <ul>        <li><a>Submenu 1</a></li>        <li><a>Submenu 2</a></li>      </ul>    </details>  </li></ul>
<!-- Breadcrumbs --><div class="text-sm breadcrumbs">  <ul>    <li><a>Home</a></li>    <li><a>Documents</a></li>    <li>Add Document</li>  </ul></div>
<!-- Tabs --><div class="tabs tabs-boxed">  <a class="tab">Tab 1</a>  <a class="tab tab-active">Tab 2</a>  <a class="tab">Tab 3</a></div>
<!-- Pagination --><div class="join">  <button class="join-item btn">«</button>  <button class="join-item btn">Page 1</button>  <button class="join-item btn btn-active">2</button>  <button class="join-item btn">3</button>  <button class="join-item btn">»</button></div>

Layout Components

html
<!-- Drawer (sidebar) --><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 drawer</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 text-base-content">      <li><a>Sidebar Item 1</a></li>      <li><a>Sidebar Item 2</a></li>    </ul>  </div></div>
<!-- Hero --><div class="hero min-h-screen bg-base-200">  <div class="hero-content text-center">    <div class="max-w-md">      <h1 class="text-5xl font-bold">Hello there</h1>      <p class="py-6">Provident cupiditate voluptatem et in.</p>      <button class="btn btn-primary">Get Started</button>    </div>  </div></div>
<!-- Footer --><footer class="footer p-10 bg-base-200 text-base-content">  <nav>    <h6 class="footer-title">Services</h6>    <a class="link link-hover">Branding</a>    <a class="link link-hover">Design</a>  </nav>  <nav>    <h6 class="footer-title">Company</h6>    <a class="link link-hover">About us</a>    <a class="link link-hover">Contact</a>  </nav></footer>
<!-- Stack (layered elements) --><div class="stack">  <div class="card shadow-md bg-primary text-primary-content">    <div class="card-body">A</div>  </div>  <div class="card shadow bg-primary text-primary-content">    <div class="card-body">B</div>  </div>  <div class="card shadow-sm bg-primary text-primary-content">    <div class="card-body">C</div>  </div></div>
<!-- Divider --><div class="flex flex-col w-full">  <div class="divider">OR</div></div>

Data Display

html
<!-- Table --><div class="overflow-x-auto">  <table class="table">    <thead>      <tr>        <th>Name</th>        <th>Job</th>        <th>Company</th>      </tr>    </thead>    <tbody>      <tr>        <td>Cy Ganderton</td>        <td>Quality Control Specialist</td>        <td>Littel, Schaden and Vandervort</td>      </tr>      <tr class="hover">        <td>Hart Hagerty</td>        <td>Desktop Support Technician</td>        <td>Zemlak, Daniel and Leannon</td>      </tr>    </tbody>  </table></div>
<!-- Table variants --><table class="table table-zebra"><!-- Striped rows --></table><table class="table table-pin-rows"><!-- Pin header --></table><table class="table table-pin-cols"><!-- Pin columns --></table>
<!-- 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><div class="badge badge-outline">outline</div>
<!-- Stat --><div class="stats shadow">  <div class="stat">    <div class="stat-title">Total Page Views</div>    <div class="stat-value">89,400</div>    <div class="stat-desc">21% more than last month</div>  </div></div>
<!-- Timeline --><ul class="timeline timeline-vertical">  <li>    <div class="timeline-start">1984</div>    <div class="timeline-middle">      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd" /></svg>    </div>    <div class="timeline-end timeline-box">First Macintosh computer</div>    <hr/>  </li>  <li>    <hr/>    <div class="timeline-start">1998</div>    <div class="timeline-middle">      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd" /></svg>    </div>    <div class="timeline-end timeline-box">iMac</div>    <hr/>  </li></ul>
<!-- Avatar --><div class="avatar">  <div class="w-24 rounded-full">    <img src="avatar.jpg" />  </div></div>
<!-- Avatar group --><div class="avatar-group -space-x-6 rtl:space-x-reverse">  <div class="avatar">    <div class="w-12">      <img src="avatar1.jpg" />    </div>  </div>  <div class="avatar">    <div class="w-12">      <img src="avatar2.jpg" />    </div>  </div></div>
<!-- Progress --><progress class="progress progress-primary w-56" value="70" max="100"></progress>
<!-- Radial progress --><div class="radial-progress" style="--value:70;">70%</div>

Feedback Components

html
<!-- Alert --><div class="alert">  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-info shrink-0 w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>  <span>Info alert</span></div>
<div class="alert alert-success">  <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>  <span>Success alert!</span></div>
<div class="alert alert-warning">  <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" /></svg>  <span>Warning alert!</span></div>
<div class="alert alert-error">  <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>  <span>Error alert!</span></div>
<!-- Toast --><div class="toast">  <div class="alert alert-info">    <span>New message arrived.</span>  </div></div>
<!-- Toast positions --><div class="toast toast-top toast-end">  <div class="alert alert-info">    <span>Top right</span>  </div></div>
<!-- Loading --><span class="loading loading-spinner loading-xs"></span><span class="loading loading-spinner loading-sm"></span><span class="loading loading-spinner loading-md"></span><span class="loading loading-spinner loading-lg"></span>
<!-- Loading variants --><span class="loading loading-dots"></span><span class="loading loading-ring"></span><span class="loading loading-ball"></span><span class="loading loading-bars"></span><span class="loading loading-infinity"></span>
<!-- Tooltip --><div class="tooltip" data-tip="hello">  <button class="btn">Hover me</button></div>
<!-- Tooltip positions --><div class="tooltip tooltip-right" data-tip="Right">  <button class="btn">Right</button></div>

Theming System

Built-in Themes

DaisyUI includes 30+ pre-built themes:

javascript
// tailwind.config.jsmodule.exports = {  daisyui: {    themes: [      "light",      // Default light theme      "dark",       // Default dark theme      "cupcake",    // Pink/pastel theme      "bumblebee",  // Yellow theme      "emerald",    // Green theme      "corporate",  // Professional blue      "synthwave",  // Retro neon      "retro",      // Vintage brown      "cyberpunk",  // Neon yellow/pink      "valentine",  // Pink/red romantic      "halloween",  // Orange/purple spooky      "garden",     // Green nature      "forest",     // Dark green      "aqua",       // Blue ocean      "lofi",       // Low contrast      "pastel",     // Soft colors      "fantasy",    // Purple/pink fantasy      "wireframe",  // Minimal black/white      "black",      // Dark minimal      "luxury",     // Gold/black elegant      "dracula",    // Purple dark theme      "cmyk",       // Print colors      "autumn",     // Orange/brown      "business",   // Professional dark      "acid",       // Neon green      "lemonade",   // Yellow/green fresh      "night",      // Deep blue dark      "coffee",     // Brown coffee shop      "winter",     // Blue/white cold      "dim",        // Low light dark      "nord",       // Nordic blue/gray      "sunset",     // Orange/purple gradient    ],  },}

Theme Switching

html
<!-- Set theme on HTML element --><html data-theme="cupcake">  <!-- Your app --></html>
<!-- JavaScript theme switcher --><script>  function setTheme(theme) {    document.documentElement.setAttribute('data-theme', theme);    localStorage.setItem('theme', theme);  }
  // Load saved theme  const savedTheme = localStorage.getItem('theme') || 'light';  setTheme(savedTheme);</script>
<!-- Theme switcher UI --><select class="select select-bordered" onchange="setTheme(this.value)">  <option value="light">Light</option>  <option value="dark">Dark</option>  <option value="cupcake">Cupcake</option>  <option value="synthwave">Synthwave</option></select>

Dark Mode

javascript
// Auto dark mode based on system preferencemodule.exports = {  daisyui: {    themes: ["light", "dark"],    darkTheme: "dark",  },}
html
<!-- Detect system preference --><script>  if (window.matchMedia('(prefers-color-scheme: dark)').matches) {    document.documentElement.setAttribute('data-theme', 'dark');  } else {    document.documentElement.setAttribute('data-theme', 'light');  }</script>

Custom Theme

javascript
// tailwind.config.jsmodule.exports = {  daisyui: {    themes: [      {        mytheme: {          "primary": "#a991f7",          "secondary": "#f6d860",          "accent": "#37cdbe",          "neutral": "#3d4451",          "base-100": "#ffffff",          "info": "#3abff8",          "success": "#36d399",          "warning": "#fbbd23",          "error": "#f87272",        },      },    ],  },}

Extending Existing Themes

javascript
module.exports = {  daisyui: {    themes: [      {        light: {          ...require("daisyui/src/theming/themes")["light"],          primary: "#0000ff",      // Override primary color          ".btn-twitter": {        // Custom component            "background-color": "#1da1f2",            "border-color": "#1da1f2",          },        },      },    ],  },}

CSS Variable Customization

css
/* Override theme variables */[data-theme="mytheme"] {  --rounded-box: 1rem;  --rounded-btn: 0.5rem;  --rounded-badge: 1.9rem;  --animation-btn: 0.25s;  --animation-input: 0.2s;  --btn-text-case: uppercase;  --btn-focus-scale: 0.95;  --border-btn: 1px;  --tab-border: 1px;  --tab-radius: 0.5rem;}

Color System

Semantic Colors

DaisyUI uses semantic color names that adapt to themes:

html
<!-- Background colors --><div class="bg-primary">Primary background</div><div class="bg-secondary">Secondary background</div><div class="bg-accent">Accent background</div><div class="bg-neutral">Neutral background</div><div class="bg-base-100">Base background (main)</div><div class="bg-base-200">Base background (lighter)</div><div class="bg-base-300">Base background (even lighter)</div><div class="bg-info">Info background</div><div class="bg-success">Success background</div><div class="bg-warning">Warning background</div><div class="bg-error">Error background</div>
<!-- Text colors --><p class="text-primary">Primary text</p><p class="text-primary-content">Text on primary background</p><p class="text-secondary">Secondary text</p><p class="text-secondary-content">Text on secondary background</p><p class="text-accent">Accent text</p><p class="text-accent-content">Text on accent background</p><p class="text-neutral">Neutral text</p><p class="text-neutral-content">Text on neutral background</p><p class="text-base-content">Base text color</p>
<!-- Border colors --><div class="border border-primary">Primary border</div><div class="border border-secondary">Secondary border</div>

Color Utilities

html
<!-- Glass effect (frosted glass) --><div class="glass">Glassmorphism effect</div>
<!-- Ghost variant (transparent) --><button class="btn btn-ghost">Ghost button</button>
<!-- Outline variant --><button class="btn btn-outline btn-primary">Outlined</button>

Framework Integration

React

jsx
import React from 'react';
// DaisyUI works with plain HTML classesfunction App() {  return (    <div className="card w-96 bg-base-100 shadow-xl">      <div className="card-body">        <h2 className="card-title">Card Title</h2>        <p>Card description</p>        <div className="card-actions justify-end">          <button className="btn btn-primary">Action</button>        </div>      </div>    </div>  );}
// Modal componentfunction Modal({ children, id }) {  return (    <dialog id={id} className="modal">      <div className="modal-box">        {children}        <div className="modal-action">          <form method="dialog">            <button className="btn">Close</button>          </form>        </div>      </div>    </dialog>  );}
// Usagefunction App() {  return (    <>      <button onClick={() => document.getElementById('my_modal').showModal()}              className="btn">        Open Modal      </button>      <Modal id="my_modal">        <h3 className="font-bold text-lg">Hello!</h3>        <p className="py-4">Modal content</p>      </Modal>    </>  );}

Vue

vue
<template>  <div class="card w-96 bg-base-100 shadow-xl">    <div class="card-body">      <h2 class="card-title">Card Title</h2>      <p>Card description</p>      <div class="card-actions justify-end">        <button class="btn btn-primary">Action</button>      </div>    </div>  </div></template>
<!-- Modal component --><template>  <dialog ref="modal" class="modal">    <div class="modal-box">      <slot></slot>      <div class="modal-action">        <button @click="close" class="btn">Close</button>      </div>    </div>  </dialog></template>
<script setup>import { ref } from 'vue';
const modal = ref(null);
function open() {  modal.value.showModal();}
function close() {  modal.value.close();}
defineExpose({ open, close });</script>

Svelte

svelte
<script>  let modal;
  function openModal() {    modal.showModal();  }</script>
<button on:click={openModal} class="btn btn-primary">  Open Modal</button>
<dialog bind:this={modal} class="modal">  <div class="modal-box">    <h3 class="font-bold text-lg">Hello!</h3>    <p class="py-4">Modal content</p>    <div class="modal-action">      <form method="dialog">        <button class="btn">Close</button>      </form>    </div>  </div></dialog>
<!-- Card component --><div class="card w-96 bg-base-100 shadow-xl">  <div class="card-body">    <h2 class="card-title">Card Title</h2>    <p>Card description</p>    <div class="card-actions justify-end">      <button class="btn btn-primary">Action</button>    </div>  </div></div>

Responsive Design

Responsive Utilities

html
<!-- Responsive modifiers (Tailwind breakpoints) --><button class="btn btn-sm md:btn-md lg:btn-lg">  Responsive size button</button>
<div class="drawer drawer-mobile">  <input type="checkbox" class="drawer-toggle" />  <div class="drawer-content">    <!-- Main content (sidebar always visible on desktop) -->  </div>  <div class="drawer-side">    <!-- Sidebar -->  </div></div>
<!-- Responsive modal position --><dialog class="modal modal-bottom sm:modal-middle">  <div class="modal-box">    <p>Bottom on mobile, centered on desktop</p>  </div></dialog>
<!-- Responsive navbar --><div class="navbar bg-base-100">  <div class="navbar-start">    <div class="dropdown">      <label tabindex="0" class="btn btn-ghost lg:hidden">        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h8m-8 6h16" /></svg>      </label>      <ul tabindex="0" class="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-base-100 rounded-box w-52">        <li><a>Item 1</a></li>        <li><a>Item 2</a></li>      </ul>    </div>  </div>  <div class="navbar-center hidden lg:flex">    <ul class="menu menu-horizontal px-1">      <li><a>Item 1</a></li>      <li><a>Item 2</a></li>    </ul>  </div></div>

Mobile-First Approach

html
<!-- Stack on mobile, grid on desktop --><div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">  <div class="card bg-base-100 shadow-xl">Card 1</div>  <div class="card bg-base-100 shadow-xl">Card 2</div>  <div class="card bg-base-100 shadow-xl">Card 3</div></div>
<!-- Hide on mobile --><div class="hidden md:block">Desktop only content</div>
<!-- Show only on mobile --><div class="block md:hidden">Mobile only content</div>

Advanced Configuration

Complete Configuration

javascript
// tailwind.config.jsmodule.exports = {  content: ["./src/**/*.{html,js,jsx,ts,tsx}"],  plugins: [require("daisyui")],  daisyui: {    themes: [      "light",      "dark",      {        mytheme: {          primary: "#570df8",          secondary: "#f000b8",          accent: "#37cdbe",          neutral: "#3d4451",          "base-100": "#ffffff",          info: "#3abff8",          success: "#36d399",          warning: "#fbbd23",          error: "#f87272",        },      },    ],    darkTheme: "dark",    base: true,    styled: true,    utils: true,    prefix: "",    logs: true,    themeRoot: ":root",  },}

Configuration Options

  • themes: Array of theme names or custom theme objects
  • darkTheme: Which theme to use for dark mode (default: "dark")
  • base: Apply base styles (default: true)
  • styled: Apply component styles (default: true)
  • utils: Apply utility classes (default: true)
  • prefix: Prefix for all daisyUI classes (default: "")
  • logs: Show info in terminal during build (default: true)
  • themeRoot: Root element for theme (default: ":root")

Disable Base Styles

javascript
// Only use components, not base stylesmodule.exports = {  daisyui: {    base: false,  // Don't apply base HTML styles    styled: true,    utils: true,  },}

Class Prefix

javascript
// Add prefix to avoid conflictsmodule.exports = {  daisyui: {    prefix: "daisy-",  },}
html
<!-- Now use daisy- prefix --><button class="daisy-btn daisy-btn-primary">Button</button>

Best Practices

Component Organization

jsx
// Create reusable component library// components/Button.jsxexport function Button({ variant = 'primary', size = 'md', children, ...props }) {  return (    <button      className={`btn btn-${variant} btn-${size}`}      {...props}    >      {children}    </button>  );}
// Usage<Button variant="primary" size="lg">Click me</Button>

Theme Management

javascript
// utils/theme.jsexport const THEMES = [  'light', 'dark', 'cupcake', 'bumblebee', 'emerald', 'corporate'];
export function getTheme() {  return localStorage.getItem('theme') || 'light';}
export function setTheme(theme) {  document.documentElement.setAttribute('data-theme', theme);  localStorage.setItem('theme', theme);}
export function toggleDarkMode() {  const current = getTheme();  const next = current === 'light' ? 'dark' : 'light';  setTheme(next);}

Accessibility

html
<!-- Use semantic HTML --><button class="btn" aria-label="Close dialog">  <svg><!-- icon --></svg></button>
<!-- Proper form labels --><div class="form-control">  <label class="label" for="email-input">    <span class="label-text">Email</span>  </label>  <input    id="email-input"    type="email"    class="input input-bordered"    aria-describedby="email-help"  />  <label class="label">    <span id="email-help" class="label-text-alt">We'll never share your email</span>  </label></div>
<!-- Keyboard navigation --><div role="tablist" class="tabs tabs-boxed">  <button role="tab" class="tab" aria-selected="true">Tab 1</button>  <button role="tab" class="tab" aria-selected="false">Tab 2</button></div>

Performance Optimization

javascript
// Only import themes you usemodule.exports = {  daisyui: {    themes: ["light", "dark"], // Only these 2 themes  },}
// Or use custom themes onlymodule.exports = {  daisyui: {    themes: [      {        light: { /* custom light */ },        dark: { /* custom dark */ },      },    ],  },}

Combining with Tailwind

html
<!-- DaisyUI components + Tailwind utilities --><button class="btn btn-primary rounded-full shadow-lg hover:shadow-xl transition-all">  Styled button</button>
<!-- Use Tailwind for layout, DaisyUI for components --><div class="container mx-auto px-4 py-8">  <div class="grid grid-cols-1 md:grid-cols-3 gap-6">    <div class="card bg-base-100 shadow-xl">Card 1</div>    <div class="card bg-base-100 shadow-xl">Card 2</div>    <div class="card bg-base-100 shadow-xl">Card 3</div>  </div></div>

Common Patterns

Loading States

jsx
function DataComponent() {  const [loading, setLoading] = useState(true);
  if (loading) {    return (      <div className="flex justify-center items-center min-h-screen">        <span className="loading loading-spinner loading-lg"></span>      </div>    );  }
  return <div>Data content</div>;}

Form Validation

jsx
function LoginForm() {  const [errors, setErrors] = useState({});
  return (    <form className="space-y-4">      <div className="form-control">        <label className="label">          <span className="label-text">Email</span>        </label>        <input          type="email"          className={`input input-bordered ${errors.email ? 'input-error' : ''}`}        />        {errors.email && (          <label className="label">            <span className="label-text-alt text-error">{errors.email}</span>          </label>        )}      </div>
      <button type="submit" className="btn btn-primary btn-block">        Login      </button>    </form>  );}

Dropdown Menu

html
<div class="dropdown dropdown-end">  <label tabindex="0" class="btn btn-ghost">    Click  </label>  <ul tabindex="0" class="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-52">    <li><a>Item 1</a></li>    <li><a>Item 2</a></li>  </ul></div>

Notification Toast

jsx
function showToast(message, type = 'info') {  const toast = document.createElement('div');  toast.className = 'toast toast-top toast-end';  toast.innerHTML = `    <div class="alert alert-${type}">      <span>${message}</span>    </div>  `;  document.body.appendChild(toast);
  setTimeout(() => toast.remove(), 3000);}
// UsageshowToast('Operation successful!', 'success');showToast('An error occurred', 'error');

Troubleshooting

Styles Not Applying

javascript
// Ensure DaisyUI is in Tailwind pluginsmodule.exports = {  plugins: [require("daisyui")],}
// Check content paths include your filesmodule.exports = {  content: [    "./src/**/*.{html,js,jsx,ts,tsx}",    "./pages/**/*.{html,js,jsx,ts,tsx}",  ],}

Theme Not Changing

html
<!-- Verify data-theme attribute is set --><html data-theme="dark">
<!-- Check JavaScript is running --><script>  console.log(document.documentElement.getAttribute('data-theme'));</script>

Modal Not Opening

javascript
// Use native dialog APIconst modal = document.getElementById('my_modal');modal.showModal(); // Opens modalmodal.close();     // Closes modal
// Or use checkbox for non-dialog implementation

Conflicts with Tailwind

javascript
// Use prefix to avoid conflictsmodule.exports = {  daisyui: {    prefix: "d-",  },}

Resources

Migration Guide

From Plain Tailwind

html
<!-- Before (Tailwind only) --><button class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">  Button</button>
<!-- After (DaisyUI) --><button class="btn btn-primary">  Button</button>

From Bootstrap

html
<!-- Bootstrap --><button class="btn btn-primary">Button</button><div class="card">  <div class="card-body">Content</div></div>
<!-- DaisyUI (very similar!) --><button class="btn btn-primary">Button</button><div class="card">  <div class="card-body">Content</div></div>

Version Updates

bash
# Check current versionnpm list daisyui
# Update to latestnpm install -D daisyui@latest
# Check changelog# https://github.com/saadeghi/daisyui/releases

Source and attribution

Source:bobmatnyc/claude-mpm-skillsintoolchains/ui/components/daisyuiat commit718070a

License: No license

Content belongs to its original authors. SourceWeft indexes it from a public repository.

Report or request removal

More from bobmatnyc/claude-mpm-skills

Wordpress Security Validation

bobmatnyc

Teaches security-first WordPress development patterns for nonces, sanitization, validation and output escaping.

Security77updated 2 months ago

Bug Fix

bobmatnyc

Guides a structured bug-fix workflow: reproduce, find root cause, fix, verify, add regression tests, and document the PR.

Software Development77updated 2 months ago

Threat Modeling

bobmatnyc

Runs a lightweight STRIDE threat modeling workshop and turns identified risks into mitigations, tickets, and tests.

Security77updated 2 months ago

Webapp Testing

bobmatnyc

Reference guide of Playwright patterns for writing web application tests, covering selectors, waits, assertions and debugging.

Software Development77updated 2 months ago

Opentelemetry

bobmatnyc

Reference guidance for instrumenting services with OpenTelemetry and exporting OTLP telemetry through a Collector.

DevOps & Cloud77updated 2 months ago

Skill Creator

bobmatnyc

Guides the creation, structuring, and packaging of modular agent skills using progressive disclosure.

AI & Agents77updated 2 months ago

More in Software Development

Playground

anthropics

Featured

Builds self-contained interactive HTML playgrounds with controls, live preview, and copyable prompt output.

Software Development37Kupdated today

M5 Onboard

anthropics

Featured

Provisions M5Stack ESP32 boards by detecting them on USB, flashing UIFlow 2.0 firmware, and installing a MicroPython app bundle.

Software Development37Kupdated today

Cardputer Buddy

anthropics

Featured

Guides iterating on a Cardputer-Adv MicroPython app bundle: adding apps, pushing files over USB-serial, tailing logs, and running REPL commands.

Software Development37Kupdated today

Web Design Guidelines

vercel-labs

Featured

Reviews UI code against Web Interface Guidelines fetched from a remote source and reports findings as file:line entries.

Software Development32Kupdated 5 weeks ago

Vercel React Native Skills

vercel-labs

Featured

React Native and Expo best-practice rules covering list performance, animation, navigation, UI patterns, state, and monorepo setup.

Software Development32Kupdated 5 weeks ago

Vercel React Best Practices

vercel-labs

Featured

Vercel's React and Next.js performance guidelines, organized as 70 rules for writing, reviewing, and refactoring code.

Software Development32Kupdated 5 weeks ago