Nuxt UI — Intuitive Vue Component Library for Nuxt

Introduction

Nuxt UI is the official component library for the Nuxt framework. It provides a curated set of Vue components styled with Tailwind CSS and built on Reka UI primitives, with deep integration into the Nuxt module system for auto-imports and configuration.

What Nuxt UI Does

• Provides 50+ Vue components covering forms, navigation, overlays, and data display
• Integrates as a Nuxt module with automatic component and composable registration
• Uses Tailwind CSS v4 for styling with a theme system based on CSS variables
• Includes a command palette (CommandPalette) for application-level search and navigation
• Supports light and dark color modes out of the box

Architecture Overview

Nuxt UI is distributed as a Nuxt module that registers components, composables, and Tailwind CSS configuration automatically. Components wrap Reka UI headless primitives for accessibility, then apply Tailwind utility classes controlled by a theme configuration object. The theming layer uses CSS custom properties that map to Tailwind's color system, allowing runtime theme switching without rebuilding CSS.

Self-Hosting & Configuration

• Add the module via npx nuxi module add ui or manually in nuxt.config.ts
• The module auto-configures Tailwind CSS and registers all components globally
• Customize the default theme via the ui key in app.config.ts
• Override individual component styles using the ui prop or the theme configuration
• Works with Nuxt 3 and requires Tailwind CSS v4

Key Features

• Deep Nuxt integration with zero-config auto-imports
• Accessible components built on Reka UI with keyboard navigation and ARIA support
• Comprehensive form system with validation via Zod, Yup, Joi, or Valibot
• Built-in toast notifications, modals, slideovers, and tooltips
• Color mode support with automatic class and CSS variable toggling

Comparison with Similar Tools

• Vuetify — Material Design library for Vue; Nuxt UI follows its own design language with Tailwind
• Element Plus — standalone Vue component library; Nuxt UI is a Nuxt-specific module
• PrimeVue — large component set as an npm package; Nuxt UI offers tighter Nuxt integration
• shadcn-vue — copy-paste model; Nuxt UI is an installable module with auto-imports
• Quasar — full framework with its own build system; Nuxt UI stays within the Nuxt ecosystem

FAQ

Q: Can I use Nuxt UI outside of Nuxt? A: Nuxt UI v3 is designed specifically for Nuxt. For standalone Vue projects, consider shadcn-vue or Reka UI directly.

Q: Does Nuxt UI support Tailwind CSS v3? A: Nuxt UI v3 requires Tailwind CSS v4. Earlier versions of Nuxt UI worked with Tailwind v3.

Q: How do I customize component styles? A: Use the ui prop on individual components or define global overrides in app.config.ts under the ui key.

Q: Is Nuxt UI free for commercial projects? A: Yes. The core library is MIT licensed. Nuxt UI Pro offers additional premium components.

Sources

• https://github.com/nuxt/ui
• https://ui.nuxt.com