直观的
Vue UI 库

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

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

使用 Tailwind CSS v4 样式化

默认样式美观，您可以覆盖任何您想要的样式。

使用 Reka UI 实现无障碍访问

开箱即用的强大可访问性。

使用 TypeScript 实现类型安全

所有组件均具有自动完成和类型安全。

为现代 Web 构建
由 Tailwind CSS v4 和 Reka UI 驱动，实现顶级性能和可访问性。
灵活的设计系统
默认美观，并且可以使用设计令牌轻松定制以适应您的品牌。
国际化 (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" theme(static);
@import "@nuxt/ui";

:root {
  --ui-radius: var(--radius-sm);
  --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 在项目范围内配置组件样式，该 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>