Airo UI

轻盈如空气的 Vue 3 / React 组件库
Light as air — a Vue 3 & React component library

文档 · English Docs · 参与贡献

---

特性

• 流畅弹性动画 — 所有状态切换使用 spring 曲线，拒绝僵硬线性过渡
• 克制配色系统 — 中性色骨架 + 单一强调色，通过 CSS 变量完全可覆盖
• 4px 网格体系 — 间距严格遵循 --space-1 到 --space-12，实现视觉韵律
• TypeScript 优先 — 全量类型导出，IDE 智能提示
• 轻量级 — 按需引入，Tree-shaking 友好
• 国际化 — 内置中英文，支持扩展

安装

# Vue 3
npm install @airo-ui/vue
# 或
pnpm add @airo-ui/vue

# React
npm install @airo-ui/react
# 或
pnpm add @airo-ui/react

使用

Vue 3

import { createApp } from 'vue'
import AiroUI from '@airo-ui/vue'
import '@airo-ui/vue/dist/style.css'

const app = createApp(App)
app.use(AiroUI)
app.mount('#app')

React

import { Button, Switch, Slider } from '@airo-ui/react'
import '@airo-ui/react/style.css'

function App() {
  return (
    <div>
      <Button variant="primary">按钮</Button>
      <Switch checked={val} onChange={setVal} />
      <Slider value={volume} onChange={setVolume} />
    </div>
  )
}

在组件中使用：

<template>
  <AButton variant="primary">按钮</AButton>
  <ASwitch v-model="val" />
  <ASlider v-model="volume" />
</template>

在线体验

访问 文档站 首页的「试试看」区域，即可在线交互体验所有组件。点击顶部导航栏的调色盘图标可切换全局主题色。

组件列表

分类	组件
表单基础	Button, Input, Textarea, Checkbox, Radio, Switch, Select, Slider, Segmented
反馈与通知	Toast, Modal, Tooltip, Drawer, Progress, Skeleton
数据展示	Tag, Card, Badge, Tabs, Avatar, Divider, Pagination
复合组件	ChatInput, Search
桌面专题	DropdownMenu, Table, Tree

浏览器支持

所有现代浏览器（Chrome, Firefox, Safari, Edge 最近两个主版本）。

项目结构

airo-ui/
├── packages/
│   ├── core/          # 设计 Token、CSS 变量、通用样式
│   ├── vue/           # Vue 3 组件库
│   └── react/         # React 组件库
├── docs/              # VitePress 文档站
└── playground/        # 已弃用，功能合并至 docs

开发

# 安装依赖
pnpm install

# 启动文档站（开发模式）
pnpm dev

# 构建组件库
pnpm build

# 运行测试
pnpm test

设计原则

1. 流体弹簧动画 — 所有状态过渡使用 spring 缓动曲线
2. 克制即力量 — 中性色骨架 + 单一强调色，透明层级代替视觉噪音
3. 留白即设计 — 严格遵循 4px 网格
4. 细节皆可见 — 圆角、边框、字号经精细调校
5. 默认可覆盖 — 所有设计 Token 暴露为 CSS 变量

协议

MIT