Quick Start (React)

Installation

# pnpm
pnpm add @airo-ui/react

# npm
npm install @airo-ui/react

Full Import

// main.tsx
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import '@airo-ui/react/style.css'

import App from './App'

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <App />
  </StrictMode>
)

Tree Shaking

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

Modern bundlers (Vite, Webpack 5) support tree-shaking by default. Unused components are excluded from the final bundle.

Usage

import { Button } from '@airo-ui/react'

function App() {
  return (
    <Button variant="primary" onClick={() => console.log('clicked')}>
      Click Me
    </Button>
  )
}

Toast (Context)

Toast requires a Provider wrapper:

import { ToastProvider, useToast } from '@airo-ui/react'

function App() {
  return (
    <ToastProvider>
      <YourComponent />
    </ToastProvider>
  )
}

function YourComponent() {
  const { showToast } = useToast()
  return (
    <button onClick={() => showToast('Success', 'success')}>
      Show Toast
    </button>
  )
}

Theme Customization

Override CSS variables in your global stylesheet:

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

See Design Tokens for the full token list.