daisyUI

daisyUI is a free, open-source component library for Tailwind CSS that ships ready-made UI component classes — buttons, cards, modals, and more — so developers write fewer utility classes and less custom CSS.

What is daisyUI?

daisyUI is a CSS component library built on top of Tailwind CSS. It takes Tailwind CSS as its styling foundation and outputs composed component classes such as btn, card, modal, checkbox, and navbar. The project is maintained by Pouya Saadeghi on GitHub and is described in its repository as the most popular, free and open-source Tailwind CSS component library. It is distributed via npm, jsDelivr CDN, and the official website at daisyui.com.

Key Features

• Free and open-source — daisyUI is MIT-licensed and funded through Open Collective backers and sponsors, with no paid tiers.
• Component classes — Apply a single class like btn btn-primary for styled buttons, card for cards, and modal for modals, instead of chaining many Tailwind utilities.
• Theming — Includes multiple built-in color themes and supports custom theming through Tailwind CSS configuration, letting you restyle the entire UI by changing a class.
• Framework agnostic — Works as a Tailwind plugin with any framework or no framework; the repository lists Svelte, PostCSS, and Tailwind among its related topics.
• No JavaScript dependency — Core components are pure CSS; interactive behaviors like dropdowns and modals can be enhanced with a few lines of JavaScript.
• Easy setup — Install with npm install daisyui or load via jsDelivr CDN, then add the plugin to your Tailwind config.
• Active community — The project has over 40,000 GitHub stars, a Discord server, and contributions from many developers.

Who is it for?

• Tailwind CSS developers — Speed up UI work by using pre-built component classes instead of writing long utility chains.
• Web designers — Keep designs consistent across pages using built-in themes and reusable component patterns.
• Rapid prototypers — Assemble navigation, cards, modals, and forms quickly to test ideas.
• Open-source contributors — Get involved by reporting issues, writing code, or donating via Open Collective.

What can you do with daisyUI?

• Build a marketing site — Combine hero, navbar, footer, and card components to create landing pages, then customize with Tailwind utilities.
• Create a dashboard — Use stats, progress, tabs, and table components to present data in an admin interface.
• Design forms — Style inputs, checkboxes, radio buttons, selects, and file uploads with dedicated daisyUI form classes.
• Prototype a blog — Assemble article, badge, avatar, and pagination components for post listings and comment sections.

How does daisyUI work?

Install daisyUI via npm (npm install daisyui) or include it via CDN. Register it in your Tailwind CSS configuration by adding it to the plugins array. After that, daisyUI injects its component classes into your compiled CSS, so you can use them directly in HTML or templating files.

Pricing

daisyUI is completely free and open-source. There are no paid tiers or licenses; the project is supported by voluntary contributions through Open Collective.

Alternatives

Other Tailwind CSS component libraries exist. Tailwind UI is the official paid set of components from the Tailwind team, while Flowbite offers open-source components with React and Vue support. Both provide ready-made UI blocks, but daisyUI stands out as a free, community-driven alternative.

FAQ

Is daisyUI free?

Yes, daisyUI is free and open-source under the MIT license. You can use it in commercial projects without paying, and it is supported by community donations via Open Collective.

How do I install daisyUI?

You can install it with npm install daisyui and add the plugin to your Tailwind config file. Alternatively, you can use the jsDelivr CDN to include it directly in your HTML.

Does daisyUI work with React or Svelte?

Yes. Because daisyUI is just CSS classes added to Tailwind, it works with any framework that uses Tailwind CSS, including React, Svelte, Vue, and plain HTML.

What components does daisyUI include?

daisyUI includes classes for buttons, cards, modals, dropdowns, tabs, alerts, badges, forms, navigation, and more. See the full list on the components page.

How is daisyUI different from Tailwind UI?

Tailwind UI is a paid collection of hand-crafted components made by the Tailwind team. daisyUI is a free, open-source alternative that provides component classes directly within your CSS.