nuxt-ui

Name: nuxt-ui
Author: Onmax

Nuxt.jsNuxt UIVue.jsTailwind CSSUI ComponentsFront-end DevelopmentThemingComponent Library

⭐ 682🕒 2026-06-01Source ↗

Install this skill

npx skills add onmax/nuxt-skills

Works across Claude Code, Cursor, Codex, Copilot & Antigravity

Nuxt UI v4 provides a standardized, accessible component library tailored for the Nuxt 4 ecosystem. It functions by combining Reka UI primitives for headless accessibility with Tailwind CSS v4 styling and the Tailwind Variants engine for design consistency. Unlike general-purpose libraries, this tool integrates directly into the Nuxt module system, ensuring automatic tree-shaking and optimized asset delivery. Developers interact with pre-styled components that support semantic color tokens, allowing for rapid interface construction while maintaining full control over CSS variables. The system requires the UApp wrapper at the root of the application to manage portal-based overlays such as toasts and modals. It emphasizes type-safe configurations within app.config.ts, bridging the gap between highly custom design systems and rapid-prototyping requirements in modern Vue 3 web applications.

When to Use This Skill

•Building consistent design systems in Nuxt 4 applications
•Implementing accessible modals, tooltips, and toast notifications
•Standardizing form validation patterns with typed schema integration
•Applying global theme variations using semantic CSS variables

How to Invoke This Skill

Example prompts that trigger this skill in Claude Code, Cursor, or Antigravity:

“How do I set up Nuxt UI in my project?
“Show me how to customize theme colors in Nuxt UI
“How to implement a modal with Nuxt UI
“What is the role of UApp in Nuxt UI?
“How to use useToast composable for notifications

Pro Tips

💡Utilize `app.config.ts` for deep theme customization to maintain a clean separation from component logic and enable dynamic theme switching.
💡Combine `@nuxt/ui` with the `vue` skill to understand underlying component patterns when extending or creating custom components that align with `nuxt-ui`'s design system.
💡Leverage the provided composables like `useToast` or `useOverlay` to manage UI state efficiently and ensure a consistent, reactive user experience.

What this skill does

•Automatic component tree-shaking and module integration
•Tailwind Variants support for type-safe style overrides
•Built-in Reka UI primitives for accessible overlays
•Unified semantic color management via app.config.ts
•Integrated form validation utilities with Zod and Valibot support

When not to use it

✕Projects that do not use the Nuxt framework
✕Situations requiring purely unstyled headless components (use Reka UI directly instead)
✕Applications restricted from using Tailwind CSS v4

Example workflow

Add @nuxt/ui to your nuxt.config modules array
Import Tailwind directives into your primary CSS file
Wrap your application content with the UApp component
Configure brand colors and variants in app.config.ts
Utilize specific UI components like UButton or UTable in pages
Trigger overlays using composables like useToast or useOverlay

Prerequisites

–Nuxt 4+
–Tailwind CSS v4
–Vue 3

Pitfalls & limitations

!Forgetting to wrap the application in UApp breaks overlays
!Confusing Reka UI headless logic with Nuxt UI component styling
!Tailwind v4 CSS import requirements must be met to prevent missing styles

FAQ

Why is UApp required?

UApp provides the necessary context and portal injection points for overlays like Toasts, Tooltips, and Modals.

Can I use this with standard Tailwind CSS?

Yes, but it specifically expects Tailwind CSS v4 as the underlying styling engine.

How do I override default styles?

You should leverage Tailwind Variants defined within your app.config.ts or via component-level class overrides.

How it compares

Using Nuxt UI replaces manual creation of accessible primitives and redundant Tailwind class management, ensuring consistent design tokens compared to writing raw components from scratch.

Source & trust

⭐ 682 stars🕒 Updated 2026-06-01

View original skill on GitHub →

📄 Full skill instructions — original source: onmax/nuxt-skills

# 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](references/installation.md)** | Nuxt/Vue setup, pnpm gotchas, UApp wrapper, module options, prefix, tree-shaking |
| **[references/theming.md](references/theming.md)** | Semantic colors, CSS variables, app.config.ts, Tailwind Variants |
| **[references/components.md](references/components.md)** | Component index by category (125+ components) |
| **components/\*.md** | Per-component details (button.md, modal.md, etc.) |
| **[references/forms.md](references/forms.md)** | Form components, validation (Zod/Valibot), useFormField |
| **[references/overlays.md](references/overlays.md)** | Toast, Modal, Slideover, Drawer, CommandPalette |
| **[references/composables.md](references/composables.md)** | useToast, useOverlay, defineShortcuts, useScrollspy |

## Usage Pattern

**Load based on context:**

- Installing Nuxt UI? → [references/installation.md](references/installation.md)
- Customizing theme? → [references/theming.md](references/theming.md)
- Component index → [references/components.md](references/components.md)
- Specific component → [components/button.md](components/button.md), [components/modal.md](components/modal.md), etc.
- Building forms? → [references/forms.md](references/forms.md)
- Using overlays? → [references/overlays.md](references/overlays.md)
- Using composables? → [references/composables.md](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](https://ui.nuxt.com)
- [Component Reference](https://ui.nuxt.com/components)
- [Theme Customization](https://ui.nuxt.com/getting-started/theme)

---

_Token efficiency: Main skill ~300 tokens, each sub-file ~800-1200 tokens_

By Onmax

How to Use This Skill Unit

Option A: Project-Specific (Recommended)

Click "Download" above
In your project, create the directory: .agent/skills/nuxt-ui/
Save the file as SKILL.md
The agent will automatically discover the skill based on its description.

Option B: Global Installation (All Agents)

Save the file to these locations to make it available across all projects:

Claude Code: ~/.claude/skills/onmax/nuxt-skills/nuxt-ui/SKILL.md
Cursor: ~/.cursor/skills/onmax/nuxt-skills/nuxt-ui/SKILL.md
Antigravity: ~/.gemini/antigravity/skills/onmax/nuxt-skills/nuxt-ui/SKILL.md