DaisyUI

Language: JavaScript

UI Framework

DaisyUI was created to complement Tailwind CSS by providing pre-built, customizable components that follow Tailwind’s utility-first approach. It emphasizes rapid development while maintaining accessibility and flexibility for developers.

DaisyUI is a plugin for Tailwind CSS that provides a set of accessible, responsive, and themeable UI components. It extends Tailwind with ready-made components like buttons, forms, cards, modals, and more.

Installation

npm: npm install daisyui

yarn: yarn add daisyui

manual: Add DaisyUI as a plugin in your Tailwind CSS configuration.

Usage

DaisyUI components are styled using Tailwind classes and can be customized via themes. Components include buttons, inputs, modals, alerts, navigation bars, and more. You can also define custom themes or use built-in themes.

Button component

<button class='btn btn-primary'>Click Me</button>

Creates a primary-styled button using DaisyUI classes.

Input component

<input type='text' placeholder='Enter text' class='input input-bordered' />

Creates a styled input field with borders and placeholder text.

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 content goes here.</p>
    <div class='card-actions justify-end'>
      <button class='btn btn-primary'>Action</button>
    </div>
  </div>
</div>

Displays a card component with title, content, and an action button.

Modal component

<input type='checkbox' id='my-modal' class='modal-toggle' />
<div class='modal'>
  <div class='modal-box'>
    <h3 class='font-bold text-lg'>Modal Title</h3>
    <p>Modal content here.</p>
    <div class='modal-action'>
      <label for='my-modal' class='btn'>Close</label>
    </div>
  </div>
</div>

Implements a modal dialog using DaisyUI’s modal classes and a hidden checkbox to toggle visibility.

Alert component

<div class='alert alert-success'>
  <div>
    <span>Success! Operation completed.</span>
  </div>
</div>

Displays a success alert message with DaisyUI styling.

Error Handling

Styles not applied: Ensure Tailwind CSS and DaisyUI plugin are correctly configured in `tailwind.config.js`.

Modal or component not showing: Verify that toggle elements (like checkbox for modal) have matching IDs and classes.

Theme customization not applied: Check that DaisyUI themes are correctly defined in Tailwind configuration under `daisyui.themes`.

Best Practices

Use DaisyUI in combination with Tailwind’s utility classes for consistent styling.

Leverage DaisyUI themes to maintain a consistent color palette.

Import only the components you need to keep bundle size minimal.

Use responsive and state classes to adapt components to different screen sizes.

Customize component classes to extend functionality while retaining default styling.

Official Docs Github