1---
2name: nuxt-ui
3description: Use when building styled UI with @nuxt/ui v4 components - create forms with validation, implement data tables with sorting, build modal dialogs and overlays, configure Tailwind Variants theming. Use vue skill for raw component patterns, reka-ui for headless primitives.
4license: MIT
5---
6 
7# Nuxt UI v4
8 
9Component library for Vue 3 and Nuxt 4+ built on Reka UI (headless) + Tailwind CSS v4 + Tailwind Variants.
10 
11**Current stable version:** v4.4.0 (January 2026)
12 
13## When to Use
14 
15- Installing/configuring @nuxt/ui
16- Using UI components (Button, Card, Table, Form, etc.)
17- Customizing theme (colors, variants, CSS variables)
18- Building forms with validation
19- Using overlays (Modal, Toast, CommandPalette)
20- Working with composables (useToast, useOverlay)
21 
22**For Vue component patterns:** use `vue` skill
23**For Nuxt routing/server:** use `nuxt` skill
24 
25## Available Guidance
26 
27| File                                                         | Topics                                                                           |
28| ------------------------------------------------------------ | -------------------------------------------------------------------------------- |
29| **[references/installation.md](references/installation.md)** | Nuxt/Vue setup, pnpm gotchas, UApp wrapper, module options, prefix, tree-shaking |
30| **[references/theming.md](references/theming.md)**           | Semantic colors, CSS variables, app.config.ts, Tailwind Variants                 |
31| **[references/components.md](references/components.md)**     | Component index by category (125+ components)                                    |
32| **components/\*.md**                                         | Per-component details (button.md, modal.md, etc.)                                |
33| **[references/forms.md](references/forms.md)**               | Form components, validation (Zod/Valibot), useFormField                          |
34| **[references/overlays.md](references/overlays.md)**         | Toast, Modal, Slideover, Drawer, CommandPalette                                  |
35| **[references/composables.md](references/composables.md)**   | useToast, useOverlay, defineShortcuts, useScrollspy                              |
36 
37## Loading Files
38 
39**Consider loading these reference files based on your task:**
40 
41- [ ] [references/installation.md](references/installation.md) - if installing or configuring @nuxt/ui
42- [ ] [references/theming.md](references/theming.md) - if customizing theme, colors, or Tailwind Variants
43- [ ] [references/components.md](references/components.md) - if browsing component index or finding components by category
44- [ ] [references/forms.md](references/forms.md) - if building forms with validation (Zod/Valibot)
45- [ ] [references/overlays.md](references/overlays.md) - if using Toast, Modal, Slideover, Drawer, or CommandPalette
46- [ ] [references/composables.md](references/composables.md) - if using useToast, useOverlay, or other composables
47 
48**DO NOT load all files at once.** Load only what's relevant to your current task.
49 
50## Key Concepts
51 
52| Concept           | Description                                                |
53| ----------------- | ---------------------------------------------------------- |
54| UApp              | Required wrapper component for Toast, Tooltip, overlays    |
55| Tailwind Variants | Type-safe styling with slots, variants, compoundVariants   |
56| Semantic Colors   | primary, secondary, success, error, warning, info, neutral |
57| Reka UI           | Headless component primitives (accessibility built-in)     |
58 
59> For headless component primitives (API details, accessibility patterns, asChild): read the **reka-ui** skill
60 
61## Quick Reference
62 
63```ts
64// nuxt.config.ts
65export default defineNuxtConfig({
66  modules: ['@nuxt/ui'],
67  css: ['~/assets/css/main.css']
68})
69```
70 
71```css
72/* assets/css/main.css */
73@import 'tailwindcss';
74@import '@nuxt/ui';
75```
76 
77```vue
78<!-- app.vue - UApp wrapper required -->
79<template>
80  <UApp>
81    <NuxtPage />
82  </UApp>
83</template>
84```
85 
86## Resources
87 
88- [Nuxt UI Docs](https://ui.nuxt.com)
89- [Component Reference](https://ui.nuxt.com/components)
90- [Theme Customization](https://ui.nuxt.com/getting-started/theme)
91 
92---
93 
94_Token efficiency: Main skill ~300 tokens, each sub-file ~800-1200 tokens_
95