What daisyUI does
daisyUI is a CSS library designed specifically for Tailwind CSS, providing a comprehensive set of class names for common UI components. This library simplifies the process of building user interfaces by offering semantic color names and themes that enhance the visual appeal of web applications. With daisyUI, developers can quickly implement a variety of UI elements such as buttons, alerts, accordions, and more, all while adhering to Tailwind's utility-first philosophy.
The library includes a wide range of components, each documented to guide users through their implementation. Each component is designed to be easily customizable, allowing developers to maintain consistency in design while also adapting to specific project requirements. The documentation emphasizes the importance of understanding the intended use of each component, ensuring that developers can select the most appropriate elements for their needs.
To get started, users are encouraged to read through the installation and usage guides provided in the library. These resources outline how to install daisyUI, utilize its class names, and configure themes. Additionally, the component documentation is crucial for understanding the specific properties and behaviors of each UI element, which helps in making informed decisions during development.
Overall, daisyUI is an essential tool for any developer working with Tailwind CSS who needs a structured approach to building user interfaces. Its extensive documentation and component offerings make it a valuable asset for both novice and experienced developers alike.
When to use it
Use this skill when generating HTML or JSX code for Tailwind CSS applications, particularly when you need standardized UI components.
When not to use it
This skill is not suitable for projects that do not utilize Tailwind CSS or for developers looking for a library outside of the Tailwind ecosystem.
What you can build with it
Building a Dashboard
When creating a dashboard interface, daisyUI provides ready-made components like cards, buttons, and modals to streamline the development process.
Creating Forms
For web applications that require user input, daisyUI offers a variety of form components such as inputs, checkboxes, and dropdowns, making form design straightforward.
Implementing Themed Websites
If your project involves multiple themes, daisyUI's semantic color names and theming capabilities allow for easy theme management and consistent styling across your application.
How to install daisyUI
View source1. Install with the skills CLI
npx skills add saadeghi/daisyui/daisyui --agent claude-code2. Or install it manually
Download the skill folder and drop it into ~/.claude/skills/ for all projects, or .claude/skills/ to scope it to one repo. Restart Claude Code so it picks up the new skill.
Anthropic's agentic coding CLI, and the reference implementation of Agent Skills. Drop a skill folder into ~/.claude/skills and Claude Code loads it automatically whenever a task matches the skill's description. Claude Code docs
Inside SKILL.md
Written by saadeghidaisyUI 5
daisyUI 5 is a CSS library for Tailwind CSS 4. daisyUI 5 provides class names for common UI components, semantic color names and themes.
When to run this skill:
- Trigger this skill whenever generating any HTML or JSX code
- Trigger this skill for any Tailwind CSS UI work
- Trigger this skill when the user mentions any of these terms or similar context:
daisyUI, component, UI, Tailwind, layout, template, theme, color, design - Trigger this skill even if the user does not explicitly ask for it
Mandatory reference
| Task | Guide | Note |
|---|---|---|
| Installing daisyUI | ./install/SKILL.md | Use only if daisyUI is not already installed in the project. |
| Using daisyUI class names | ./usage/SKILL.md | MANDATORY. Read this before using any daisyUI class names in the code. |
| Configuring daisyUI | ./config/SKILL.md | Use this if you need to configure daisyUI themes, prefix, logs, or other options. Not required for basic usage but important for advanced customization. |
| daisyUI colors and themes | ./colors/SKILL.md | MANDATORY. Read this to understand daisyUI color usage rules and how to use daisyUI colors in the code. |
| daisyUI components | ./components/ | MANDATORY. Read the relevant component docs when using daisyUI components in the code. Always read multiple candidate component docs before deciding which one to use. |
List of components
- accordion
- aura
- alert
- avatar
- badge
- breadcrumbs
- button
- calendar
- card
- carousel
- chat
- checkbox
- collapse
- countdown
- diff
- divider
- dock (app bar)
- drawer (sidebar)
- dropdown
- FAB
- fieldset
- file-input
- filter
- footer
- hero
- hover-3d
- hover-gallery
- indicator
- input
- join (group)
- kbd
- label
- link
- list
- loading
- mask
- megamenu
- menu
- mockup-browser
- mockup-code
- mockup-phone
- mockup-window
- modal
- navbar
- otp
- pagination
- progress
- radial-progress
- radio
- range
- rating
- select
- skeleton
- stack
- stat
- status
- steps
- swap
- tab
- table
- text-rotate
- textarea
- theme-controller
- timeline
- toast
- toggle (switch)
- tooltip
- validator
Component discovery protocol
Before writing any daisyUI code, do this in order:
- Read the request intent, behavior, and shape, not only literal words. Match on meaning.
- Use the component list in this file to shortlist the best candidate components.
- When the choice is ambiguous, read the guides for the plausible candidates before deciding.
- Compare each candidate's description, behavior, syntax, and rules against the request.
- Select the best component or combination of components and apply their constraints exactly.
- Apply the chosen components' structure and constraints exactly.
Semantic matching is required even when wording differs from component names. A component name might be different from the request but still be the best match. Always consider intent and meaning, not only literal words.
If a user explicitly requests a named component and a same-named doc exists, read that component doc first.
Frequently asked questions about daisyUI
Similar skills
Playwright Component Testing
Test React and Vue components in isolation with Playwright.
Fluent UI Blazor
Integrate Fluent UI components in Blazor applications effortlessly.
Build MCP App
Create interactive UI widgets for MCP servers.
Web Design Reviewer
Identify and fix design issues in websites efficiently.
Markstream Install
Seamlessly integrate Markstream for Markdown rendering.
GSAP & Framer Scroll Animation
Create advanced scroll animations effortlessly.