nuxt-ui

# Nuxt UI v4 Component library for Vue 3 and Nuxt 4+ built on Reka UI (headless) + Tailwind CSS v4 + Tailwind Variants. **Current stable version:** v4.4.0 (January 2026) ## When to Use - Installing/configuring @nuxt/ui - Using UI components (Button, Card, Table, Form, etc.) - Customizing theme (colors, variants, CSS variables) - Building forms with validation - Using overlays (Modal, Toast, CommandPalette) - Working with composables (useToast, useOverlay) **For Vue component patterns:** use `vue` skill **For Nuxt routing/server:** use `nuxt` skill ## Available Guidance | File | Topics | | ------------------------------------------------------------ | -------------------------------------------------------------------------------- | | **[references/installation.md](references/installation.md)** | Nuxt/Vue setup, pnpm gotchas, UApp wrapper, module options, prefix, tree-shaking | | **[references/theming.md](references/theming.md)** | Semantic colors, CSS variables, app.config.ts, Tailwind Variants | | **[references/components.md](references/components.md)** | Component index by category (125+ components) | | **components/\*.md** | Per-component details (button.md, modal.md, etc.) | | **[references/forms.md](references/forms.md)** | Form components, validation (Zod/Valibot), useFormField | | **[references/overlays.md](references/overlays.md)** | Toast, Modal, Slideover, Drawer, CommandPalette | | **[references/composables.md](references/composables.md)** | useToast, useOverlay, defineShortcuts, useScrollspy | ## Loading Files **Consider loading these reference files based on your task:** - [ ] [references/installation.md](references/installation.md) - if installing or configuring @nuxt/ui - [ ] [references/theming.md](references/theming.md) - if customizing theme, colors, or Tailwind Variants - [ ] [references/components.md](references/components.md) - if browsing component index or finding components by category - [ ] [references/forms.md](references/forms.md) - if building forms with validation (Zod/Valibot) - [ ] [references/overlays.md](references/overlays.md) - if using Toast, Modal, Slideover, Drawer, or CommandPalette - [ ] [references/composables.md](references/composables.md) - if using useToast, useOverlay, or other composables **DO NOT load all files at once.** Load only what's relevant to your current task. ## Key Concepts | Concept | Description | | ----------------- | ---------------------------------------------------------- | | UApp | Required wrapper component for Toast, Tooltip, overlays | | Tailwind Variants | Type-safe styling with slots, variants, compoundVariants | | Semantic Colors | primary, secondary, success, error, warning, info, neutral | | Reka UI | Headless component primitives (accessibility built-in) | > For headless component primitives (API details, accessibility patterns, asChild): read the **reka-ui** skill ## Quick Reference ```ts // nuxt.config.ts export default defineNuxtConfig({ modules: ['@nuxt/ui'], css: ['~/assets/css/main.css'] }) ``` ```css /* assets/css/main.css */ @import 'tailwindcss'; @import '@nuxt/ui'; ``` ```vue <!-- app.vue - UApp wrapper required --> <template> <UApp> <NuxtPage /> </UApp> </template> ``` ## Resources - [Nuxt UI Docs](https://ui.nuxt.com) - [Component Reference](https://ui.nuxt.com/components) - [Theme Customization](https://ui.nuxt.com/getting-started/theme) --- _Token efficiency: Main skill ~300 tokens, each sub-file ~800-1200 tokens_