Skip to content

DaisyUI

UI & GraphicsUI FrameworkJavaScript
Official docs ↗GitHub ↗

What it is

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.

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.

Installation

npm install daisyui

Getting started

The smallest useful thing you can do with it, and what each part means.

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.

Advanced usage

Where the library earns its place over a simpler alternative.

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.

Errors and fixes

The failures you are most likely to hit, and what actually resolves them.

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.

Background

Why it exists, and what it was reacting to.

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.

Related libraries

Others in UI & Graphics for JavaScript.

← All JavaScript librariesJavaScript guide