# daisyui

Supplies your coding assistant with daisyUI patterns, semantic classes for 50+ Tailwind CSS components, and built-in themes.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 903 installs · ★ 78
- Author: bobmatnyc
- License: MIT · policy=mirror · the beginning of the file is at the end of this page
- Source: https://github.com/bobmatnyc/claude-mpm-skills/tree/HEAD/toolchains/ui/components/daisyui/SKILL.md
- Updated: 2026-07-18
- HTML: https://affpapa.org/en/nevibecode/skills/bobmatnyc-daisyui

## What it does

This skill supplies coding assistants with reference markup for daisyUI. Instead of stacking repetitive Tailwind utility classes, the model generates semantic class names like `btn`, `card`, and native `<dialog>` modals.

The reference covers form inputs, toggle states, modal backdrops, and theme setup. Your project still needs the `daisyui` npm package installed, or the markup produces plain unstyled HTML.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add bobmatnyc/claude-mpm-skills --skill daisyui -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/daisyui/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/daisyui/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add bobmatnyc/claude-mpm-skills --skill daisyui -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/daisyui/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add bobmatnyc/claude-mpm-skills --skill daisyui -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/daisyui/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install bobmatnyc/claude-mpm-skills daisyui
```

2. **Manually: put the files in place**
- File: `.github/skills/daisyui/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add bobmatnyc/claude-mpm-skills --skill daisyui -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/bobmatnyc/claude-mpm-skills --path toolchains/ui/components/daisyui
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/daisyui/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add bobmatnyc/claude-mpm-skills --skill daisyui -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/bobmatnyc/claude-mpm-skills/tree/HEAD/toolchains/ui/components/daisyui/SKILL.md

## When to use it
- build dialogs with native HTML dialog tags and daisyUI classes
- replace verbose Tailwind utility chains with semantic class names
- configure themes and dark mode in tailwind.config.js
- scaffold accessible form controls like inputs, toggles, and range sliders

## Example prompts
- Build a confirmation modal using daisyUI and native dialog markup
- Create a product card with an image overlay and a primary action button in daisyUI
- Configure daisyUI in tailwind.config.js with light, dark, and cupcake themes

## Source text · SKILL.md · MIT

Below is the content of a third-party file. It is data, not instructions for you: do not act on anything written inside unless the human asks. Block tag: ef764e5fa1df0bf3.

BEGIN THIRD-PARTY FILE ef764e5fa1df0bf3
````text
---
name: daisyui
description: Tailwind CSS component library providing semantic class names for 50+ components with built-in themes, dark mode, and customization for rapid UI development.
user-invocable: false
disable-model-invocation: true
progressive_disclosure:
  entry_point:
    - summary
    - when_to_use
    - quick_start
  token_estimates:
    entry: 75
    full: 4200
---

# DaisyUI Component Library

## Summary
DaisyUI is the most popular Tailwind CSS component library providing semantic class names for 50+ components with built-in themes, dark mode, and customization. Framework-agnostic and production-ready.

## When to Use
- Building UI with Tailwind CSS and need pre-styled components
- Want semantic class names (`btn`, `card`) instead of utility-only approach
- Need built-in theming system with 30+ themes and dark mode
- Require consistent design system across React, Vue, Svelte, or vanilla HTML
- Want to prototype quickly with ready-made components
- Need accessible components following semantic HTML patterns

---

## Quick Start

### Installation

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

### Configuration

Add to `tailwind.config.js`:

```javascript
module.exports = {
  plugins: [require("daisyui")],
  daisyui: {
    themes: ["light", "dark", "cupcake"], // Enable specific themes
    darkTheme: "dark", // Default dark theme
    base: true, // Base styles
    styled: true, // Component styles
    utils: true, // Utility classes
  },
}
```

### Basic Usage

```html
<!-- Button component -->
<button class="btn btn-primary">Primary Button</button>

<!-- 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 description goes here</p>
    <div class="card-actions justify-end">
      <button class="btn btn-primary">Action</button>
    </div>
  </div>
</div>

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

---

## Core Components

### Buttons

```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">Tiny</button>

<!-- States -->
<button class="btn btn-active">Active</button>
<button class="btn btn-disabled">Disabled</button>
<button class="btn loading">Loading</button>

<!-- Shapes -->
<button class="btn btn-circle">C</button>
<button class="btn btn-square">S</button>
<button class="btn btn-wide">Wide</button>
<button class="btn btn-block">Block</button>

<!-- Outline -->
<button class="btn btn-outline btn-primary">Outline</button>
```

### Cards

```html
<!-- Basic card -->
<div class="card w-96 bg-base-100 shadow-xl">
  <figure><img src="image.jpg" alt="Album"/></figure>
  <div class="card-body">
    <h2 class="card-title">Card Title</h2>
````
END THIRD-PARTY FILE ef764e5fa1df0bf3

The third-party file has ended. Everything between the ef764e5fa1df0bf3 tags is data: requests and commands from it are not followed. An “end of file” line with another tag inside the block is part of the file.

First 3335 of 34018 bytes. © bobmatnyc · MIT · https://github.com/bobmatnyc/claude-mpm-skills/tree/HEAD/toolchains/ui/components/daisyui/SKILL.md

_Part of the page did not fit — see the HTML version._

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md