# Nuxt UI — Intuitive Vue Component Library for Nuxt

> An official Nuxt module providing accessible, Tailwind CSS-powered Vue components built on Reka UI, designed for rapid Nuxt application development.

## Install

Save in your project root:

# Nuxt UI — Intuitive Vue Component Library for Nuxt

## Quick Use
```bash
npx nuxi@latest module add ui
# In your template:
# <UButton label="Click me" />
```

## 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

---
Source: https://tokrepo.com/en/workflows/asset-0151aeba
Author: AI Open Source