daisyui
Librarysaadeghi/daisyui
The most popular free and open-source Tailwind CSS component library.
Overview
A free and open-source component library for Tailwind CSS. It provides a wide range of reusable UI components with customizable themes. Designed to be lightweight and easy to integrate into any web project.
README Preview
\n\n[![][logo-url]][docs-url]\n\n**The most popular, free and open-source component library for Tailwind CSS**\n\n[![][version]](https://www.npmjs.com/package/daisyui)\n[![][commit]](https://github.com/saadeghi/daisyui)\n[![][license]](https://github.com/saadeghi/daisyui/blob/master/LICENSE)\n[![][stars]](https://github.com/saadeghi/daisyui)\n[![][installs]](https://www.npmjs.com/package/daisyui)\n[![][jsdelivr]](https://cdn.jsdelivr.net/npm/daisyui@5)\n[![][discord]](https://daisyui.com/discord/)\n[![][opencollectivebadge]](https://opencollective.com/daisyui)\n\n\n\n# daisyUI 5\n\n### 🌼 [Official website →](https://daisyui.com/)\n\n### 🧩 [See all components →](https://daisyui.com/components/)\n\n### 🚀 [How to use →](https://daisyui.com/docs/install/)\n\n### 🤝 [Contribute →](.github/CONTRIBUTING.md)\n\n---\n\n\n\nSponsors and backers\n\n[![][backers_org]][opencollective]\n[![][backers]][opencollective]\n\nContributors\n\n[![][contributors_img]][contributors]\n\n\n\n\n\n༼ つ ◕_◕ ༽つ Please share\n\n[![][tweet]](https://twitter.com/intent/tweet?text=daisyUI%20%0D%0AComponents%20for%20Tailwind%20CSS%20%0D%0Ahttps://github.com/saadeghi/daisyui)\n\n\n\n[version]: https://badgen.net/github/tag/saadeghi/daisyui?label=Version&color=1AD1A5\n[commit]: https://badgen.net/github/last-commit/saadeghi/daisyui?label=Last%20commit&color=1AD1A5\n[license]: https://badgen.net/github/license/saadeghi/daisyui?label=License&color=1AD1A5\n[stars]: https://badgen.net/github/stars/saadeghi/daisyui?label=GitHub%20stars&color=1AD1A5\n[installs]: https://badgen.net/npm/dt/daisyui?label=NPM%20installs&color=1AD1A5\n[jsdelivr]: https://badgen.net/jsdelivr/hits/npm/daisyui?color=1AD1A5\n[discord]: https://badgen.net/discord/members/S6TZxycVHs?label=Discord&color=1AD1A5\n[opencollectivebadge]: https://badgen.net/opencollective/backers/daisyui?label=Open%20Collective&color=1AD1A5\n[tweet]: https://img.shields.io/twitter/url?label=Share&url=https%3A%2F%2Fgithub.com%2Fsaadeghi%2Fdaisyui\n[docs-url
FAQ (5)
TroubleshootingHow do I fix MCP error -32602 “Structured content does not match the tool's output schema” from daisyui_component_syntax_expert or daisyui_creative_director?
Upgrade the daisyUI Blueprint MCP server from v1.8.1 to v1.8.2 or newer, where the schema-invalid advisory tool responses were fixed.
1. Stop the MCP server/client.
2. Upgrade the package, for example:
npm install daisyui-blueprint@1.8.2
3. Restart the MCP client.
4. Confirm _meta.serverVersion is 1.8.2.
5. Rerun daisyui_component_syntax_expert or daisyui_creative_director.
Changing SnippetIDs, reducing the payload, or using only workflowId does not work around this issue because v1.8.1 omits required output fields such as instructions, next step, and workflow.
TroubleshootingHow to fix daisyUI Blueprint MCP 'Structured content does not match the tool's output schema' when daisyui_quality_inspector reruns with renderedReview?
Upgrade the daisyUI Blueprint MCP server to v1.6.3 or later, which fixes the broken finalization path:
npm install daisyui-blueprint@1.6.3Then restart the MCP client/server and rerun daisyui_quality_inspector with the same workflowId, files, and completed renderedReview. If npm does not immediately show v1.6.3 due to registry propagation delays, wait and retry the install, or clear the npm cache with npm cache clean --force.
Affected version: v1.6.1. On v1.6.1, retrying the request produces the same schema error. As a temporary workaround, consider the audit complete after the successful automated pass plus the documented manual checks, instead of waiting for _meta.finalizationAllowed: true.
TroubleshootingWhy doesn't the DaisyUI Diff component drag on Firefox for Android?
Firefox for Android recognizes the CSS resize property but ignores it on touch devices (Mozilla bug 1776834), so the Diff component's drag handle cannot move. This is fixed in DaisyUI PR #4762 by adding the same tap-to-expand fallback already used on iOS Safari. Update DaisyUI to a release containing this fix, then tap either side of the diff on Firefox Android to expand that side instead of dragging the handle.
TroubleshootingWhy doesn't daisyUI validator show error/success colors when input-primary is used, and how do I fix it?
This is a CSS layer-order regression in daisyUI 5.2.4–5.7.40. Color modifiers such as input-primary are generated after validator, so they override the :user-invalid and :user-valid states. Upgrade to the latest patched daisyUI 5.x release with npm install daisyui@latest, then restart your dev server or rebuild. The fix moves validator styles to the modifier layer so they take precedence over color modifiers. As a temporary workaround, remove input-primary from the validated control, or add a higher-specificity override for inputs: .input.validator:user-invalid { @apply border-error; } .input.validator:user-valid { @apply border-success; }.
TroubleshootingWhy do the daisyUI navbar examples titled “with icon” not show an icon?
The examples use the term “icon” for the small built-in button symbols: the hamburger (☰) at the start and the three-dot (⋮) menu at the end. If you did not notice them, check the navbar start/end sections. To display a traditional graphic icon instead, replace the text symbol inside the relevant <button> with an SVG or an icon from your icon library.