nuxt-ui

Name: nuxt-ui
Author: onmax

Styled UI component library for Vue 3 and Nuxt 4+ with 125+ components, form validation, and theme customization. Built on Reka UI headless primitives, Tailwind CSS v4, and Tailwind Variants for type-safe, accessible components Includes forms with Zod/Valibot validation, data tables with sorting, modals, toasts, drawers, and command palettes Semantic color system and CSS variable theming via app.config.ts for consistent design customization Composables like useToast, useOverlay, and defineShortcuts for managing overlays and interactions Requires UApp wrapper component for Toast, Tooltip, and overlay functionality

INSTALLATION

npx skills add https://github.com/onmax/nuxt-skills --skill nuxt-ui

Run in your project or agent environment. Adjust flags if your CLI version differs.

SKILL.md

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