直观的
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>