Package Exports

daisyui

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (daisyui) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

DaisyUI

🔗 Links

🌼 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