UI Components for Tailwind CSS
Themeable, Scalable and Designer-Friendly
[ See all components ]

DaisyUI

---

🔗 Links

• 👉 See all components
• ⛹️‍♀️ Tailwind Play - Try it online
• 📘 Theming guide
• 📘 List of components
• 📘 FAQ
• 🐙 GitHub
• 📦 NPM

---

🌼 Features

• CSS components: Use classes like btn, card, ...
• Designer-friendly: DaisyUI has 2 versions:
  • Styled: Beatiful UI library, no need to design elements (but still customizable).
  • Base: Only skeleton of components. No style, no colors.
• Scalable: All your components will use the same style based on a design system.
• Customizable: Customize the style of elements with Tailwind utility classes.
• Themeable: Add multiple themes or change colors with a CSS variable.
• Semantic color names: Use color names like primary, secondary, accent, ... just like your design system defines.
  [ read more ]

---

👩‍💻 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 UI components (Basic layout, no color, no visual style)	https://unpkg.com/daisyui@latest/dist/base.css
Styled	DaisyUI Styled UI components (But you can't use DaisyUI colors on other elements)	https://unpkg.com/daisyui@latest/dist/styled.css
Full	Tailwind default style + DaisyUI styled UI components (But it's a large file for production)	https://unpkg.com/daisyui@latest/dist/full.css

---

🎨 Customize theme and colors (optional)

Add your custom colors in 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 */
}

---

Please share