DaisyUI

It's like Tailwind CSS on steroids!
You have everything from Tailwind CSS, but you can also use component classes like btn, card, etc...

🔗 Links

• 👉 Demo and samples Netlify / Github
• 🎲 Try it online: Tailwind Play / Codepen
• 📘 Theming guide
• 📘 List of components
• 📘 FAQ
• 📦 Source: GitHub / NPM
• 📦 CDN: Unpkg / JSdeliver

🌼 Features

• Tailwind CSS plugin: Simply add it to your Tailwind config.
• CSS components: It adds component classes to Tailwind. Classes like btn, card, ...
• Designer-friendly: DaisyUI comes in 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 design system.
• Customizable: Customize the style of elements with Tailwind utility classes.
• Themeable: Add multiple themes or change colors with a CSS variable. You can even set a theme for a specific section of your page * .
• Semantic color names: Use color names like primary, secondary, accent,... just like your design system defines.
  [ read more ]

👩‍💻 Install now!

npm i daisyui

Then add DaisyUI to your tailwind.config.js

module.exports = {
  
  plugins: [
    require('daisyui/styled'), // or require('daisyui') for unstyled UI
  ],

  // OPTIONAL: if you want to use DaisyUI colors everywhere
  theme: {
    extend: {
      colors: require('daisyui/colors'),
    },
  },

}

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
Default themes	Only CSS variables for default themes	https://unpkg.com/daisyui@latest/dist/themes.css

🎉 Use

Use component classes like btn, card, etc... to build your UI.

<a class="btn">Hello!</a>

<div class="shadow card">
  <div class="card-body">
    <h2 class="card-title">Card Title</h2> 
    <p>Card text</p>
  </div>
</div> 

👉 See all components
🎲 Try it online

🎨 Customize theme and colors (optional)

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

/* 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 */
}