直观的
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 访问超过 200,000 个可自定义的 Iconify 图标。
前往“轻松定制字体”
轻松定制字体
经过性能优化的字体，提供一流的 @nuxt/fonts 集成。
前往“浅色与深色模式”
浅色与深色模式
支持深色模式的组件，与 @nuxtjs/color-mode 模块完美集成。
前往“国际化 (i18n)”
国际化 (i18n)
已翻译成 50 多种语言，与 i18n 兼容良好，并支持多方向布局 (LTR/RTL)。
前往“精美排版”
精美排版
与 @nuxt/content 集成，提供精美的排版和一致的组件样式。

灵活的设计系统

利用 Nuxt UI 基于 CSS 的优先设计系统，结合 Tailwind CSS 语义化颜色系统和运行时配置，构建速度更快。

CSS 优先配置
通过 CSS 中的 @theme 指令直接定义字体、颜色和断点。这使得您的主题具有可移植性、易于维护且易于自定义。
语义化颜色系统
配置 7 个语义颜色别名（primary, secondary, success, info, warning, error, neutral），用于描述颜色的用途而非具体数值。
运行时颜色配置
无需重建应用，即可通过 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 变量作为设计令牌，实现语义工具类的一致主题化，并可自动适应浅色和深色模式。

语义化颜色工具类
使用如 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>

根据需求定制组件

使用 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>