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:
npm install -D daisyui@latest
Configure tailwind.config.js :
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
<button class="btn">Button</button> <button class="btn btn-primary">Primary</button> <button class="btn btn-secondary">Secondary</button> <button class="btn btn-accent">Accent</button>
Card Component
<div class="card w-96 bg-base-100 shadow-xl"> <figure><img src="image.jpg" alt="Image" /></figure> <div class="card-body"> <h2 class="card-title">Card Title</h2> <p>Card description text</p> <div class="card-actions justify-end"> <button class="btn btn-primary">Action</button> </div> </div> </div>
Modal
<button class="btn" onclick="my_modal.showModal()">Open Modal</button>
<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 here</p> <div class="modal-action"> <form method="dialog"> <button class="btn">Close</button> </form> </div> </div> </dialog>
Theming
Using Built-in Themes
Set theme via HTML attribute:
<html data-theme="cupcake">
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
<select class="select" data-choose-theme> <option value="light">Light</option> <option value="dark">Dark</option> <option value="cupcake">Cupcake</option> </select>
For advanced theming and customization, see references/theming.md .
Responsive Design
daisyUI components work with Tailwind's responsive prefixes:
<button class="btn btn-sm md:btn-md lg:btn-lg"> Responsive Button </button>
<div class="card w-full md:w-96"> <!-- Responsive card --> </div>
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:
<!-- daisyUI component + Tailwind utilities --> <button class="btn btn-primary shadow-lg hover:shadow-xl transition-all"> Enhanced Button </button>
<div class="card bg-base-100 border-2 border-primary rounded-lg p-4"> <!-- Card with custom styling --> </div>
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