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 npm install -D daisyui@latest

Configuration

Add to tailwind.config.js:

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

Card Title

Card description goes here

Core Components Buttons

Cards

Card Title

Description text

Compact Card

Reduced padding

Title
NEW

Content

Overlay Text

Text appears on top of image

Modals

Forms

Email Helper text

Navigation

Home
Documents
Add Document

Tab 1 Tab 2 Tab 3

Layout Components

Open drawer

Hello there

Provident cupiditate voluptatem et in.

Data Display

Name	Job	Company
Cy Ganderton	Quality Control Specialist	Littel, Schaden and Vandervort
Hart Hagerty	Desktop Support Technician	Zemlak, Daniel and Leannon

default

primary

secondary

accent

ghost

outline

Total Page Views

89,400

21% more than last month

1984

First Macintosh computer
1998

iMac

70%

Feedback Components

Info alert

Success alert!

Warning alert!

Error alert!

New message arrived.

Top right

Theming System Built-in Themes

DaisyUI includes 30+ pre-built themes:

// tailwind.config.js module.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

Dark Mode // Auto dark mode based on system preference module.exports = { daisyui: { themes: ["light", "dark"], darkTheme: "dark", }, }

Custom Theme // tailwind.config.js module.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 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 / 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:

Primary background

Secondary background

Accent background

Neutral background

Base background (main)

Base background (lighter)

Base background (even lighter)

Info background

Success background

Warning background

Error background

Primary text

Text on primary background

Secondary text

Text on secondary background

Accent text

Text on accent background

Neutral text

Text on neutral background

Base text color

Primary border

Secondary border

Color Utilities

Glassmorphism effect

Framework Integration React import React from 'react';

// DaisyUI works with plain HTML classes function App() { return (

Card Title

Card description

); }

// Modal component function Modal({ children, id }) { return (

); }

// Usage function App() { return ( <>

Hello!

Modal content

</> ); }

Vue

Svelte

Card Title

Card description

Responsive Design Responsive Utilities

Mobile-First Approach

Card 1

Card 2

Card 3

Desktop only content

Mobile only content

Advanced Configuration Complete Configuration // tailwind.config.js module.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 // Only use components, not base styles module.exports = { daisyui: { base: false, // Don't apply base HTML styles styled: true, utils: true, }, }

Class Prefix // Add prefix to avoid conflicts module.exports = { daisyui: { prefix: "daisy-", }, }

Best Practices Component Organization // Create reusable component library // components/Button.jsx export function Button({ variant = 'primary', size = 'md', children, ...props }) { return ( ); }

// Usage

Theme Management // utils/theme.js export 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

Email We'll never share your email

Performance Optimization // Only import themes you use module.exports = { daisyui: { themes: ["light", "dark"], // Only these 2 themes }, }

// Or use custom themes only module.exports = { daisyui: { themes: [ { light: { / custom light / }, dark: { / custom dark / }, }, ], }, }

Combining with Tailwind

Card 1

Card 2

Card 3

Common Patterns Loading States function DataComponent() { const [loading, setLoading] = useState(true);

if (loading) { return (

); }

return

Data content

; }

Form Validation function LoginForm() { const [errors, setErrors] = useState({});

return (

Email input input-bordered ${errors.email ? 'input-error' : ''}} /> {errors.email && ( {errors.email} )}

  <button type="submit" className="btn btn-primary btn-block">
    Login
  </button>
</form>

); }

Dropdown Menu

Notification Toast 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); }

// Usage showToast('Operation successful!', 'success'); showToast('An error occurred', 'error');

Troubleshooting Styles Not Applying // Ensure DaisyUI is in Tailwind plugins module.exports = { plugins: [require("daisyui")], }

// Check content paths include your files module.exports = { content: [ "./src//*.{html,js,jsx,ts,tsx}", "./pages//*.{html,js,jsx,ts,tsx}", ], }

Theme Not Changing

Modal Not Opening // Use native dialog API const modal = document.getElementById('my_modal'); modal.showModal(); // Opens modal modal.close(); // Closes modal // Or use checkbox for non-dialog implementation Conflicts with Tailwind // Use prefix to avoid conflicts module.exports = { daisyui: { prefix: "d-", }, } Resources Official Documentation: https://daisyui.com GitHub Repository: https://github.com/saadeghi/daisyui Component Explorer: https://daisyui.com/components/ Theme Generator: https://daisyui.com/theme-generator/ Community Themes: https://github.com/saadeghi/daisyui/discussions NPM Package: https://www.npmjs.com/package/daisyui Tailwind CSS Docs: https://tailwindcss.com Migration Guide From Plain Tailwind From Bootstrap

Content

Version Updates # Check current version npm list daisyui # Update to latest npm install -D daisyui@latest # Check changelog # https://github.com/saadeghi/daisyui/releases

安装

Card Title

Card Title

Compact Card

Title NEW

Overlay Text

Hello there

Card Title

Hello!

Card Title

Card Title

Title
NEW