快速上手 (React)

安装

# pnpm
pnpm add @airo-ui/react

# npm
npm install @airo-ui/react

全量引入

// 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>
)

按需引入

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

Vite / Webpack 5 等现代打包工具默认支持 Tree-shaking，未使用组件不会进入产物。

在组件中使用

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

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

使用 Toast

Toast 需要通过 Provider 包裹：

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

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

function YourComponent() {
  const { showToast } = useToast()
  return (
    <button onClick={() => showToast('操作成功', 'success')}>
      显示提示
    </button>
  )
}

主题定制

在项目全局 CSS 中覆盖 CSS 变量即可完成品牌色替换：

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

完整 Token 列表见 设计 Token。