直观的
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
组件使用插槽实现灵活的样式设置，使用变体（variants）实现基于 prop 的样式，使用复合变体（compound variants）实现复杂的条件样式，并带有智能的类合并。
全局主题配置
在 app.config.ts 中使用插槽、变体、复合变体和默认变体全局覆盖组件主题，以实现应用程序范围内的一致样式。
按组件定制
使用 `ui` prop 进行插槽特定的样式设置，以及 `class` prop 进行根元素覆盖，对单个组件进行微调，提供最大的灵活性。

自定义组件

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>