直观的
Vue UI 库
一个功能全面的 Vue UI 组件库（可选择用于 Nuxt），包含 125 个以上无障碍访问的 Tailwind CSS 组件，用于构建现代 Web 应用程序。适用于 Nuxt 及原生 Vue 应用（Vite、Inertia、SSR）。
...[同理翻译各组件名，例如面包屑、按钮、日历、卡片、轮播图、版本记录、聊天消息等]...
...[同理翻译各组件名，例如面包屑、按钮、日历、卡片、轮播图、版本记录、聊天消息等]...
...[同理翻译各组件名，例如面包屑、按钮、日历、卡片、轮播图、版本记录、聊天消息等]...
...[同理翻译各组件名，例如面包屑、按钮、日历、卡片、轮播图、版本记录、聊天消息等]...
- 前往“构建面向现代 Web”
构建面向现代 Web
一个由 Tailwind CSS 和 Reka UI 提供支持的完整设计系统，兼顾高性能与无障碍访问。
- 前往“大型图标集”
大型图标集
通过 @nuxt/icon 访问 Iconify 提供的超过 200,000 个可自定义图标。
- 前往“轻松定制字体”
轻松定制字体
性能优化的字体，提供一流的 @nuxt/fonts 集成。
- 前往“浅色与深色模式”
浅色与深色模式
集成了 @nuxtjs/color-mode 模块，组件原生支持深色模式。
- 前往“国际化 (i18n)”
国际化 (i18n)
支持 50 多种语言，与 i18n 完美契合，并支持多方向排版 (LTR/RTL)。
- 前往“精美排版”
精美排版
与 @nuxt/content 集成，提供精美的排版和一致的组件样式。
灵活的设计系统
利用 Nuxt UI 以 CSS 为优先的设计系统，结合 Tailwind CSS、语义化色彩体系及运行时配置，助您更快完成开发。
- 以 CSS 为优先的配置使用 @theme 指令直接在 CSS 中定义字体、颜色和断点。这使得您的主题具有可移植性、易维护且易于定制。
- 语义化色彩系统配置 7 个语义颜色别名（主色、辅助色、成功、信息、警告、错误、中性），用于描述颜色的用途而非具体数值。
- 运行时颜色配置无需重新构建应用，即可通过 AppConfig 在运行时更改颜色、图标等，非常适合多租户应用或动态主题切换。
@import "tailwindcss";
@import "@nuxt/ui";
@theme static {
--font-sans: 'Public Sans', system-ui, sans-serif;
--color-brand-50: #f0f9ff;
--color-brand-100: #e0f2fe;
--color-brand-200: #bae6fd;
--color-brand-300: #7dd3fc;
--color-brand-400: #38bdf8;
--color-brand-500: #3b82f6;
--color-brand-600: #2563eb;
--color-brand-700: #1d4ed8;
--color-brand-800: #1e40af;
--color-brand-900: #1e3a8a;
--color-brand-950: #172554;
}
export default defineAppConfig({
ui: {
colors: {
primary: 'brand',
secondary: 'purple',
success: 'green',
info: 'blue',
warning: 'yellow',
error: 'red',
neutral: 'zinc'
},
icons: {
loading: 'i-lucide-loader-circle',
search: 'i-lucide-search',
menu: 'i-lucide-menu'
}
}
})
一致的设计令牌 (Design Tokens)
使用 CSS 变量作为设计令牌，结合语义化工具类，确保主题的一致性，并能自动适配浅色和深色模式。
- 语义化颜色工具类使用如 text-primary、bg-success 或 border-error 等工具类，它们可通过 CSS 变量自动适配浅色和深色模式。
- 文本和背景令牌提供完整的文本（text-dimmed, text-muted, text-highlighted）、背景（bg-default, bg-elevated, bg-accented）及边框工具类集合。
- 全局布局变量使用 --ui-radius 定义圆角、--ui-container 定义布局宽度、--ui-header-height 实现一致的间距，从而定制全局样式。
@import "tailwindcss";
@import "@nuxt/ui";
:root {
--ui-primary: black;
--ui-radius: 0.5rem;
--ui-container: var(--container-5xl);
--ui-header-height: --spacing(24);
}
.dark {
--ui-primary: white;
--ui-bg: var(--ui-color-neutral-950);
}
<template>
<div class="bg-default border border-default rounded-lg p-4">
<span class="text-primary">Primary text</span>
<span class="text-dimmed">Dimmed text</span>
<div class="bg-elevated p-3 rounded-md mt-2">
<span class="text-muted">Elevated background</span>
</div>
</div>
</template>
根据需求定制组件
使用 Tailwind Variants API 结合插槽 (slots)、变体 (variants) 和复合变体，实现强大的组件主题化及智能类名合并。
- Tailwind Variants API组件使用插槽实现灵活样式，使用变体实现基于属性的样式，使用复合变体实现复杂的条件样式，并支持智能类名合并。
- 全局主题配置在 app.config.ts 中利用插槽、变体、复合变体和默认变体全局覆盖组件主题，确保应用内样式统一。
- 组件级自定义通过 ui 属性微调特定组件的插槽样式，使用 class 属性覆盖根元素，提供最大程度的灵活性。
export default defineAppConfig({
ui: {
button: {
slots: {
base: 'font-bold'
},
variants: {
size: {
md: {
base: 'px-4 py-2 text-sm'
}
}
},
defaultVariants: {
color: 'neutral'
}
}
}
})
<template>
<UButton
label="Button"
size="md"
variant="outline"
trailing-icon="i-lucide-chevron-right"
:ui="{
trailingIcon: 'rotate-90'
}"
class="rounded-full"
/>
</template>
使用生产就绪模板加速交付
从我们完全响应式、可访问且易于定制的模板开始，助您快速、轻松地启动项目。
- 生产就绪的模板所有模板均基于最佳实践构建，已进行 SEO 优化和性能调优，只需极简配置即可立即部署至生产环境。
- 支持 Nuxt 和 Vue为 Nuxt 和 Vue 应用提供专属模板，并针对不同框架进行了特定优化，选择最符合您项目需求的一个即可。
- 完全可定制构建于 Nuxt UI 组件之上，拥有完全的源码访问权限，轻松自定义颜色、字体、布局和组件以匹配您的品牌标识。
加入 Nuxt UI 社区
加入我们蓬勃发展的开源社区，贡献代码、报告问题、建议功能或协助文档工作。每一次贡献都让 Nuxt UI 对生态系统中的每一个人变得更好。