BreezeUI
  • 简体中文

    • 快速开始

    BreezeUI 是一个基于 Vue 3 的现代组件库，基于 Radix Vue 和 Tailwind CSS 构建。

    为什么选择 BreezeUI？

    轻量且高效

    • 核心库体积小，支持按需导入
    • 自动 Tree-shaking，只打包你使用的组件

    高度可定制

    • 基于 Tailwind CSS，样式完全可控
    • 支持主题变量自定义，深色模式开箱即用
    • 组件样式通过 props 灵活调整

    无障碍优先

    • 基于 Radix Vue，遵循 WAI-ARIA 设计规范
    • 内置键盘导航、焦点管理等无障碍支持

    TypeScript 原生

    • 全程 TypeScript 开发
    • 完整的类型提示，IDE 智能补全

    组件丰富

    70+ 精心设计的组件，覆盖从基础表单到复杂交互的各种场景。

    快速示例

    <script setup lang="ts">
import { ref } from 'vue'
import { BrButton, BrInput, BrCard, BrCardHeader, BrCardContent } from '@breezeui/vue'

const value = ref('')
</script>

<template>
  <BrCard class="w-80">
    <BrCardHeader>
      <h3>欢迎使用 BreezeUI</h3>
    </BrCardHeader>
    <BrCardContent>
      <BrInput v-model="value" placeholder="输入点什么..." class="mb-3" />
      <BrButton class="w-full">开始使用</BrButton>
    </BrCardContent>
  </BrCard>
</template>

    技术栈

    技术说明
    Vue 3渐进式 JavaScript 框架
    Radix Vue无障碍 UI 原语
    Tailwind CSSUtility-First CSS 框架
    TypeScriptJavaScript 超集

    下一步