Airo UI轻盈如空气的 Vue 3 / React 组件库
流畅弹性动画 · 克制配色系统 · 现代简约视觉
Skip to content
FEATURES
为什么选择 Airo
从设计 Token 到组件实现，从类型系统到无障碍支持 —— 每一个细节都经过反复打磨。
轻盈呼吸
中性色骨架配单一强调色，大量留白构筑节奏。简约不是删减，而是让每个元素自由呼吸。
:root {
--color-accent: #9ebbde;
--color-neutral-50: #FAFAFA;
--space-4: 16px;
}弹性动画
全场景 spring 缓动曲线，Checkbox 弹跳、Switch 滑入。拒绝死板的 ease-in-out。
--ease-spring: cubic-bezier(
0.34, 1.56, 0.64, 1
);一行换肤
全部设计 Token 以 CSS 变量暴露，覆盖一行即可完成品牌色替换，无需 fork 源码。
:root {
--color-accent: #34C796;
}按需引入
ESM 模块化打包，Tree-shaking 友好。只用 Switch？只打包 Switch。
import { ASwitch } from '@airo-ui/vue'
// 仅 ASwitch 被打包，其余组件自动剔除完整类型
100% TypeScript 覆盖，Props / Emits / Slots 全量类型导出，IDE 提示丝滑顺手。
interface SelectProps {
modelValue?: string | number | null
options?: SelectOption[]
clearable?: boolean
}无障碍优先
WCAG 2.1 AA 级，响应 prefers-reduced-motion，键盘可达、屏幕阅读器友好。
<button
role="switch"
aria-checked="true"
tabindex="0"
>TRY IT · 试试看
一眼感受 Airo 的动效质感
每一次切换、拖动、点击都遵循统一的 spring 曲线 —— 安静、跟手、不喧宾夺主。
通知
自动保存
多选
单选
音量
主题
视图
标签
进度
45%
输入
提示
分页