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

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

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