DaisyUI is a component library that adds beautiful, accessible UI components to Tailwind CSS, enabling rapid development of modern web interfaces with semantic class names.

DaisyUI is a component library that brings beautiful, accessible UI components to Tailwind CSS. It provides semantic class names for common UI patterns, enabling rapid development of modern web interfaces while maintaining the utility-first approach of Tailwind CSS.

🎯 Core Philosophy

Semantic Classes

  • Component-based class names instead of utilities
  • Consistent naming conventions
  • Intuitive API for rapid development
  • Maintainable and readable code

Tailwind Integration

  • Pure Tailwind CSS under the hood
  • No JavaScript dependencies
  • Customizable through Tailwind configuration
  • Theme-aware components

Accessibility First

  • WCAG compliant components
  • Keyboard navigation support
  • Screen reader compatible
  • Focus management built-in

🚀 Component Categories

Layout Components

html



  

    
  







  

  

    
Card Title

    
Card content goes here.

Form Components

html

Button Components

html
html



  

    

      
      
    

    DaisyUI

🛠️ Advanced Features

html







  

    
Hello!

    
This is a modal dialog.

Data Display

html



  

    
      

        Name
        Job
        Favorite Color
      

    
    
      

        Cy Ganderton
        Quality Control Specialist
        Blue
      

    
  







  

    

      
    

    
Total Page Views

    
89,400

    
21% more than last month

Feedback Components

html



  
  Success! Task completed.






  
  Loading...

🎨 Theming System

Built-in Themes

javascript
// tailwind.config.js
module.exports = {
  plugins: [require('daisyui')],
  daisyui: {
    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',
    ],
  },
};

Custom Themes

javascript
// tailwind.config.js
module.exports = {
  plugins: [require('daisyui')],
  daisyui: {
    themes: [
      {
        mytheme: {
          primary: '#1e40af',
          secondary: '#7c3aed',
          accent: '#ea580c',
          neutral: '#1f2937',
          'base-100': '#ffffff',
          info: '#3b82f6',
          success: '#10b981',
          warning: '#f59e0b',
          error: '#ef4444',
        },
      },
    ],
  },
};

Theme Switching

html

🔧 Configuration

Tailwind Config

javascript
// tailwind.config.js
module.exports = {
  content: ['./src/**/*.{js,ts,jsx,tsx,html}'],
  theme: {
    extend: {},
  },
  plugins: [require('daisyui')],
  daisyui: {
    styled: true,
    themes: true,
    base: true,
    utils: true,
    logs: true,
    rtl: false,
    prefix: '',
    darkTheme: 'dark',
  },
};

CSS Imports

css
/* main.css */
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

/* Optional: Import DaisyUI base styles */
@import 'daisyui/dist/full.css';

📱 Responsive Design

Breakpoint Classes

html


Visible on mobile only






  
Item 1

  
Item 2

  
Item 3






Responsive Heading

Mobile-First Components

html

🎯 Best Practices

Component Composition

html



  

    

    

      
Hero Title

      
Hero description text.

Customization

html

Accessibility

html

🚀 Getting Started

Installation

bash
# Install DaisyUI
npm install -D daisyui@latest

# Or with Tailwind CSS
npm install -D tailwindcss daisyui@latest

Basic Setup

javascript
// tailwind.config.js
module.exports = {
  content: ['./src/**/*.{js,ts,jsx,tsx,html}'],
  theme: {
    extend: {},
  },
  plugins: [require('daisyui')],
};

HTML Template

html


  
    
    
    DaisyUI App
    
  
  
    

      DaisyUI

🔮 Advanced Usage

Custom Components

javascript
// Create custom component classes
// tailwind.config.js
module.exports = {
  plugins: [require('daisyui')],
  daisyui: {
    styled: true,
    themes: true,
    base: true,
    utils: true,
    logs: true,
    rtl: false,
    prefix: 'daisy-',
  },
};

Plugin Development

javascript
// daisyui plugin
const plugin = require('tailwindcss/plugin');

module.exports = plugin(function ({ addComponents, theme }) {
  addComponents({
    '.btn-custom': {
      '@apply btn btn-primary rounded-full px-8 py-3 text-lg font-semibold': {},
      '&:hover': {
        '@apply btn-secondary': {},
      },
    },
  });
});

📊 Performance & Bundle Size

Tree Shaking

  • Only includes used components
  • Minimal CSS output
  • Optimized for production builds
  • No JavaScript runtime overhead

Bundle Analysis

bash
# Analyze bundle size
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

# Purge unused CSS
module.exports = {
  content: ["./src/**/*.{html,js}"],
  plugins: [require("daisyui")],
}

🌟 Community & Ecosystem

Themes & Extensions

  • Community themes on daisyui.com/themes
  • Custom themes generator
  • Theme marketplace for sharing
  • Plugin ecosystem growing

Integration Examples

  • React with Tailwind CSS
  • Vue.js with Vite
  • Next.js with App Router
  • Svelte with SvelteKit
  • Astro static site generation

Learning Resources

  • Official documentation with examples
  • Component playground for experimentation
  • Theme customizer for visual design
  • Community Discord for support

Website: daisyui.com GitHub: saadeghi/daisyui Documentation: daisyui.com/docs Themes: daisyui.com/themes

Visit Tool GitHub

Join the Conversation

Comments section coming soon...