Daisy UI - Free open-source Tailwind CSS component library
A comprehensive, free and open-source Tailwind CSS component library offering semantic class names like btn, card, and toggle for cleaner HTML. Fully themeable with multiple built-in themes and zero JavaScript dependencies.
Fully open-source under the MIT license with an active community of contributors.
Use clean class names like btn, card, and toggle instead of long utility chains.
Ship with multiple ready-made themes and easily create custom ones with CSS variables.
Zero JavaScript dependencies means it works with any framework or environment.
Override any component style using standard Tailwind utility classes and CSS variables.
Enable right-to-left layouts with a single configuration option for global reach.
Works seamlessly with React, Vue, Svelte, Astro, and any HTML-based project.
Ship faster with ready-made, themeable Tailwind CSS components
Daisy UI is a widely adopted, open-source component library that extends Tailwind CSS with semantic class names. Instead of chaining dozens of utility classes for every element, developers can use intuitive names like btn, card, toggle, and badge to build interfaces faster while keeping markup clean and readable. It works as a pure CSS plugin with zero JavaScript dependencies, meaning it slots into any framework or static site without adding weight. Whether you're building with React, Vue, Svelte, Astro, or plain HTML, the library integrates through a single plugin addition to your Tailwind configuration.
What's included
- Semantic component classes covering buttons, cards, modals, drawers, tabs, and more
- Multiple built-in color themes ready to use out of the box
- CSS variable-based theming system for creating custom themes
- Semantic color naming with primary, secondary, accent, and neutral tokens
- Right-to-left layout support via a configuration toggle
- Full compatibility with Tailwind utility classes for per-component overrides
- CDN distribution for quick prototyping without a build step
Ideal for
- Rapid prototyping where clean, readable HTML matters
- SaaS dashboards and admin panels that need consistent UI patterns
- Marketing sites and landing pages built across different frameworks
- Side projects and MVPs where speed outweighs custom design work
- Teams standardizing a design system across multiple codebases
Theming & dark mode
The library ships with a collection of pre-built themes that can be swapped with a single data attribute. You can scope different themes to specific sections of a page, making it straightforward to offer light and dark modes or branded sub-sections. Custom themes are defined through CSS variables, so adjusting your entire color palette requires editing just a handful of tokens rather than hunting through component files.
Good to know
- Licensed under MIT, so it's free for personal and commercial use
- Pure CSS with no runtime JavaScript — styles load even if scripts are disabled
- Requires Tailwind CSS as a peer dependency; currently aligned with Tailwind v4
Repository stats
Stack
