Daisyui

If you're tired of writing `className="flex items-center justify-center rounded-lg bg-blue-500 px-4 py-2 text-white"` every time you need a button, this gives you semantic classes like `btn btn-primary` instead. You get 50+ ready-made components (cards, modals, forms, navbars) that work with any framework or vanilla HTML. The theming system is the real draw: 30+ built-in themes, dark mode that actually works, and you can still layer on Tailwind utilities when needed. It's opinionated enough to speed up prototyping but not so rigid that you're fighting it later. Good middle ground between utility-first purity and wanting to ship UI without reinventing every component.

skills.sh installs: 915
GitHub stars: 79
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add bobmatnyc/claude-mpm-skills --skill daisyui --agent claude-code

Installs into .claude/skills of the current project.

Files

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

npm install -D daisyui@latest

Configuration

Add to tailwind.config.js:

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
  },
}