daisyui

SKILL.md

Tailwind CSS component library with 50+ semantic components, 30+ themes, and built-in dark mode.

Provides semantic class names (btn, card, modal) instead of utility-only Tailwind, reducing markup verbosity and improving maintainability

Includes 30+ pre-built themes plus custom theme support, with automatic dark mode detection and localStorage persistence

Framework-agnostic: works with React, Vue, Svelte, or vanilla HTML without additional dependencies

Covers navigation, forms, data display, feedback, and layout components with responsive variants, multiple sizes, and state modifiers (active, disabled, loading)

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