# Nuxt UI v4 基于 Reka UI（无头）+ Tailwind CSS v4 + Tailwind 变体构建的 Vue 3 和 Nuxt 4+ 组件库。 **当前稳定版本：** v4.4.0（2026 年 1 月） ## 何时使用 * 安装/配置@nuxt/ui * 使用UI组件（Button、Card、Table、Form等） * 自定义主题（颜色、变体、CSS 变量） * 构建带有验证的表单 * 使用覆盖层（Modal、Toast、CommandPalette） * 使用可组合项（useToast、useOverlay） **对于 Vue 组件模式：** 使用 `vue` 技能 **对于 Nuxt 路由/服务器：** 使用 `nuxt` 技能 ## 可用的指导文件|主题 ---|--- **[references/installation.md]()** | Nuxt/Vue 设置、pnpm 陷阱、UApp 包装器、模块选项、前缀、tree-shaking **[references/theming.md]()** |语义颜色、CSS 变量、app.config.ts、Tailwind 变体 **[references/components.md]()** |按类别划分的组件索引（超过 125 个组件） **组件/*.md** |每个组件的详细信息（button.md、modal.md 等） **[references/forms.md]()** |表单组件、验证（Zod/Valibot）、useFormField **[references/overlays.md]()** | Toast、模态、幻灯片、抽屉、CommandPalette **[references/composables.md]()** | useToast、useOverlay、defineShortcuts、useScrollspy ## 加载文件 **考虑根据您的任务加载这些参考文件：** * [references/installation.md]() \- 如果安装或配置 @nuxt/ui * [references/theming.md]() \- 如果自定义主题、颜色或 Tailwind 变体 * [references/components.md]() \- 如果浏览组件索引或按类别查找组件 * [references/forms.md]() \- 如果构建带有验证的表单 (Zod/Valibot) * [references/overlays.md]() \- 如果使用 Toast、Modal、Slideover、Drawer 或 CommandPalette * [references/composables.md]() \- 如果使用 useToast、useOverlay 或其他可组合项 **不要一次加载所有文件。** 仅加载与当前任务相关的内容。 ## 关键概念概念 |描述 ---|--- U应用 | Toast、工具提示、叠加层所需的包装组件顺风变种 |具有插槽、变体、复合变体的类型安全样式语义颜色 |主要、次要、成功、错误、警告、信息、中性雷卡用户界面 |无头组件原语（内置辅助功能） > 对于无头组件原语（API 详细信息、可访问性模式、asChild）：阅读 **reka-ui** 技能 ## 快速参考 // nuxt.config.ts 导出默认的defineNuxtConfig({ 模块：['@nuxt/ui']， css: ['~/assets/css/main.css'] }) /* 资产/css/main.css */ @import 'tailwindcss'; @import '@nuxt/ui'; <模板> ## 资源 * [Nuxt UI 文档]() * [组件参考]() * [主题定制]() ** ** _令牌效率：主技能~300令牌，每个子档~800-1200令牌_

努克斯特用户界面

包含技能