Airo UIA Vue 3 & React component library as light as air
Fluid spring animations · Restrained color system · Modern minimal design
Skip to content
FEATURES
Why Airo
From design tokens to component implementation, from type system to accessibility — every detail has been refined through iteration.
Light as Air
Neutral color skeleton with a single accent color, generous whitespace builds rhythm. Minimalism isn't about removing — it's about letting every element breathe freely.
:root {
--color-accent: #9ebbde;
--color-neutral-50: #FAFAFA;
--space-4: 16px;
}Spring Animations
Spring easing curves throughout — Checkbox bounce, Switch slide-in. No rigid ease-in-out.
--ease-spring: cubic-bezier(
0.34, 1.56, 0.64, 1
);One-Line Theming
All design tokens exposed as CSS variables. Override a single line to rebrand — no forking required.
:root {
--color-accent: #34C796;
}Tree-Shakable
ESM modular build with full Tree-shaking support. Only need Switch? Only Switch gets bundled.
import { ASwitch } from '@airo-ui/vue'
// Only ASwitch is bundled, rest are tree-shakenFull Type Coverage
100% TypeScript with full type exports for Props, Emits, and Slots. Silky smooth IDE autocompletion.
interface SelectProps {
modelValue?: string | number | null
options?: SelectOption[]
clearable?: boolean
}Accessibility First
WCAG 2.1 AA compliant, respects prefers-reduced-motion, keyboard-navigable and screen-reader friendly.
<button
role="switch"
aria-checked="true"
tabindex="0"
>TRY IT
Experience the feel of Airo
Every toggle, drag, and click follows a unified spring curve — quiet, responsive, never intrusive.
Notify
Auto Save
Choices
Select
Volume
Theme
View
Tags
Progress
45%
Input
Tooltip
Pages