直观的
Vue UI 库

使用 Vue 或 Nuxt 快速创建美观、响应式且易于访问的 Web 应用。Nuxt UI 是一个开源 UI 库，包含 100 多个使用 Tailwind CSS 和 Reka UI 构建的可定制组件。

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

使用 Tailwind CSS 样式化

默认样式精美，可以根据需要覆盖任何样式。

使用 Reka UI 辅助功能

开箱即用的强大辅助功能。

使用 TypeScript 类型安全

所有组件的自动完成和类型安全。

转到现代网络构建
现代网络构建
由 Tailwind CSS 和 Reka UI 提供支持，实现卓越性能和辅助功能。
转到大图标集
大图标集
通过 @nuxt/icon 访问 Iconify 提供的 200,000 多个可自定义图标。
转到轻松字体定制
轻松字体定制
通过一流的 @nuxt/fonts 集成优化性能字体。
转到亮色和暗色模式
亮色和暗色模式
通过 @nuxtjs/color-mode 模块集成，组件支持暗色模式。
转到国际化 (i18n)
国际化 (i18n)
已翻译成 50 多种语言，支持 i18n 和多方向（从左到右/从右到左）。
转到美观的排版
美观的排版
与 @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 的插槽、变体和复合变体，通过智能类合并实现强大的组件主题化。

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>