CSS components for Tailwind CSS ↗︎
Styled + unstyled UI components
Scalable, Themeable and designer-friendly
[ demo ↗︎ ]

DaisyUI

🌼 Demo

See all components ↗︎

👩‍💻 Use

1. Install

npm i daisyui

Then add plugin and preset to tailwind.config.js

module.exports = {
  plugins: [
    require('daisyui/styled'), // 🎨 for styled UI
    // require('daisyui'), // for base UI only
  ],
  presets: [
    require('daisyui/preset')
  ],
}

Or use a CDN

(Not recommended for production)

Version	Description	URL
Base	Unstyled domponents (Basic layout, no color, no visual style)	https://unpkg.com/daisyui@latest/dist/base.css
Styled	DaisyUI Styled domponents (But you can't use DaisyUI colors on other elements)	https://unpkg.com/daisyui@latest/dist/styled.css
Full	Tailwind default style + DaisyUI styled domponents (But it's a large file for production)	https://unpkg.com/daisyui@latest/dist/full.css

---

2. Customize theme and colors (optional)

Add your custom colors in your CSS file
[ Theming guide and examples ↗︎ ]

Quick example

/* Values are HSL (hue, saturation, lightness) */
:root {
  --d: 0 0% 100%; /* default color */
  --p1: 340 82% 62%; /* Primary color - light */
  --p2: 340 82% 52%; /* Primary color - normal */
  --p3: 340 82% 42%; /* Primary color - dark */
  --s1: 262 52% 56%; /* Secondary color - light */
  --s2: 262 52% 46%; /* Secondary color - normal */
  --s3: 262 52% 36%; /* Secondary color - dark */
  --a1: 199 98% 58%; /* Accent color - light */
  --a2: 199 98% 48%; /* Accent color - normal */
  --a3: 199 98% 38%; /* Accent color - dark */
  --c1: 220 14% 96%; /* Content colors */
  --c2: 228 14% 93%;
  --c3: 220 15% 84%;
  --c4: 218 14% 65%;
  --c5: 220 14% 46%;
  --c6: 220 14% 37%;
  --c7: 219 14% 28%;
  --c8: 222 13% 19%;
  --c9: 223 14% 10%;
  --cp: 0 0% 100%; /* Foreground content color to use on a primary color */
  --cs: 0 0% 100%; /* Foreground content color to use on a secondary color */
  --ca: 0 0% 100%; /* Foreground content color to use on a accent color */
  --in: 207 90% 54%; /* Info */
  --su: 174 100% 29%; /* Success */
  --wa: 36 100% 50%; /* Warning */
  --er: 14 100% 57%; /* Error */
}

🤔 FAQ

Why do I need it?

Instead of using lots of utility classes for all elements, use component classes like .btn, .card, .navbar, etc... for your common elements to make sure all your elements use same style
Instead of using general-purpose color names like blue-600 or gray-100 use semantic role names like primary, content-300 or info. This way, you can change primary color of your whole project using a single CSS variable; no need to replace all color classes in all files. You can also define multiple themes (not just dark-mode) using CSS variables.

How does it work?

DaisyUI provides basic/unstyled component classes that you can use for almost all design systems. You will need different .btn sizes for every project so you can have a basic style that predefined .xs, .sm, .lg sizes for your .btn but it has no color or additianal styles.
DaisyUI also has an optional styled version that is useful if you don't want to fully design your components but you want to use custom color themes.
DaisyUI is based on tailwind so you can customize everything with utility classes and purge ↗︎ all unused class names.

What's included?

When you add daisyui/styled as a Tailwind CSS plugin, it gives you ready-to-use UI component classes to use. Like .btn, .card, .alert, etc...
If you use styled version, you get something pre-designed (like Bootstrap) but you can still customize it with Tailwind utility classes.
If you use the base (unstyled) version, it has no color or visual style so you can fully style the components with Tailwind utility classes or Tailwind's @apply directive.

Concepts

Spacing, layout, Typography
You will handle these with Tailwind utility classes. It's easy to create any layout with flexbox or grid. Also for spacing (margins, paddings, etc...), Tailwind classes are perfect for the job. For typography, I suggest using the official Tailwind Typography ↗︎ plugin.

Colors and theming
Instead of using Tailwind's general-purpose colors we use a custom/themeable set of color names (Why? 👉 Theming guide ↗︎)

Components
DaisyUI has component classes for every component (button, card, etc...) so you don't need to use many utility classes to build a button. Just use a .btn class.

What is "preset"?

module.exports = {
  // ...
  presets: [
    require('daisyui/preset')
  ],
}

When you add DaisyUI preset it will add: A set of semantic color names (as utility classes)
A few additional utility classes that are used by components (like border-radius, min-height, etc...)

Extending and customizing

You can define multiple custom themes using a few CSS variable.
You can use Tailwind utility classes anywhere. So your button element can look like <a class="px-16 m-5 shadow-md btn">
You're not forced to use all the components. Unused components will be purged anyway.
If you use the base style, you can fully design elements using Tailwind utility classes or Tailwind's @apply directive.
For example, you can style your button this way:

.btn{
  @apply px-16 m-5 shadow-md;
}

---

🎛 List of components

Show

• Accordion
• Alert
• Artboard
• App bar
• Avatar
• Avatar group
• Badge
• Banner
• Breadcrumb
• Button
• Button group
• Calendar
• Card
• Chat bubble
• Comment
• Countdown
• Divider
• Empty placeholder
• Footer
• Form
  • Dropdown
  • Select
  • Text input
  • Text area
  • Checkbox
  • Radio
  • Range slider
  • Toggle
  • Upload
• Hero
• Loading
• Menu
• Navbar
• Modal
• Pagination
• Progress
• Progress indicator
• Skeleton placeholder
• Statistic
• Steps
• Tag
• Tabs
• Timeline
• Toast
• Tooltip

---

Please share