直观的
Vue UI 库

使用 Vue 或 Nuxt 快速创建美观、响应式且无障碍的 Web 应用。Nuxt UI 是一个开源的 UI 库，包含 50 多个可定制组件，使用 Tailwind CSS 和 Reka UI 构建。

开始使用开始使用开始使用开始使用探索组件

使用 Tailwind CSS v4 进行样式设计

默认样式美观，可随意覆盖任何样式。

通过 Reka UI 实现无障碍访问

开箱即用的强大无障碍功能。

通过 TypeScript 实现类型安全

所有组件都支持自动补全和类型安全。

前往构建现代 Web
构建现代 Web
由 Tailwind CSS v4 和 Reka UI 提供支持，以实现最佳性能和无障碍性。
前往灵活的设计系统
灵活的设计系统
默认美观，并通过设计令牌轻松定制您的品牌风格。
前往国际化 (i18n)
国际化 (i18n)
Nuxt UI 已翻译成 30 多种语言，与 i18n 和多方向支持 (LTR/RTL) 良好兼容。
前往轻松字体定制
轻松字体定制
性能优化的字体，以及一流的 @nuxt/fonts 集成。
前往丰富的图标集
丰富的图标集
可通过 Iconify 访问超过 200,000 个可定制图标，与 Iconify 无缝集成。
前往明暗模式
明暗模式
支持黑暗模式的组件，与 @nuxtjs/color-mode 无缝集成。

灵活的设计系统

使用 Nuxt UI 全面的设计系统，更快地构建您的下一个项目。提供语义化颜色别名、全面的设计令牌以及对无障碍组件开箱即用的自动明暗模式支持。

通过 AppConfig 配置颜色别名
通过 AppConfig 在运行时配置 7 种语义化颜色别名（primary, secondary, success, info, warning, error, neutral），无需重新构建您的应用。
全面的设计令牌
提供丰富的文本、背景和边框中性调色板令牌，并通过 CSS 变量（如 --ui-text, --ui-bg, --ui-border）自动支持明暗模式。
全局样式变量
使用 --ui-radius 定制全局样式以保持边框圆角一致，使用 --ui-container 定制全局布局宽度。

定制设计系统

export default defineAppConfig({
  ui: {
    colors: {
      primary: 'indigo',
      secondary: 'pink',
      success: 'green',
      info: 'blue',
      warning: 'orange',
      error: 'red',
      neutral: 'zinc'
    }
  }
})

@import "tailwindcss";
@import "@nuxt/ui";

:root {
  --ui-radius: 0.25rem;
  --ui-container: 90rem;
  --ui-bg: var(--ui-color-neutral-50);
  --ui-text: var(--ui-color-neutral-900);
}
.dark {
  --ui-bg: var(--ui-color-neutral-950);
  --ui-border: var(--ui-color-neutral-900);
}

强大的组件定制能力

Nuxt UI 利用Tailwind Variants提供强大、易维护的系统，用于管理组件样式并智能合并 Tailwind CSS 类，避免冲突。

强大的插槽和变体系统
使用插槽定制组件部分，并根据 props 应用不同样式，从而创建一致的 UI 模式并实现对样式的精细控制。
通过 AppConfig 配置全局主题
通过集中的 AppConfig 在项目范围内配置组件样式，保持应用一致性，无需重新构建。
按组件定制
使用 ui prop 对特定插槽进行样式微调，使用 class prop 覆盖根元素样式，提供最大程度的灵活性。

定制组件

export default defineAppConfig({
  ui: {
    button: {
      slots: {
        base: 'group font-bold',
        trailingIcon: 'group-data-[state=open]:rotate-180 transition-transform duration-200'
      },
      defaultVariants: {
        color: 'neutral',
        variant: 'subtle'
      }
    }
  }
})

<template>
  <UCollapsible>
    <UButton
      label="Open"
      color="neutral"
      variant="subtle"
      trailing-icon="i-lucide-chevron-down"
      :ui="{
        trailingIcon: 'group-data-[state=open]:rotate-180 transition-transform duration-200'
      }"
        class="group font-bold"
      />
  </UCollapsible>
</template>