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.3.0 (December 2025)

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, prefix, tree-shaking

references/theming.md Semantic colors, CSS variables, app.config.ts, Tailwind Variants

references/components.md Component index by category (125+ 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