Guide for daisyUI component library with Tailwind CSS. Use when building UI components, implementing themes, or creating responsive designs with daisyUI.
Builds UI components with daisyUI and Tailwind CSS, implementing themes and responsive layouts.
npx claudepluginhub vinnie357/claude-skillsThis skill inherits all available tools. When active, it can use any tool Claude has access to.
references/components.mdUse 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 operationsExpert guidance for Next.js Cache Components and Partial Prerendering (PPR). **PROACTIVE ACTIVATION**: Use this skill automatically when working in Next.js projects that have `cacheComponents: true` in their next.config.ts/next.config.js. When this config is detected, proactively apply Cache Components patterns and best practices to all React Server Component implementations. **DETECTION**: At the start of a session in a Next.js project, check for `cacheComponents: true` in next.config. If enabled, this skill's patterns should guide all component authoring, data fetching, and caching decisions. **USE CASES**: Implementing 'use cache' directive, configuring cache lifetimes with cacheLife(), tagging cached data with cacheTag(), invalidating caches with updateTag()/revalidateTag(), optimizing static vs dynamic content boundaries, debugging cache issues, and reviewing Cache Component implementations.
Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply.
Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to avoid copyright violations.