daisyUI

What is daisyUI?

daisyUI is a collection of CSS class names. These class names are a high-level abstraction of Tailwind CSS utility classes.
Imagine you use Tailwind CSS with superpowers!

How does daisyUI work?

daisyUI is a NPM package, you can install it as a dev dependency in your project.
Then you add it to Tailwind CSS as a plugin. This makes all the daisyUI class names available to Tailwind CSS and you can use them like any other Tailwind CSS class names.

daisyUI uses the Tailwind CSS plugin API to extend the available Tailwind CSS class names. This means that daisyUI is fully compatible with Tailwind CSS and you can use it with any Tailwind CSS project.

Why should I use daisyUI?

daisyUI is for you if you:

• Are tired of writing thousands of utility class names repeatedly
• Want more readable and maintainable code
• Need to design interfaces faster with less code
• Want a consistent design system across projects
• Want to use standard UI parts, without making design decisions for every single detail
• Want dark mode and many other themes available out of the box
• Want to use a design system that is based on real-world UI design principles
• Want development speed and customization at the same time

daistUI is not for you if you:

• Want to waste time re-inventing all the standard UI parts like buttons, cards, checkboxes, etc, for each project.
• Want to swim in the ocean of thousands of class names and never find your way out.
• Want to make your codebase a mess and spend hours figuring out what part of the code is responsible for what part of the UI.
• Want to waste your time and money re-inventing the wheel instead of shipping your actual project.

Is daisyUI free?

Yes, daisyUI is free and open-source, under the MIT license. You can use it in any project, commercial or non-commercial, without any restrictions.

Why is it free? daisyUI’s goal is to improve the web development experience for everyone. I believe web development is already complex enough with all the different technologies, frameworks and tools. It takes a lot of time and effort to learn and master all these tools. daisyUI is here to make the design part of web development easier and faster, so you can focus on the actual product you are building.

How can I support daisyUI?

You can support daisyUI by using it in your projects, sharing it with your friends and colleagues, and contributing to the project on GitHub. You can also support daisyUI by becoming a sponsor on GitHub or Open Collective.

Can I use daisyUI without Tailwind CSS?

Yes, daisyUI can be used standalone without Tailwind CSS. However, it’s recommended to use daisyUI with Tailwind CSS. Here’s why:
daisyUI provides pieces of UI you can use to make a website. Like Button, Toggle, Card, etc. You need something to glue these pieces together! For example you need flex box, grid, padding, margin, etc. Tailwind CSS provides these low-level utility classes that you can use to glue the UI pieces together. So daisyUI and Tailwind CSS are a perfect match. You can use daisyUI to design the UI parts and Tailwind CSS for layout, spacing, font-size and other low-level CSS rules.

Alternatively if you don’t want to use Tailwind CSS, you can use daisyUI for components and write your own styles for layout, spacing, etc.

Can I use daisyUI with other UI frameworks?

Yes, you can mix and match daisyUI with any UI framework that add styles based on class names. If there’s any class name conflict, you can use prefix to avoid conflicts between two libraries.

Which frameworks can I use daisyUI with?

ALL of them! daisyUI is framework agnostic. You can use it anywhere you can use CSS.