Daisyui
Spin up consistent Tailwind-based UI fast using semantic component classes, themes, and dark mode without hand-rolling every utility string.
Overview
daisyui is an agent skill for the Build phase that applies the DaisyUI Tailwind plugin for themed, semantic UI components across frameworks.
Install
npx skills add https://github.com/bobmatnyc/claude-mpm-skills --skill daisyuiWhat is this skill?
- 50+ semantic components on top of Tailwind CSS (btn, card, modal, and related patterns)
- 30+ built-in themes with dark mode configuration via tailwind.config
- Framework-agnostic: React, Vue, Svelte, or vanilla HTML
- Accessible semantic HTML patterns for rapid prototyping
- npm install and tailwind plugin setup with daisyui config block (themes, darkTheme, styled/utils flags)
- 50+ components
- 30+ themes
Adoption & trust: 713 installs on skills.sh; 53 GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You use Tailwind but waste time repeating utility classes and lack a consistent theme and dark mode story across pages.
Who is it for?
Indie builders on Tailwind who want shadcn-like speed with built-in themes and multi-framework HTML semantics.
Skip if: Projects on non-Tailwind CSS frameworks, heavy custom design systems already locked in Figma, or backend-only agents.
When should I use this skill?
Building UI with Tailwind CSS and needing pre-styled semantic components, theming, or dark mode per SKILL.md When to Use.
What do I get? / Deliverables
You configure DaisyUI in Tailwind, pick themes, and compose pages with semantic component classes ready for production prototyping.
- DaisyUI plugin configuration
- Example semantic component markup
- Theme and dark mode setup notes
Recommended Skills
Journey fit
How it compares
Tailwind component semantics and themes—not journey-wide planning skills or chart-design playbooks.
Common Questions / FAQ
Who is daisyui for?
Solo developers shipping Tailwind-based web apps who want the agent to know DaisyUI install, config, and component class patterns out of the box.
When should I use daisyui?
During Build frontend work when scaffolding UI, enabling dark mode, or standardizing buttons, cards, and forms before Ship review.
Is daisyui safe to install?
Review the Security Audits panel on this Prism page; upstream marks disable-model-invocation—the catalog skill is npm and config documentation, not arbitrary shell.
SKILL.md
READMESKILL.md - Daisyui
# 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 ```bash npm install -D daisyui@latest ``` ### Configuration Add to `tailwind.config.js`: ```javascript module.exports = { plugins: [require("daisyui")], daisyui: { themes: ["light", "dark", "cupcake"], // Enable specific themes darkTheme: "dark", // Default dark theme base: true, // Base styles styled: true, // Component styles utils: true, // Utility classes }, } ``` ### Basic Usage ```html <!-- Button component --> <button class="btn btn-primary">Primary Button</button> <!-- Card component --> <div class="card w-96 bg-base-100 shadow-xl"> <div class="card-body"> <h2 class="card-title">Card Title</h2> <p>Card description goes here</p> <div class="card-actions justify-end"> <button class="btn btn-primary">Action</button> </div> </div> </div> <!-- Modal component --> <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</p> <div class="modal-action"> <button class="btn">Close</button> </div> </div> </dialog> ``` --- ## Core Components ### Buttons ```html <!-- Variants --> <button class="btn">Default</button> <button class="btn btn-primary">Primary</button> <button class="btn btn-secondary">Secondary</button> <button class="btn btn-accent">Accent</button> <button class="btn btn-ghost">Ghost</button> <button class="btn btn-link">Link</button> <!-- Sizes --> <button class="btn btn-lg">Large</button> <button class="btn btn-md">Medium</button> <button class="btn btn-sm">Small</button> <button class="btn btn-xs">Tiny</button> <!-- States --> <button class="btn btn-active">Active</button> <button class="btn btn-disabled">Disabled</button> <button class="btn loading">Loading</button> <!-- Shapes --> <button class="btn btn-circle">C</button> <button class="btn btn-square">S</button> <button class="btn btn-wide">Wide</button> <button class="btn btn-block">Block</button> <!-- Outline --> <button class="btn btn-outline btn-primary">Outline</button> ``` ### Cards ```html <!-- Basic card --> <div class="card w-96 bg-base-100 shadow-xl"> <figure><img src="image.jpg" alt="Album"/></figure> <div class="card-body"> <h2 class="card-title">Card Title</h2> <p>Description text</p> <div class="card-actions justify-end"> <button class="btn btn-primary">Buy Now</button> </div> </div> </div> <!-- Compact card --> <div class="card card-compact w-96 bg-base-100 shadow-xl"> <div class="card-body"> <h2 class="card-title">Compact Card</h2> <p>Reduced padding</p> </div> </div> <!-- Card with badge --> <div class="card w-96 bg-base-100 shadow-xl"> <div class="card-body"> <h2 class="card-title"> Title <div class="badge badge-secondary">NEW</div> </h2> <p>Content</p> </div> </div> <!-- Image overlay card --> <div class="card card-compact w-96 image-full bg-bas