---
name: daisyui
description: Guide for daisyUI component library with Tailwind CSS. Use when building UI components, implementing themes, or creating responsive designs with daisyUI.
---
# daisyUI Component Library
Use this skill when building user interfaces with daisyUI and Tailwind CSS, implementing UI components, or configuring themes.
## When to Use This Skill
Activate when:
- Building UI components with daisyUI
- Choosing appropriate daisyUI components for design needs
- Implementing responsive layouts with daisyUI
- Configuring or customizing themes
- Converting designs to daisyUI components
- Troubleshooting daisyUI component styling
## What is daisyUI?
daisyUI is a Tailwind CSS component library providing:
- **Semantic component classes** - High-level abstractions of Tailwind utilities
- **33+ built-in themes** - Light, dark, and creative theme variants
- **Framework-agnostic** - Works with any HTML/CSS project
- **Utility-first compatible** - Combine components with Tailwind utilities
## Installation
Add daisyUI to your project:
```bash
npm install -D daisyui@latest
```
Configure `tailwind.config.js`:
```javascript
module.exports = {
plugins: [require("daisyui")],
}
```
For detailed installation options and CDN usage, see `references/installation.md`.
## Component Categories
daisyUI provides components across these categories:
- **Actions**: Buttons, dropdowns, modals, swap
- **Data Display**: Cards, badges, tables, carousels, stats
- **Data Input**: Input, textarea, select, checkbox, radio, toggle
- **Navigation**: Navbar, menu, tabs, breadcrumbs, pagination
- **Feedback**: Alert, progress, loading, toast, tooltip
- **Layout**: Drawer, footer, hero, stack, divider
For component-specific guidance, consult the appropriate reference file.
## Quick Usage
### Basic Button
```html
Button
Primary
Secondary
Accent
```
### Card Component
```html
Card Title
Card description text
Action
```
### Modal
```html
Open Modal
Modal Title
Modal content here
```
## Theming
### Using Built-in Themes
Set theme via HTML attribute:
```html
```
Available themes: 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
### Theme Switching
```html
Light
Dark
Cupcake
```
For advanced theming and customization, see `references/theming.md`.
## Responsive Design
daisyUI components work with Tailwind's responsive prefixes:
```html
Responsive Button
```
## When to Consult References
- **Installation details**: Read `references/installation.md`
- **Complete component list**: Read `references/components.md`
- **Theming and customization**: Read `references/theming.md`
- **Layout patterns**: Read `references/layouts.md`
- **Form components**: Read `references/forms.md`
- **Common patterns**: Read `references/patterns.md`
## Combining with Tailwind Utilities
daisyUI semantic classes combine with Tailwind utilities:
```html
Enhanced Button
```
## Key Principles
- **Semantic over utility**: Use component classes for common patterns
- **Utility for customization**: Apply Tailwind utilities for unique styling
- **Theme-aware**: Components adapt to theme colors automatically
- **Accessible**: Components follow accessibility best practices
- **Composable**: Combine components to build complex UIs
## Pro Tips
- Use `btn-{size}` modifiers: `btn-xs`, `btn-sm`, `btn-md`, `btn-lg`
- Add `btn-outline` for outlined button variants
- Use `badge` component for status indicators
- Combine `modal` with `modal-backdrop` for better UX
- Use `drawer` for mobile navigation patterns
- Leverage `stats` component for dashboard metrics
- Use `loading` class on buttons for async operations
