UnoCSS component library

Use daisyUI components with UnoCSS projects

UnoCSS

UnoCSS is an on-demand atomic CSS engine.

It generates CSS from the utilities you use and relies on presets to define the utility rules. That makes UnoCSS flexible: a project can mimic Tailwind-style utilities, use attributify mode, add icons, define shortcuts, or create a custom design language.

Because generation happens on demand, UnoCSS is a good fit for teams that want utility-first styling without accepting one fixed utility set.

UnoCSS + daisyUI

daisyUI can be used with UnoCSS through the daisyUI UnoCSS preset. This is different from the Tailwind CSS plugin setup; UnoCSS reads daisyUI through its own preset system.

The combination gives you both layers:

• Semantic component classes: Use daisyUI classes like btn, card, badge, and alert for common UI.

• Atomic styling where needed: Use UnoCSS utilities for layout, one-off spacing, custom states, and project-specific details.

• Less repeated markup: Component classes reduce the utility chains on elements that repeat across the app.

• Theme tokens: daisyUI themes give your UnoCSS project a consistent color system for components.

UnoCSS stays flexible. daisyUI gives repeated interface parts a stable, readable vocabulary.

Install daisyUI for UnoCSS

Getting started with daisyUI in UnoCSS uses the daisyUI preset for UnoCSS.

Set up UnoCSS in your project, install the daisyUI UnoCSS package, and add the preset to your UnoCSS configuration.

After setup, daisyUI component classes work beside your UnoCSS utilities.

For UnoCSS-specific installation instructions and configuration options, see How to install daisyUI with UnoCSS.