Stats
Actions
Tags
Help us improve
Share bugs, ideas, or general feedback.
From all-skills
Guides building UI components, implementing themes, and creating responsive layouts with daisyUI and Tailwind CSS. Includes component categories, theming, and installation.
npx claudepluginhub vinnie357/claude-skills --plugin qaHow this skill is triggered — by the user, by Claude, or both
Slash command
/all-skills:daisyuiThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Use this skill when building user interfaces with daisyUI and Tailwind CSS, implementing UI components, or configuring themes.
Guides building UI components, implementing themes, and creating responsive designs with daisyUI Tailwind CSS library.
Guides DaisyUI v5 best practices, shadcn/ui to DaisyUI migration mappings, oklch theme configuration, color transitions, and component catalog for class-based Tailwind UIs.
Builds scalable Tailwind CSS design systems using design tokens, component variants, responsive patterns, and accessibility. Use for component libraries, theming, UI standardization, and dark mode setup.
Share bugs, ideas, or general feedback.
Use this skill when building user interfaces with daisyUI and Tailwind CSS, implementing UI components, or configuring themes.
Activate when:
daisyUI is a Tailwind CSS component library providing:
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.
daisyUI provides components across these categories:
For component-specific guidance, consult the appropriate reference file.
<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>
<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>
<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>
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
<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.
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>
references/installation.mdreferences/components.mdreferences/theming.mdreferences/layouts.mdreferences/forms.mdreferences/patterns.mddaisyUI 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>
btn-{size} modifiers: btn-xs, btn-sm, btn-md, btn-lgbtn-outline for outlined button variantsbadge component for status indicatorsmodal with modal-backdrop for better UXdrawer for mobile navigation patternsstats component for dashboard metricsloading class on buttons for async operations