daisyUI
github.com/saadeghi/daisyui- Category
- Developer Tools
- Rank
- No. 1969Tools index
Previous survey · No. 1976 ·
- Pricing
- Open Source
- Type
- TOOL
- Use case
- Coding
- Builder
- saadeghi
- GitHub
- 42.6k stars
- Latest release
- v5.7.47
- Date
About
daisyUI is a free and open-source component library for Tailwind CSS, currently at version 5. It ships prebuilt UI components for front-end projects and is one of the most widely used add-ons in the Tailwind ecosystem, with framework-agnostic usage across stacks such as Svelte and plain PostCSS setups.
What it does
A plugin for Tailwind CSS 4 that adds ready-named classes for common interface pieces: buttons, cards, modals, drawers, tabs, tables and roughly seventy more. Instead of stacking a dozen utility classes on every button, you write one component class and adjust it with Tailwind utilities as usual. It also supplies semantic color names and a set of switchable themes. You can load it as a Tailwind plugin, where options pick which parts to include and add a class prefix, or drop in a single prebuilt stylesheet from a CDN with no build step.
Why it's ranked here
MIT licensed since 2020, published to npm as a single package, and built for the current Tailwind major version: the monorepo pins Tailwind 4.3.3 in its development tooling. It is plain CSS at runtime, so it works the same under React, Vue, Svelte, Astro or server-rendered templates, and the package keywords target all of them. The repository also ships an official skill file that teaches AI coding agents the component list and a lookup procedure, which matters for a catalogue of agent-era tooling.
What's good
Selective loading is built in: the plugin takes include and exclude lists and skips any base style, component or utility not named, so unused parts never reach the stylesheet. A prefix option renames every class to avoid collisions with an existing design system. The build generates color classes for background, text and border at nine opacity steps across five breakpoints, so the semantic palette behaves like native Tailwind colors. Themes and helper functions are exported as separate entry points with type declarations.
Tradeoffs
The repository README is almost entirely badges and links; installation, configuration and the component catalogue live on the external website, not in the code you download. The bundled agent skill is written to trigger on any HTML or JSX work, even when the user did not ask for daisyUI, which can push its classes into projects that do not use it. The contributor toolchain requires Bun. As a class-name library it styles markup but ships no interactive JavaScript behaviour of its own.
How to use it well
Fits teams already on Tailwind 4 who want consistent components without adopting a framework-specific kit. Start with the plugin and an include list covering only the components you use, and add a prefix if the project has its own button or card classes. Pick one or two themes rather than shipping all of them. If you install the agent skill, scope it to projects that actually depend on daisyUI. For accessible interactive widgets with managed focus and state, pair it with a headless behaviour library.
Technical notes+
packages/daisyui/index.js exports plugin.withOptions: pluginOptionsHandler returns include, exclude and prefix, and a shouldIncludeItem filter gates each entry of the base, components and utilities maps; component and utility styles pass through nestCssLayers, while the is-drawer-open and is-drawer-close variants are registered outside layers because, per the comment, they cannot be nested. packages/daisyui/build.js drives generation: generatePlugins converts each source CSS file to a JS plugin via cssToJs, generateColorRules emits bg/text/border rules with opacities 10 through 90 across sm to 2xl, and packCss plus generateThemes produce the standalone stylesheets, skipped in --dev builds. In packages/daisyui/functions/generateThemes.js the catch block passes the caught error as the second Error argument, so the original message is dropped. packages/daisyui/package.json declares the browser field, exports for theme and functions entry points, and version 5 of the package; skills/daisyui/SKILL.md lists the component guides.
Observed
- License
- MIT
- Language
- JavaScript and CSS
- Packaging
- npm package daisyui, plus a prebuilt stylesheet for CDN use
- Interface
- Tailwind CSS plugin with include, exclude and prefix options
- Peer platform
- Tailwind CSS 4
- Build tooling
- Bun workspaces monorepo
- AI agent support
- Ships an official agent skill file listing component guides
Read from README.md, package.json, LICENSE, packages/daisyui/package.json, packages/daisyui/index.js, packages/daisyui/README.md, packages/daisyui/build.js, packages/daisyui/functions/generateThemes.js, packages/daisyui/functions/generatePlugins.js, skills/daisyui/SKILL.md.
Tags
Tech Stack
Media
Comments (0)
No comments yet
Editorially curated, with community endorsements as a secondary signal. Corrections welcome.