nuxt-ui

Original：🇺🇸 English
Translated
1 scriptsChecked / no sensitive code detected

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.

9installs
Sourceonmax/nuxt-skills
Added on

NPX Install

npx skill4agent add onmax/nuxt-skills nuxt-ui

Tags

Translated version includes tags in frontmatter
nuxt-uivue3-componentstailwind-variantsui-themingnuxt4-integration

SKILL.md Content

View Translation Comparison →

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

FileTopics
references/installation.mdNuxt/Vue setup, pnpm gotchas, UApp wrapper, module options, prefix, tree-shaking
references/theming.mdSemantic colors, CSS variables, app.config.ts, Tailwind Variants
references/components.mdComponent index by category (125+ components)
components/*.mdPer-component details (button.md, modal.md, etc.)
references/forms.mdForm components, validation (Zod/Valibot), useFormField
references/overlays.mdToast, Modal, Slideover, Drawer, CommandPalette
references/composables.mduseToast, 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

ConceptDescription
UAppRequired wrapper component for Toast, Tooltip, overlays
Tailwind VariantsType-safe styling with slots, variants, compoundVariants
Semantic Colorsprimary, secondary, success, error, warning, info, neutral
Reka UIHeadless component primitives (accessibility built-in)
For headless component primitives (API details, accessibility patterns, asChild): read the reka-ui skill

Quick Reference

ts
// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  css: ['~/assets/css/main.css']
})
css
/* assets/css/main.css */
@import 'tailwindcss';
@import '@nuxt/ui';
vue
<!-- app.vue - UApp wrapper required -->
<template>
  <UApp>
    <NuxtPage />
  </UApp>
</template>

Resources

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