Features

• Pencil Support — Built-in .pen design file with 91 reusable components. AI reads the design and generates React code directly.
• 60+ Components — From Form to Table, Modal to Masonry — a comprehensive toolkit for production interfaces.
• AI-Friendly — Ships with aeroly-mcp, an MCP Server that lets AI query component docs and APIs in real time while you code.
• Themeable — CSS Variables + ConfigProvider for runtime theme switching. Dark mode built-in.
• i18n Ready — Built-in English and Chinese locale packs, easily extensible.
• Lightweight — Tree-shakeable ESM exports, zero runtime CSS-in-JS. Less + CSS Variables keep the bundle lean.

Install

pnpm i aeroly lucide-react

Vite projects also need Less:

pnpm i -D less

Quick Start

import { Button, Input, ConfigProvider } from 'aeroly';

export default () => (
  <ConfigProvider>
    <Input placeholder="Enter something" />
    <Button type="primary">Submit</Button>
  </ConfigProvider>
);

No global CSS import needed — styles are injected automatically when your bundler processes the component Less files.

AI Workflow with Pencil

aeroly ships with an aeroly.pen design file containing all components as reusable design elements. In an IDE with Pencil MCP support:

1. Open aeroly.pen in your editor
2. Ask AI to design a page using the components
3. Iterate on the design visually
4. Ask AI to read the design and generate React code with aeroly

See the AI Workflow Guide for details.

Theming

import { ConfigProvider } from 'aeroly';

<ConfigProvider
  theme={{ 'primary-color': '#7c3aed' }}
  size="small"
>
  <App />
</ConfigProvider>

Toggle dark mode:

document.documentElement.setAttribute('data-theme', 'dark');

Internationalization

import { ConfigProvider, enUS, zhCN } from 'aeroly';

<ConfigProvider locale={enUS}>
  <App />
</ConfigProvider>

Mock Server

The server/ directory contains a local Koa server for testing file upload demos. To start it:

cd server && node index.js

This launches a mock backend on http://localhost:3001 that handles upload requests for the Upload component demos.

Links

• Documentation
• AI Workflow Guide
• GitHub

License

MIT