UnoCSS UI library

Build UnoCSS UI with daisyUI component classes

UnoCSS UI can become too atomic

UnoCSS gives you a flexible atomic CSS engine. That flexibility is useful, but repeated product UI can become noisy when every button, card, alert, and menu is written as a long set of utilities.

Shortcuts help, but then you are building a component vocabulary yourself. Many teams end up with scattered aliases, one-off variants, and repeated class groups that become hard to rename.

Traditional component libraries solve repetition, but often at the cost of a fixed look, outdated CSS, or JavaScript behavior you don't need. UnoCSS users usually want more control than that.

UnoCSS + daisyUI

daisyUI can add a component layer to UnoCSS through the community @ameinhardt/unocss-preset-daisy preset.

• Component names for repeated UI: Use btn, card, badge, alert, and other daisyUI classes where atomic utilities get repetitive.

• Utilities for custom detail: Keep UnoCSS utilities for spacing, layout, responsive states, and product-specific polish.

• Theme tokens: daisyUI themes give repeated components a shared color system.

• Know the preset boundary: The UnoCSS guide uses an unofficial preset, and not every daisyUI component class is guaranteed to work.

UnoCSS stays the engine. daisyUI adds a higher-level vocabulary for interface parts that repeat.

Install daisyUI for UnoCSS

The UnoCSS guide installs UnoCSS, daisyUI, and the unofficial @ameinhardt/unocss-preset-daisy package. Add presetDaisy() and presetWind4() in unocss.config.js, then import uno.css in your app.

For the exact commands and warning, see How to install daisyUI with UnoCSS.