nuxt-ui
Use when building styled UI with @nuxt/ui v4 components (Button, Modal, Form, Table, etc.) - provides ready-to-use components with Tailwind Variants theming. Use vue skill for raw component patterns, reka-ui for headless primitives.
When & Why to Use This Skill
This Claude skill provides comprehensive guidance for building modern, accessible, and highly customizable user interfaces using Nuxt UI v4. It leverages Tailwind CSS v4 and Reka UI to streamline the development of responsive components like tables, forms, and overlays within Vue 3 and Nuxt 4+ applications, ensuring type-safe styling and optimal performance.
Use Cases
- Rapidly scaffolding complex UI components such as data tables, multi-step forms, and navigation elements with built-in accessibility.
- Implementing consistent design systems and custom themes using Tailwind Variants and semantic color configurations (primary, success, error, etc.).
- Building robust forms with integrated validation using Zod or Valibot and managing form states with useFormField.
- Managing application-wide overlays including modals, slide-overs, and toast notifications using dedicated composables like useToast and useOverlay.
- Configuring and optimizing Nuxt UI v4 installations, including module options, tree-shaking, and the required UApp wrapper setup.
| name | nuxt-ui |
|---|---|
| description | Use when building styled UI with @nuxt/ui v4 components (Button, Modal, Form, Table, etc.) - provides ready-to-use components with Tailwind Variants theming. Use vue skill for raw component patterns, reka-ui for headless primitives. |
| license | MIT |
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
Token efficiency: Main skill ~300 tokens, each sub-file ~800-1200 tokens