直观的
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 强大的、由 Tailwind CSS 驱动的 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'
    }
  }
})

一致的设计 Token

将 CSS 变量用作设计 Token，通过自动适应亮色和暗色模式的语义化工具类，实现一致的主题风格。

语义化颜色工具类
使用诸如 text-primary、bg-success 或 border-error 等工具类，它们会通过 CSS 变量自动适应亮色和暗色模式。
文本和背景 Token
一整套用于文本（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>