popey/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 | 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 |

Loading Files

Consider loading these reference files based on your task:

• [ ] references/installation.md - if installing or configuring @nuxt/ui
• [ ] references/theming.md - if customizing theme, colors, or Tailwind Variants
• [ ] references/components.md - if browsing component index or finding components by category
• [ ] references/forms.md - if building forms with validation (Zod/Valibot)
• [ ] references/overlays.md - if using Toast, Modal, Slideover, Drawer, or CommandPalette
• [ ] 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

// 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