Nuxt UI library

Build Nuxt UI with Tailwind CSS and daisyUI

Nuxt UI must work across rendering modes

Nuxt apps can include server-rendered pages, static routes, client-only areas, API routes, and app layouts. A UI library should not assume every component runs the same way.

Some UI kits make simple markup depend on client-side plugins. Others hard-code a design language that appears in every Nuxt project using the same kit. Both choices create friction when a product needs its own voice.

Customization is also harder when the library owns behavior and style at the same time. You change a dropdown's look and accidentally touch how it opens.

Nuxt + Tailwind CSS + daisyUI

Tailwind CSS works through Vite in Nuxt. daisyUI adds component classes that work in pages, layouts, and Vue components.

• Rendering-friendly CSS: daisyUI classes work with server rendering, static generation, and client-rendered components.

• No global behavior plugin: Nuxt keeps control of data, routing, state, and hydration.

• Cleaner layouts: navbar, drawer, menu, card, and footer help app shells stay readable.

• Theme from Nuxt state or cookies: Apply a daisyUI theme in the root layout and let routes inherit it.

Nuxt handles the app structure. daisyUI helps the UI stay flexible and recognizable as your own.

Install Tailwind CSS and daisyUI for Nuxt

The Nuxt guide installs Tailwind CSS, @tailwindcss/vite, and daisyUI, adds the Tailwind CSS Vite plugin in nuxt.config.ts, and puts @plugin "daisyui" in app/assets/css/main.css.

For the exact commands, see How to install daisyUI with Nuxt.