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 |
Loading Files
Consider loading these reference files based on your task:
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
Token efficiency: Main skill ~300 tokens, each sub-file ~800-1200 tokens
1---2name: nuxt-ui-43description: 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.4license: MIT5---67# Nuxt UI v489Component library for Vue 3 and Nuxt 4+ built on Reka UI (headless) + Tailwind CSS v4 + Tailwind Variants.1011**Current stable version:** v4.3.0 (December 2025)1213## When to Use1415- Installing/configuring @nuxt/ui16- Using UI components (Button, Card, Table, Form, etc.)17- Customizing theme (colors, variants, CSS variables)18- Building forms with validation19- Using overlays (Modal, Toast, CommandPalette)20- Working with composables (useToast, useOverlay)2122**For Vue component patterns:** use `vue` skill23**For Nuxt routing/server:** use `nuxt` skill2425## Available Guidance2627| File | Topics |28| ------------------------------------------------------------ | -------------------------------------------------------------------------------- |29| **[references/installation.md](references/installation.md)** | Nuxt/Vue setup, pnpm gotchas, UApp wrapper, module options, prefix, tree-shaking |30| **[references/theming.md](references/theming.md)** | Semantic colors, CSS variables, app.config.ts, Tailwind Variants |31| **[references/components.md](references/components.md)** | Component index by category (125+ components) |32| **components/\*.md** | Per-component details (button.md, modal.md, etc.) |33| **[references/forms.md](references/forms.md)** | Form components, validation (Zod/Valibot), useFormField |34| **[references/overlays.md](references/overlays.md)** | Toast, Modal, Slideover, Drawer, CommandPalette |35| **[references/composables.md](references/composables.md)** | useToast, useOverlay, defineShortcuts, useScrollspy |3637## Loading Files3839**Consider loading these reference files based on your task:**4041- [ ] [references/installation.md](references/installation.md) - if installing or configuring @nuxt/ui42- [ ] [references/theming.md](references/theming.md) - if customizing theme, colors, or Tailwind Variants43- [ ] [references/components.md](references/components.md) - if browsing component index or finding components by category44- [ ] [references/forms.md](references/forms.md) - if building forms with validation (Zod/Valibot)45- [ ] [references/overlays.md](references/overlays.md) - if using Toast, Modal, Slideover, Drawer, or CommandPalette46- [ ] [references/composables.md](references/composables.md) - if using useToast, useOverlay, or other composables4748**DO NOT load all files at once.** Load only what's relevant to your current task.4950## Key Concepts5152| Concept | Description |53| ----------------- | ---------------------------------------------------------- |54| UApp | Required wrapper component for Toast, Tooltip, overlays |55| Tailwind Variants | Type-safe styling with slots, variants, compoundVariants |56| Semantic Colors | primary, secondary, success, error, warning, info, neutral |57| Reka UI | Headless component primitives (accessibility built-in) |5859> For headless component primitives (API details, accessibility patterns, asChild): read the **reka-ui** skill6061## Quick Reference6263```ts64// nuxt.config.ts65export default defineNuxtConfig({66 modules: ['@nuxt/ui'],67 css: ['~/assets/css/main.css']68})69```7071```css72/* assets/css/main.css */73@import 'tailwindcss';74@import '@nuxt/ui';75```7677```vue78<!-- app.vue - UApp wrapper required -->79<template>80 <UApp>81 <NuxtPage />82 </UApp>83</template>84```8586## Resources8788- [Nuxt UI Docs](https://ui.nuxt.com)89- [Component Reference](https://ui.nuxt.com/components)90- [Theme Customization](https://ui.nuxt.com/getting-started/theme)9192---9394_Token efficiency: Main skill ~300 tokens, each sub-file ~800-1200 tokens_
majiayu000