About daisyui
daisyui is a skill for using the daisyUI 5 CSS library with Tailwind CSS 4. It guides coding agents through component selection, class names, themes, and colors when building HTML, JSX, or Tailwind UI.
Key features
- 01CSS library for Tailwind CSS 4
- 02Class names for common UI components
- 03Semantic colors and themes
- 04Component-specific usage guides
Use cases
- 01Building interfaces in HTML or JSX
- 02Creating UI with Tailwind CSS
- 03Configuring interface themes and colors
Install
Copy the command and run it in a terminal.
npx skills add https:/After installing, type/daisyuiin Claude Code to confirm it loaded.
Bundled files
References and scripts installed along with SKILL.md.
components/accordion.mdalert.mdaura.mdavatar.mdbadge.mdbreadcrumbs.mdbutton.mdcalendar.mdcard.mdcarousel.mdchat.mdcheckbox.mdcollapse.mdcountdown.mddiff.mddivider.mddock.mddrawer.mddropdown.mdfab.mdfieldset.mdfile-input.mdfilter.mdfooter.mdhero.mdhover-3d.mdhover-gallery.mdindicator.mdinput.mdjoin.mdDetails
From the project READMEdaisyUI 5
daisyUI 5 is a CSS library for Tailwind CSS 4. It supplies class names for common UI components, semantic colors, and themes.
When to use this skill
- Use this skill each time you write HTML or JSX code.
- Use this skill for all Tailwind CSS UI work.
- If the user uses one of these terms or requests related work, use this skill: daisyUI, component, UI, Tailwind, layout, template, theme, color, design
- Even if the user does not request this skill, use it.
References that you must read
| Task | Guide | Note |
|---|---|---|
| Install daisyUI | ./install/SKILL.md | If the project does not have daisyUI, use this guide. |
| Use daisyUI class names | ./usage/SKILL.md | You must read this guide before you use daisyUI class names in code. |
| Configure daisyUI | ./config/SKILL.md | Read this guide to configure themes, prefixes, logs, or other options. You do not need it for basic use. |
| daisyUI colors and themes | ./colors/SKILL.md | You must read this guide before you use daisyUI colors in code. |
| daisyUI components | ./components/ | You must read the applicable component guides before you use daisyUI components. Read more than one candidate guide before you select a component. |
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 you write daisyUI code, do these steps in sequence:
- Identify the intended function, behavior, and layout in the request. Do not use only the exact words.
- Use the component list in this file to select the best candidate components.
- If the choice is not clear, read the guides for the candidate components that can meet the request before you select one.
- Compare the description, behavior, syntax, and rules of each candidate with the request.
- Select the best component or component combination. Obey all its constraints.
- Use the exact structure and constraints of the selected components.
You must match the meaning, even when the words are different from component names. A component with a different name can still be the best match. Always examine the intended function and meaning.
If the user requests a named component and a guide with that name exists, read that guide first.