Quick Start

Installation

# pnpm
pnpm add @airo-ui/vue

# npm
npm install @airo-ui/vue

Full Import

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

import App from './App.vue'

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

On-Demand Import

import { AButton, AInput, ACheckbox } from '@airo-ui/vue'
import '@airo-ui/vue/dist/style.css'

Modern bundlers like Vite and Webpack 5 support Tree-shaking out of the box — unused components are excluded from the final bundle.

Usage in Templates

<template>
  <AButton variant="primary" @click="onClick">Click me</AButton>
</template>

<script setup lang="ts">
function onClick() {
  console.log('clicked')
}
</script>

Theme Customization

Override CSS variables in your global stylesheet to replace brand colors:

:root {
  --color-accent: #E85D3A;
  --color-accent-light: #F09070;
  --color-accent-subtle: rgba(232, 93, 58, 0.12);
}

See the full token list in Design Tokens.