daisyUI

Overview

daisyUI is the most widely adopted open-source component plugin for Tailwind CSS, boasting over 42k GitHub stars. Instead of writing verbose utility classes like bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded, daisyUI introduces clean, semantic component classes like btn btn-primary.

Because it is 100% pure CSS, it operates with zero JavaScript runtime overhead and works seamlessly across React, Vue, Svelte, Astro, and plain HTML.

Key Features

• 🌿 Clean Semantic Class Names: Replaces dozens of verbose Tailwind utility strings with concise semantic classes (card, btn, modal, drawer).
• ⚡️ Zero JS Runtime Overhead: 100% pure CSS. Highly optimized build sizes and maximum browser performance.
• 🎨 30+ Built-in Color Themes: Switch between Synthwave, Cyberpunk, Forest, Cupcake, and Dark mode via a single HTML attribute (data-theme).
• 🌐 Framework Agnostic: Works out-of-the-box with React, Vue, Svelte, Solid, Astro, Next.js, and static sites.

Installation & Quick Start

npm i -D daisyui@latest

Configure your tailwind.config.js:

module.exports = {
  plugins: [require("daisyui")],
}

Basic Usage Example

<div class="card w-96 bg-base-100 shadow-xl">
  <div class="card-body">
    <h2 class="card-title">Pure CSS Card</h2>
    <p>Semantic class names with zero JavaScript runtime overhead.</p>
    <div class="card-actions justify-end">
      <button class="btn btn-primary">Action</button>
    </div>
  </div>
</div>

When to Choose

• Ideal For: Rapid prototyping, multi-framework projects, static sites, and developers who love Tailwind CSS but dislike writing endless class strings.
• Alternatives: If you need complex headless React accessibility logic (like keyboard focus trapping in nested modals), consider Radix UI or shadcn/ui.