daisyui

What this skill does

# daisyUI Expert

Guidance for building production UIs with daisyUI. Covers component usage, theming, color system, responsive patterns, and integration with Tailwind CSS.

Docs: https://daisyui.com/docs

## Core Philosophy

daisyUI is a Tailwind CSS component library that provides semantic class names for UI components. Instead of writing `flex items-center justify-center gap-2 rounded-lg bg-indigo-500 px-4 py-2 text-white`, you write `btn btn-primary`. Four pillars:

1. **Semantic classes** - meaningful names (`btn`, `card`, `modal`) instead of utility chains
2. **Theme-driven** - 35 built-in themes, unlimited custom themes via CSS variables
3. **Pure CSS** - no JS runtime, no framework lock-in, works with any stack
4. **Tailwind-native** - extends Tailwind, all utilities still available for fine-tuning

## When This Skill Activates

- Adding daisyUI to a project (`npm i -D daisyui`)
- Choosing or customizing themes
- Building layouts with daisyUI components (drawer, navbar, hero)
- Styling forms, modals, cards, tables with daisyUI classes
- Integrating daisyUI with React, Vue, Svelte, or any framework
- Questions about daisyUI class names, variants, or responsive patterns

## Synergy with Other Frontend Skills

| Need | Route to |
|------|----------|
| CSS architecture, modern CSS features, responsive images | **frontend-design** |
| Page layout composition, grid systems, breakpoint strategy | **frontend-layout** agent |
| Animations, micro-interactions, visual polish | **frontend-design** agent |
| UX flows, design tokens, component hierarchy | **frontend-design** agent |
| Distinctive visual identity, avoiding generic aesthetics | **frontend-css** skill |
| shadcn/ui components (different library, Radix-based) | **shadcn-ui** |

**This skill** handles daisyUI-specific concerns: class names, theming, color system, component patterns, and configuration.

## Live Component Lookup

This skill contains reference patterns for the most common components. For any component's full class API -- spawn a **quick-searcher** agent to fetch the docs.

### URL patterns

| Resource | URL pattern |
|----------|-------------|
| Component docs | `https://daisyui.com/components/{name}/` |
| Theme list | `https://daisyui.com/docs/themes/` |
| Color system | `https://daisyui.com/docs/colors/` |
| Config | `https://daisyui.com/docs/config/` |
| Utilities | `https://daisyui.com/docs/utilities/` |
| Theme generator | `https://daisyui.com/theme-generator/` |

## Installation and Setup

### Install

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

### Configure (Tailwind CSS v4+)

```css
@import "tailwindcss";
@plugin "daisyui";
```

### With theme selection

```css
@plugin "daisyui" {
  themes: light --default, dark --prefersdark, nord, dracula;
}
```

### Config options

| Option | Default | Purpose |
|--------|---------|---------|
| `themes` | `light --default, dark --prefersdark` | Themes to enable (`all`, `false`, or comma list) |
| `root` | `":root"` | CSS selector for variables (web components, shadow DOM) |
| `include` | (all) | Whitelist specific components |
| `exclude` | (empty) | Blacklist specific components |
| `prefix` | `""` | Prefix for all daisyUI classes (e.g. `d-btn`) |
| `logs` | `true` | Console output during build |

## Component Catalog

See [references/components.md](references/components.md) for the full catalog with all class names.

| Category | Components |
|----------|------------|
| Actions | Button, Dropdown, FAB/Speed Dial, Modal, Swap, Theme Controller |
| Data Display | Accordion, Avatar, Badge, Card, Carousel, Chat Bubble, Collapse, Countdown, Diff, Hover 3D Card, Hover Gallery, Kbd, List, Stat, Status, Table, Text Rotate, Timeline |
| Navigation | Breadcrumbs, Dock, Link, Menu, Navbar, Pagination, Steps, Tabs |
| Feedback | Alert, Loading, Progress, Radial Progress, Skeleton, Toast, Tooltip |
| Data Input | Calendar, Checkbox, Fieldset, File Input, Filter, Label, Radio, Range, Rating, Select, Text Input, Textarea, Toggle, Validator |
| Layout | Divider, Drawer, Footer, Hero, Indicator, Join, Mask, Stack |
| Mockup | Browser, Code, Phone, Window |

## Class Name Pattern

All daisyUI components follow a consistent naming convention:

```
{component}                  -- base class (required)
{component}-{variant}        -- style variant
{component}-{color}          -- semantic color
{component}-{size}           -- size modifier (xs, sm, md, lg, xl)
{component}-{state}          -- state modifier (active, disabled, open)
```

Example with Button:
```html
<button class="btn">Default</button>
<button class="btn btn-primary">Primary color</button>
<button class="btn btn-outline btn-sm">Small outline</button>
<button class="btn btn-primary btn-soft btn-lg">Large soft primary</button>
```

Style variants available on most components: `{component}-outline`, `{component}-ghost`, `{component}-soft`, `{component}-dash`.

## Color System

daisyUI uses **semantic color names** -- not fixed hex values. Colors change with themes automatically.

| Color | Purpose | Content pair |
|-------|---------|-------------|
| `primary` | Main brand actions | `primary-content` |
| `secondary` | Supporting actions | `secondary-content` |
| `accent` | Highlights, accents | `accent-content` |
| `neutral` | Unsaturated UI elements | `neutral-content` |
| `base-100` | Page background | `base-content` |
| `base-200` | Slightly elevated surface | -- |
| `base-300` | Most elevated surface | -- |
| `info` | Informational | `info-content` |
| `success` | Positive feedback | `success-content` |
| `warning` | Caution | `warning-content` |
| `error` | Destructive/error | `error-content` |

Colors work with all Tailwind utilities: `bg-primary`, `text-primary-content`, `border-accent`, `ring-error`, `from-primary/50`.

## Theming

### Built-in themes (35)

light, dark, cupcake, bumblebee, emerald, corporate, synthwave, retro, cyberpunk, valentine, halloween, garden, forest, aqua, lofi, pastel, fantasy, wireframe, black, luxury, dracula, cmyk, autumn, business, acid, lemonade, night, coffee, winter, dim, nord, sunset, caramellatte, abyss, silk.

### Apply themes

```html
<!-- Page-level -->
<html data-theme="nord">

<!-- Element-level (nested themes supported) -->
<div data-theme="dark">
  <div data-theme="light"><!-- light inside dark --></div>
</div>
```

### Custom theme

```css
@plugin "daisyui/theme" {
  name: "mytheme";
  default: true;
  color-scheme: light;
  --color-base-100: oklch(98% 0.02 240);
  --color-base-200: oklch(95% 0.02 240);
  --color-base-300: oklch(90% 0.02 240);
  --color-base-content: oklch(20% 0.02 240);
  --color-primary: oklch(55% 0.3 260);
  --color-primary-content: oklch(98% 0.01 260);
  --color-secondary: oklch(65% 0.15 330);
  --color-secondary-content: oklch(98% 0.01 330);
  --color-accent: oklch(70% 0.2 180);
  --color-accent-content: oklch(15% 0.02 180);
  --color-neutral: oklch(40% 0.02 240);
  --color-neutral-content: oklch(95% 0.01 240);
  --color-info: oklch(65% 0.2 250);
  --color-success: oklch(65% 0.2 150);
  --color-warning: oklch(75% 0.15 80);
  --color-error: oklch(60% 0.25 25);
  --radius-selector: 1rem;
  --radius-field: 0.5rem;
  --radius-box: 1rem;
  --size-selector: 0.25rem;
  --size-field: 0.25rem;
  --border: 1px;
  --depth: 1;
  --noise: 0;
}
```

### Theme CSS variables

| Variable | Controls | Example |
|----------|----------|---------|
| `--color-{name}` | All semantic colors | `--color-primary` |
| `--radius-box` | Large containers (card, modal, alert) | `1rem` |
| `--radius-field` | Medium elements (button, input, tab) | `0.5rem` |
| `--radius-selector` | Small elements (checkbox, toggle, badge) | `1rem` |
| `--size-selector` | Scale of small elements | `0.25rem` |
| `--size-field` | Scale of medium elements | `0.25rem` |
| `--border` | Default border width | `1px` |
| `--depth` | Shadow/depth intensity (0 or 1) | `1` |
| `--noise` | Noise texture overlay (0 or 1) | `0` |

### Border radius utilities

| Class | Variable | Use for |
|-