@kidonng/daisyui NPM

daisyUI

A UnoCSS-compatible redistribution of daisyUI
Note: this package is supposed to be used with unocss-preset-daisy.

Nested rules are unwrapped
@apply directives are preserved (to be processed by @unocss/transformer-directives)
Theme and hsla() variables are comma separated (instead of space)
--tw-*- variables are renamed to --un-*

Installation

npm installl @kidonng/daisyui

Usage

The easiest way to use this package is to import all the styles:

import '@kidonng/daisyui/index.css'

To only import what you need, always import base first:

import '@kidonng/daisyui/base/index.css'
/* Other imports */

Read on to see how to import components, utilities and themes.

Components

/* Import all components */
import '@kidonng/daisyui/components/index.css'

/* Import all unstyled & styled components (same as above) */
import '@kidonng/daisyui/components/unstyled/index.css'
import '@kidonng/daisyui/components/styled/index.css'

/* Import components one by one */
import '@kidonng/daisyui/components/unstyled/button.css'
/* `styled` components should be imported after `unstyled` components */
import '@kidonng/daisyui/components/styled/button.css'

Utilities

Utility styles should be imported after component styles.

/* Import all utilities */
import '@kidonng/daisyui/utilities/index.css'

/* Import global, unstyled & styled utilties (same as above) */
import '@kidonng/daisyui/utilities/global/index.css'
import '@kidonng/daisyui/utilities/unstyled/index.css'
import '@kidonng/daisyui/utilities/styled/index.css'

/* Import utility one by one */
import '@kidonng/daisyui/utilities/unstyled/button.css'
/* `styled` utilities should be imported after `unstyled` utilities */
import '@kidonng/daisyui/utilities/styled/button.css'

Themes

Note: refer to unocss-preset-daisy documentation for custom themes.

/* Import all themes */
import '@kidonng/daisyui/themes/index.css'

/* Import themes one by one */
import '@kidonng/daisyui/themes/cupcake.css'
import '@kidonng/daisyui/themes/lemonade.css'

/* Import auto theme (uses light or dark theme based on `prefers-color-scheme`) */
import '@kidonng/daisyui/themes/auto.css'

Refer to daisyUI documentation for the list of themes.

To use a theme other than auto, you need to also specify [data-theme] attribute in HTML: