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)

基于Reka UI（无头）+ Tailwind CSS v4 + Tailwind Variants构建的Vue 3和Nuxt 4+组件库。

**当前稳定版本：**v4.4.0（2026年1月）

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

安装/配置@nuxt/ui
使用UI组件（Button、Card、Table、Form等）
自定义主题（颜色、变体、CSS变量）
构建带验证的表单
使用覆盖层组件（Modal、Toast、CommandPalette）
使用组合式函数（useToast、useOverlay）

**如需Vue组件模式：**使用

vue

技能 **如需Nuxt路由/服务端相关：**使用

nuxt

技能

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

文件	主题
references/installation.md	Nuxt/Vue设置、pnpm注意事项、UApp包装器、模块选项、前缀、树摇优化
references/theming.md	语义化颜色、CSS变量、app.config.ts、Tailwind Variants
references/components.md	按类别划分的组件索引（125+个组件）
*components/.md**	单个组件详情（button.md、modal.md等）
references/forms.md	表单组件、验证（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.

请根据你的任务加载以下参考文件：

references/installation.md - 若你正在安装或配置@nuxt-ui
references/theming.md - 若你正在自定义主题、颜色或Tailwind Variants
references/components.md - 若你正在浏览组件索引或按类别查找组件
references/forms.md - 若你正在构建带验证的表单（Zod/Valibot）
references/overlays.md - 若你正在使用Toast、Modal、Slideover、Drawer或CommandPalette
references/composables.md - 若你正在使用useToast、useOverlay或其他组合式函数

**请勿一次性加载所有文件。**仅加载与当前任务相关的文件。

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

概念	描述
UApp	Toast、Tooltip、覆盖层所需的包装器组件
Tailwind Variants	支持插槽、变体、复合变体的类型安全样式方案
语义化颜色	primary、secondary、success、error、warning、info、neutral
Reka UI	无头组件原语（内置无障碍支持）

如需了解无头组件原语（API详情、无障碍模式、asChild）：请查看reka-ui技能

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>

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

Token效率：主技能约300 tokens，每个子文件约800-1200 tokens

nuxt-ui

Original

Translation

Nuxt UI v4

Nuxt UI v4

When to Use

使用场景

Available Guidance

可用指南

Loading Files

加载文件建议

Key Concepts

核心概念

Quick Reference

快速参考

Resources

资源