daisyUI: Write 88% Less Code and Build Beautiful UIs Faster

The Tailwind CSS Verbosity Problem

If you've worked with Tailwind CSS, you know the pain: beautiful utility-first styling that sometimes requires writing dozens of class names for a single button. While Tailwind's approach is powerful, it can lead to verbose HTML and repetitive patterns across your codebase.

// A simple button with Tailwind CSS

<button className="inline-flex items-center justify-center rounded-md 
  text-sm font-medium ring-offset-background transition-colors 
  focus-visible:outline-none focus-visible:ring-2 
  focus-visible:ring-ring focus-visible:ring-offset-2 
  disabled:pointer-events-none disabled:opacity-50 
  bg-primary text-primary-foreground hover:bg-primary/90 
  h-10 px-4 py-2">
  Click me
</button>

Enter daisyUI — a Tailwind CSS plugin that provides semantic component class names, reducing your code by up to 88% while maintaining full Tailwind compatibility.

What is daisyUI?

daisyUI is a component library plugin for Tailwind CSS that adds semantic class names for common UI components. Instead of writing utility classes repeatedly, you use descriptive component names like btn, card, modal, and navbar.

88% Fewer Classes

Write dramatically less code with semantic component names instead of utility classes.

79% Smaller HTML

Reduce your HTML file size significantly with cleaner, more maintainable markup.

Pure CSS

Zero JavaScript dependencies. Works with any framework or vanilla HTML.

Installation

Getting started with daisyUI is straightforward. It works as a Tailwind CSS plugin and is compatible with Tailwind CSS 4.

Step 1: Install daisyUI

npm i -D daisyui@latest

Step 2: Add to your CSS

In your app.css or main CSS file:

@import "tailwindcss";
@plugin "daisyui";

Step 3: Start Using Components

That's it! You can now use daisyUI component classes:

<button className="btn btn-primary">Click me</button>

Before & After: The daisyUI Difference

Let's see the dramatic difference daisyUI makes in real-world examples.

Example 1: Button Component

Tailwind CSS Only (114 classes)

<button className="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 h-10 px-4 py-2">
  Submit
</button>

With daisyUI (14 classes)

<button className="btn btn-primary">
  Submit
</button>

Example 2: Card Component

Tailwind CSS Only

<div className="rounded-lg border bg-card text-card-foreground shadow-sm">
  <div className="flex flex-col space-y-1.5 p-6">
    <h3 className="text-2xl font-semibold leading-none tracking-tight">
      Card Title
    </h3>
    <p className="text-sm text-muted-foreground">
      Card description
    </p>
  </div>
  <div className="p-6 pt-0">
    Card content goes here
  </div>
</div>

With daisyUI

<div className="card bg-base-100 shadow-xl">
  <div className="card-body">
    <h2 className="card-title">Card Title</h2>
    <p>Card description</p>
    <p>Card content goes here</p>
  </div>
</div>

Component Showcase

daisyUI provides 50+ components out of the box. Here are some of the most commonly used ones:

Actions

btn - Buttons with multiple variants
dropdown - Dropdown menus
modal - Modal dialogs
swap - Animated icon swaps

Data Display

card - Content cards
badge - Status badges
table - Data tables
avatar - User avatars

Navigation

navbar - Navigation bars
tabs - Tab navigation
breadcrumbs - Breadcrumb trails
menu - Menu lists

Form Controls

input - Text inputs
checkbox - Checkboxes
toggle - Toggle switches
select - Select dropdowns

Powerful Theming System

One of daisyUI's most powerful features is its built-in theming system. It comes with 30+ pre-built themes and supports unlimited custom themes.

Semantic Color System

daisyUI uses semantic color names that automatically adapt to your theme:

primary

secondary

accent

neutral

Using Themes

Apply themes using the data-theme attribute:

<html data-theme="light">
  <!-- Your app with light theme -->
</html>

<html data-theme="dark">
  <!-- Your app with dark theme -->
</html>

<html data-theme="cupcake">
  <!-- Your app with cupcake theme -->
</html>

Interactive Theme Generator

daisyUI provides a powerful online theme generator that lets you create custom themes visually without writing any CSS. Customize colors, border radius, effects, and component sizes with real-time preview.

Key Features

🎨 Color Customization

Customize all semantic colors: base, primary, secondary, accent, neutral, info, success, warning, and error. Each color automatically generates appropriate foreground colors for optimal contrast.

📐 Border Radius Control

Adjust border radius for different component types: boxes (cards, modals), fields (buttons, inputs), and selectors (checkboxes, toggles). Create sharp, rounded, or pill-shaped designs.

✨ Visual Effects

Add depth with 3D effects on fields and selectors, or apply noise patterns for texture. These effects add visual interest while maintaining accessibility.

📏 Size Customization

Control component sizes (xs, sm, md, lg, xl) for fields and selectors. Set base sizes and adjust border widths to match your design system perfectly.

How to Use the Theme Generator

Visit the Theme Generator

Go to daisyui.com/theme-generator to access the interactive tool.

Customize Your Theme

Adjust colors, radius, effects, and sizes using the visual controls. See your changes in real-time with the live component preview.

Export Your Theme

Once satisfied, export the generated CSS and add it to your project. The theme generator provides ready-to-use CSS variables that work seamlessly with daisyUI.

Apply to Your App

Add the theme to your Tailwind config and use it with the data-theme attribute. Your custom theme is now ready to use across your entire application.

Example: Custom Theme CSS

[data-theme="mytheme"] {
  --primary: #570df8;
  --primary-content: #e0d2fe;
  --secondary: #f000b8;
  --secondary-content: #ffd8f4;
  --accent: #37cdbe;
  --accent-content: #002b3d;
  --neutral: #3d4451;
  --neutral-content: #d7dde4;
  --base-100: #ffffff;
  --base-200: #f9fafb;
  --base-300: #d1d5db;
  --base-content: #1f2937;
  --info: #3abff8;
  --success: #36d399;
  --warning: #fbbd23;
  --error: #f87272;
  --rounded-box: 1rem;
  --rounded-btn: 0.5rem;
  --rounded-badge: 1.9rem;
}

Try It Yourself

The theme generator includes a live preview with dozens of components, so you can see exactly how your theme looks before implementing it. It's the fastest way to create a unique design system.

Open Theme Generator

Real-World Use Cases

1. Rapid Prototyping

Build functional prototypes in minutes instead of hours. daisyUI's pre-built components let you focus on functionality rather than styling.

<div className="navbar bg-base-100">
  <div className="flex-1">
    <a className="btn btn-ghost text-xl">MyApp</a>
  </div>
  <div className="flex-none">
    <button className="btn btn-square btn-ghost">
      <svg>...</svg>
    </button>
  </div>
</div>

2. Design Systems

Create consistent design systems across large teams. daisyUI's semantic naming ensures everyone uses the same component patterns.

// Everyone uses the same button variants
<button className="btn btn-primary">Primary Action</button>
<button className="btn btn-secondary">Secondary Action</button>
<button className="btn btn-ghost">Ghost Action</button>

3. Multi-Theme Applications

Build apps with multiple themes (light, dark, custom) without writing theme-specific CSS. daisyUI handles it all with CSS variables.

// Same component, different themes
<div data-theme="light">
  <button className="btn btn-primary">Light Theme</button>
</div>
<div data-theme="dark">
  <button className="btn btn-primary">Dark Theme</button>
</div>

Customization & Flexibility

daisyUI doesn't lock you in. You can still use all Tailwind CSS utility classes to customize components:

// Combine daisyUI components with Tailwind utilities
<button className="btn btn-primary rounded-full shadow-lg hover:scale-105 transition-transform">
  Custom Styled Button
</button>

<div className="card bg-base-100 shadow-xl hover:shadow-2xl transition-shadow">
  <div className="card-body">
    <h2 className="card-title text-2xl font-bold bg-gradient-to-r from-primary to-accent bg-clip-text text-transparent">
      Gradient Title
    </h2>
  </div>
</div>

Best Practices

✓

Use Semantic Component Names

Prefer btn btn-primary over recreating button styles with utilities.

✓

Leverage the Theme System

Use semantic colors like bg-primary instead of hardcoded colors for better theme support.

✓

Combine with Tailwind Utilities

Don't be afraid to mix daisyUI components with Tailwind utilities for custom styling.

✓

Start with Pre-built Themes

Explore the 30+ built-in themes before creating custom ones to save time.

Conclusion

daisyUI transforms Tailwind CSS development by providing semantic component classes that dramatically reduce code verbosity while maintaining full flexibility. With 88% fewer class names, 79% smaller HTML, and a powerful theming system, it's the perfect tool for rapid prototyping, design systems, and production applications.

Whether you're building a quick prototype or a large-scale application, daisyUI accelerates your development workflow without sacrificing customization or performance. Best of all, it's pure CSS with zero JavaScript dependencies, making it framework-agnostic and incredibly lightweight.

Ready to Get Started?

Install daisyUI today and experience the joy of writing less code while building beautiful UIs faster.

View Documentation Explore Components