直观的
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 和多方向支持（从左到右/从右到左）完美兼容。
前往轻松定制字体
轻松定制字体
通过一流的 @nuxt/fonts 集成，实现性能优化的字体。
前往大型图标集
大型图标集
可访问来自 Iconify 的 20 多万个可定制图标，与 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>