直观的
Vue UI 组件库

一个全面的 Vue UI 组件库（可选支持 Nuxt），包含 125+ 个无障碍、基于 Tailwind CSS 的组件，用于构建现代 Web 应用程序。支持 Nuxt 和纯 Vue 应用（Vite、Inertia、SSR）。

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

基于 Tailwind CSS 设计

默认样式精美，可覆盖任何你想要的样式。

通过 Reka UI 实现无障碍

开箱即用的强大无障碍支持。

TypeScript 类型安全

为所有组件提供自动补全和类型安全。

前往为现代 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 优先配置
直接在 CSS 中通过 @theme 指令定义字体、颜色和断点。这使你的主题具有可移植性、可维护性且易于自定义。
语义化颜色系统
配置 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'
    }
  }
})

一致的设计令牌

使用 CSS 变量作为设计令牌（Design Tokens），通过语义化工具类实现一致的主题化，并能自动适应亮色和暗色模式。

语义化颜色工具类
使用诸如 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 自定义一致的间距。

自定义 CSS 变量

@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>

根据需求量身定制组件

利用带有插槽（slots）、变体（variants）和复合变体（compound variants）的 Tailwind Variants API，实现强大的组件主题化及智能类名合并。

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>