Nuxt UI v4

Component library for Vue 3 and Nuxt 4+ built on Reka UI (headless) + Tailwind CSS v4 + Tailwind Variants.

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	Nuxt/Vue setup, pnpm gotchas, UApp wrapper, module options
references/theming.md	Semantic colors, CSS variables, app.config.ts, Tailwind Variants
references/components.md	Component index by category (121 components)
components/*.md	Per-component details (button.md, modal.md, etc.)
references/forms.md	Form components, validation (Zod/Valibot), useFormField
references/overlays.md	Toast, Modal, Slideover, Drawer, CommandPalette
references/composables.md	useToast, useOverlay, defineShortcuts, useScrollspy

Usage Pattern

Load based on context:

• Installing Nuxt UI? → references/installation.md
• Customizing theme? → references/theming.md
• Component index → references/components.md
• Specific component → components/button.md, components/modal.md, etc.
• Building forms? → references/forms.md
• Using overlays? → references/overlays.md
• Using composables? → references/composables.md

DO NOT read all files at once. Load based on context.

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

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  css: ['~/assets/css/main.css']
})

/* assets/css/main.css */
@import 'tailwindcss';
@import '@nuxt/ui';

<!-- app.vue - UApp wrapper required -->
<template>
  <UApp>
    <NuxtPage />
  </UApp>
</template>

Resources

• Nuxt UI Docs
• Component Reference
• Theme Customization

---

Token efficiency: Main skill ~300 tokens, each sub-file ~800-1200 tokens