直观的
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 为核心的配置
使用 @theme 指令在 CSS 中直接定义字体、颜色和断点。这使得您的主题具有可移植性、易维护且易于自定义。
语义化颜色系统
配置 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）和复合变体（compound 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>