daisyUI

About daisyUI

daisyUI is a component class library plugin for Tailwind CSS. It adds semantic class names such as btn, card, and toggle for common UI elements, letting developers style components without writing long lists of Tailwind utility classes. It is distributed as a pure CSS plugin with no JavaScript dependency, works with any JavaScript framework, and is installed as a dev dependency alongside Tailwind CSS.

The library includes a built-in theming system based on CSS variables, with semantic color names (primary, secondary, accent, neutral, info, success, warning, error, and base colors) that support dark mode and multiple pre-built themes, including a theme generator for creating custom themes. Components remain customizable using standard Tailwind utility classes on top of the daisyUI class names.

It is intended for developers building interfaces with Tailwind CSS who want to reduce the amount of utility class markup written per element. The site includes documentation, a component reference, templates, a Figma library, an MCP server, and a skills package (installable via npx skills add saadeghi/daisyui).

Key features

• Semantic component class names (btn, card, toggle, etc.) on top of Tailwind CSS
• Reduces HTML class name count by up to 88% and DOM size by up to 79%
• Pure CSS plugin with no JavaScript dependency, works with any JS framework
• Built-in theme system with 30+ predefined themes plus a custom theme generator
• Customizable via standard Tailwind utility classes
• Official MCP server for generating UIs

Frequently asked questions