# DaisyUI: Complete Getting Started Guide

> Learn how to install and use DaisyUI with Tailwind CSS. This guide covers installation, themes, components, customization, and best practices for building beautiful UIs faster.

Source: https://designrevision.com/blog/daisyui-tutorial

---

DaisyUI transforms how you build interfaces with Tailwind CSS. Instead of composing dozens of utility classes for every button, card, or modal, you use semantic class names like `btn`, `card`, and `modal`. The result: cleaner HTML, faster development, and consistent design.

This guide covers everything you need to start building with DaisyUI in 2026. We'll walk through installation, theming, core components, and customization patterns that work in production.

**Target audience:** Frontend developers familiar with Tailwind CSS who want to build UIs faster without sacrificing control.

## Key Takeaways

> If you remember nothing else:
> - **DaisyUI is a Tailwind CSS plugin** that adds component classes like `btn`, `card`, `modal` on top of utility classes
> - **32 built-in themes** let you change your entire app's look with one attribute
> - **Zero JavaScript required** for most components. Add interactivity with your framework of choice
> - **Fully customizable.** Override any component with Tailwind utilities or CSS variables
> - **Production-ready.** Accessible, semantic HTML with proper ARIA attributes

## Table of Contents

1. [What is DaisyUI?](#what-is-daisyui)
2. [Installation](#installation)
3. [Configuration](#configuration)
4. [Working with Themes](#working-with-themes)
5. [Core Components](#core-components)
6. [Customization Patterns](#customization-patterns)
7. [DaisyUI vs Alternatives](#daisyui-vs-alternatives)
8. [Best Practices](#best-practices)

## What is DaisyUI?

DaisyUI is a component library built as a Tailwind CSS plugin. It provides pre-styled, semantic class names for common UI elements while maintaining full compatibility with Tailwind's utility-first approach.

**Current version:** DaisyUI 5 (compatible with Tailwind CSS 4)

### The Problem DaisyUI Solves

Building a button in pure Tailwind CSS looks like this:

```html
<button class="inline-flex items-center justify-center rounded-md bg-indigo-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
  Click me
</button>
```

With DaisyUI, it becomes:

```html
<button class="btn btn-primary">Click me</button>
```

Both produce the same result. DaisyUI abstracts the utility classes into semantic component classes while letting you add Tailwind utilities for customization.

### Key Features

| Feature | Description |
|---------|-------------|
| **Semantic classes** | Use `btn`, `card`, `modal` instead of utility chains |
| **Modifier system** | Add variants with `btn-primary`, `btn-lg`, `btn-outline` |
| **32 themes** | Switch entire color schemes with one attribute |
| **Zero dependencies** | Pure CSS, no JavaScript runtime required |
| **Accessible** | Semantic HTML with ARIA attributes built in |
| **Tiny footprint** | ~28KB after purging unused styles |

## Installation

DaisyUI supports two installation methods: npm for build-time integration or CDN for quick prototyping.

### Method 1: npm (Recommended)

Install DaisyUI as a dev dependency:

```bash
npm install -D daisyui@latest
```

Add DaisyUI to your Tailwind configuration:

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

### Method 2: CDN (Quick Start)

For prototyping without a build step, add these to your HTML head:

```html
<link href="https://cdn.jsdelivr.net/npm/daisyui@5/dist/full.min.css" rel="stylesheet" />
<script src="https://cdn.tailwindcss.com"></script>
```

The CDN method works for prototypes but lacks tree-shaking. Use npm for production to minimize bundle size.

### Framework-Specific Setup

DaisyUI works with any framework that supports Tailwind CSS:

**Next.js / React:**
```bash
npx create-next-app@latest my-app
cd my-app
npm install -D daisyui
```

**Vue / Nuxt:**
```bash
npx nuxi init my-app
cd my-app
npm install -D daisyui
```

**Astro:**
```bash
npm create astro@latest
npx astro add tailwind
npm install -D daisyui
```

After installing, add DaisyUI to your `tailwind.config.js` plugins array as shown above.

## Configuration

DaisyUI is configurable through your Tailwind config file. Here's a complete configuration example:

```js
// tailwind.config.js
module.exports = {
  content: ['./src/**/*.{html,js,jsx,ts,tsx}'],
  plugins: [require('daisyui')],
  daisyui: {
    themes: ['light', 'dark', 'cupcake', 'corporate'],
    darkTheme: 'dark',
    base: true,
    styled: true,
    utils: true,
    prefix: '',
    logs: true,
  },
}
```

### Configuration Options

| Option | Default | Description |
|--------|---------|-------------|
| `themes` | `true` | Array of theme names or `true` for all themes |
| `darkTheme` | `'dark'` | Theme to use when `prefers-color-scheme: dark` |
| `base` | `true` | Include base styles (resets, typography) |
| `styled` | `true` | Include component styles |
| `utils` | `true` | Include utility classes |
| `prefix` | `''` | Add prefix to all DaisyUI classes |
| `logs` | `true` | Show DaisyUI version in console |

### Limiting Themes

Including all 32 themes increases CSS size. For production, specify only the themes you use:

```js
daisyui: {
  themes: ['light', 'dark', 'corporate'],
}
```

This reduces the final CSS bundle significantly.

## Working with Themes

DaisyUI themes change colors, border radius, and other design tokens globally. Apply a theme using the `data-theme` attribute:

```html
<html data-theme="cupcake">
  <!-- All components use cupcake theme colors -->
</html>
```

### Available Themes

DaisyUI includes 32 built-in themes:

| Light Themes | Dark Themes | Specialty |
|--------------|-------------|-----------|
| light | dark | synthwave |
| cupcake | dracula | retro |
| corporate | night | cyberpunk |
| garden | coffee | valentine |
| lofi | dim | halloween |
| pastel | sunset | aqua |
| fantasy | | luxury |
| wireframe | | |

### Theme Switching

Implement theme switching with a simple JavaScript function:

```js
function setTheme(theme) {
  document.documentElement.setAttribute('data-theme', theme)
  localStorage.setItem('theme', theme)
}

// On page load, restore saved theme
const savedTheme = localStorage.getItem('theme') || 'light'
setTheme(savedTheme)
```

### Creating Custom Themes

Define custom themes in your Tailwind config:

```js
// tailwind.config.js
module.exports = {
  plugins: [require('daisyui')],
  daisyui: {
    themes: [
      {
        mytheme: {
          'primary': '#6366f1',
          'secondary': '#f472b6',
          'accent': '#22d3ee',
          'neutral': '#1f2937',
          'base-100': '#ffffff',
          'info': '#3b82f6',
          'success': '#22c55e',
          'warning': '#f59e0b',
          'error': '#ef4444',
        },
      },
      'dark',
    ],
  },
}
```

Use your custom theme:

```html
<html data-theme="mytheme">
```

### CSS Variables

DaisyUI 5 uses readable CSS variables. Override them for granular control:

```css
:root {
  --rounded-btn: 0.5rem;
  --animation-btn: 0.25s;
}

[data-theme="mytheme"] {
  --p: 239 84% 67%;  /* primary color in HSL */
  --pf: 239 84% 57%; /* primary focus */
  --pc: 0 0% 100%;   /* primary content (text on primary) */
}
```

## Core Components

DaisyUI includes 60+ components. Here are the most commonly used ones with examples.

### Button

The `btn` class creates styled buttons with multiple variants:

```html
<!-- Variants -->
<button class="btn">Default</button>
<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-accent">Accent</button>
<button class="btn btn-ghost">Ghost</button>
<button class="btn btn-link">Link</button>

<!-- Sizes -->
<button class="btn btn-lg">Large</button>
<button class="btn btn-md">Medium</button>
<button class="btn btn-sm">Small</button>
<button class="btn btn-xs">Extra Small</button>

<!-- States -->
<button class="btn btn-outline">Outline</button>
<button class="btn btn-disabled">Disabled</button>
<button class="btn loading">Loading</button>
```

### Card

Cards group related content with consistent styling:

```html
<div class="card w-96 bg-base-100 shadow-xl">
  <figure>
    <img src="/image.jpg" alt="Card image" />
  </figure>
  <div class="card-body">
    <h2 class="card-title">Card Title</h2>
    <p>Card description goes here.</p>
    <div class="card-actions justify-end">
      <button class="btn btn-primary">Action</button>
    </div>
  </div>
</div>
```

### Navbar

Navigation bars with responsive design:

```html
<div class="navbar bg-base-100">
  <div class="flex-1">
    <a class="btn btn-ghost text-xl">Brand</a>
  </div>
  <div class="flex-none">
    <ul class="menu menu-horizontal px-1">
      <li><a>Link 1</a></li>
      <li><a>Link 2</a></li>
    </ul>
  </div>
</div>
```

### Modal

Dialogs for user interactions (requires minimal JavaScript):

```html
<!-- Trigger -->
<button class="btn" onclick="my_modal.showModal()">Open Modal</button>

<!-- Modal -->
<dialog id="my_modal" class="modal">
  <div class="modal-box">
    <h3 class="font-bold text-lg">Hello!</h3>
    <p class="py-4">Modal content here.</p>
    <div class="modal-action">
      <form method="dialog">
        <button class="btn">Close</button>
      </form>
    </div>
  </div>
</dialog>
```

### Table

Styled tables with zebra stripes and hover states:

```html
<div class="overflow-x-auto">
  <table class="table table-zebra">
    <thead>
      <tr>
        <th>Name</th>
        <th>Email</th>
        <th>Role</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John Doe</td>
        <td>john@example.com</td>
        <td>Admin</td>
      </tr>
    </tbody>
  </table>
</div>
```

### Form Inputs

Consistent form styling:

```html
<div class="form-control w-full max-w-xs">
  <label class="label">
    <span class="label-text">Email</span>
  </label>
  <input type="email" placeholder="you@example.com" class="input input-bordered w-full" />
  <label class="label">
    <span class="label-text-alt">We'll never share your email</span>
  </label>
</div>
```

## Customization Patterns

DaisyUI components are starting points, not limitations. Here's how to customize them.

### Pattern 1: Tailwind Utility Overrides

Add Tailwind utilities to any DaisyUI component:

```html
<!-- Custom padding and rounded corners -->
<button class="btn btn-primary px-8 py-4 rounded-full">
  Custom Button
</button>

<!-- Card with custom shadow and border -->
<div class="card bg-base-100 shadow-2xl border-2 border-primary">
  <!-- content -->
</div>
```

### Pattern 2: Component Composition

Combine multiple components for complex UIs:

```html
<div class="card bg-base-100 shadow-xl">
  <div class="card-body">
    <div class="flex items-center gap-4">
      <div class="avatar">
        <div class="w-12 rounded-full">
          <img src="/avatar.jpg" alt="User" />
        </div>
      </div>
      <div>
        <h2 class="card-title">User Name</h2>
        <div class="badge badge-secondary">Pro Member</div>
      </div>
    </div>
  </div>
</div>
```

### Pattern 3: CSS Variable Overrides

Target specific components with CSS:

```css
/* Make all primary buttons have sharp corners */
.btn-primary {
  --rounded-btn: 0;
}

/* Custom card styling */
.card {
  --rounded-box: 1rem;
  --card-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
}
```

### Pattern 4: Extending Components

Create custom variants by extending DaisyUI classes:

```css
/* Custom gradient button */
.btn-gradient {
  @apply btn border-0 bg-gradient-to-r from-purple-500 to-pink-500 text-white;
}

.btn-gradient:hover {
  @apply from-purple-600 to-pink-600;
}
```

## DaisyUI vs Alternatives

How does DaisyUI compare to other Tailwind component libraries?

### DaisyUI vs Tailwind UI

| Aspect | DaisyUI | Tailwind UI |
|--------|---------|-------------|
| **Price** | Free, MIT license | $299 one-time |
| **Components** | 60+ | 500+ |
| **Approach** | CSS classes | Copy-paste HTML |
| **Theming** | 32 built-in themes | Manual customization |
| **Best for** | Rapid development | Polished production apps |

**When to choose DaisyUI:** You want fast development with built-in theming and don't need Figma files or extensive component variations.

**When to choose Tailwind UI:** You need premium, polished components with official Tailwind team support and Figma designs.

### DaisyUI vs Shadcn/ui

| Aspect | DaisyUI | Shadcn/ui |
|--------|---------|-----------|
| **Installation** | npm plugin | Copy components into project |
| **Theming** | Attribute-based themes | CSS variables, manual setup |
| **Customization** | Override with utilities | Full source code ownership |
| **Dependencies** | None | Radix UI primitives |
| **Best for** | Quick theming, consistency | Full control, custom design systems |

**When to choose DaisyUI:** You want instant theming and faster setup without managing component source code.

**When to choose Shadcn/ui:** You need complete control over component implementation and want to build a custom design system.

For a deeper comparison, see our guide on DaisyUI vs Shadcn.

## Best Practices

### 1. Limit Your Themes

Only include themes you use in production:

```js
// Good: Specific themes
daisyui: {
  themes: ['light', 'dark'],
}

// Avoid: All themes (adds CSS bloat)
daisyui: {
  themes: true,
}
```

### 2. Use Semantic Classes First

Let DaisyUI handle base styling, then customize:

```html
<!-- Good: Semantic class + targeted overrides -->
<button class="btn btn-primary text-lg">Submit</button>

<!-- Avoid: Rebuilding the component with utilities -->
<button class="inline-flex items-center justify-center rounded-md bg-primary px-4 py-2">Submit</button>
```

### 3. Centralize Theme Customization

Define custom themes in one place rather than scattering CSS overrides:

```js
// tailwind.config.js
daisyui: {
  themes: [
    {
      brand: {
        'primary': '#your-brand-color',
        'secondary': '#your-secondary',
        // ... all colors in one place
      },
    },
  ],
}
```

### 4. Combine with Headless Libraries

For complex interactive components, pair DaisyUI styling with headless libraries:

```jsx
// Using Headless UI for accessibility + DaisyUI for styling
import { Menu } from '@headlessui/react'

function Dropdown() {
  return (
    <Menu>
      <Menu.Button className="btn">Options</Menu.Button>
      <Menu.Items className="menu bg-base-100 rounded-box shadow-lg">
        <Menu.Item>
          {({ active }) => (
            <a className={`${active ? 'bg-primary text-primary-content' : ''}`}>
              Edit
            </a>
          )}
        </Menu.Item>
      </Menu.Items>
    </Menu>
  )
}
```

### 5. Test Multiple Themes

If your app supports theme switching, test all supported themes:

```js
// Cypress or Playwright test
const themes = ['light', 'dark', 'corporate']

themes.forEach((theme) => {
  it(`renders correctly in ${theme} theme`, () => {
    cy.visit('/')
    cy.get('html').invoke('attr', 'data-theme', theme)
    cy.get('.btn-primary').should('be.visible')
  })
})
```

## Related Resources

Explore more UI development guides:

- [Best React UI Libraries (2026)](/blog/best-react-component-libraries) - Compare DaisyUI with MUI, Chakra, and Shadcn
- Tailwind CSS Forms Guide - Deep dive into form styling
- Tailwind Cards Examples - 20 card patterns for dashboards

For AI-powered UI generation, [Forge](https://forge.new) can generate complete DaisyUI-styled interfaces from text descriptions.

## Conclusion

DaisyUI accelerates Tailwind CSS development by providing semantic component classes without sacrificing customization. The combination of instant theming, accessible defaults, and full Tailwind compatibility makes it an excellent choice for MVPs, prototypes, and production applications.

**Quick start:**

1. Install: `npm install -D daisyui@latest`
2. Configure: Add to `tailwind.config.js` plugins
3. Build: Use classes like `btn`, `card`, `modal`
4. Theme: Add `data-theme` to switch between 32 themes

For enterprise projects requiring custom design systems, DaisyUI serves as a solid foundation. Start with DaisyUI components, then customize themes and override styles as your design system matures.