AOUI — Minimal React Component Library (WIP) ✨

Overview 🚀

Soft, simple, and calm. AOUI is a public, open-source showcase of a minimalist component library — focused on design clarity, accessibility, and a consistent visual language. Think: rounded corners, soft color accents, and zero visual noise.

• A design-driven reference of a tiny UI kit, not a heavy framework
• A live catalog of components and the tokens behind them
• Portable ideas: tokens + simple components = consistent UIs

Quick Start 🏁

• Install: pnpm install
• Develop: pnpm dev (or npm run dev)
• Format: pnpm run format
• Build: pnpm build
• Preview: pnpm preview

Project Structure 🧱

src/
  styles/
    tokens.css          # Design tokens (colors, spacing, radii, typography, transitions)
    base.css            # Global reset and typography only
  layout/
    Layout.module.css   # App shell (sidebar + content)
    Page.tsx            # Reusable page wrapper (title/description)
    Page.module.css
    Section.tsx         # Wrapper for demo sections (component-section)
    docs.css            # Demo helpers (component-section, component-grid)
  components/
    Button/
      Button.tsx
      Button.module.css
    ... (Card, Input, Textarea, Checkbox, Radio, Chip, Spinner, Alert, Select, Slider, Table, Tooltip)
    Menu/
      Menu.tsx
      Menu.module.css
  pages/
    ThemePage.tsx       # Tables of tokens (colors, spacing, radii, typography, transitions)
    ButtonPage.tsx
    ...
  router/
    routes.tsx          # Central route definitions
  App.tsx               # Shell layout (aside + content) + useRoutes(routes)
  main.tsx

Components 🧩

• Button: Variants (primary, secondary, tertiary), icon-only
• Card: Content container
• Input / Textarea: Labels, placeholders, states
• Checkbox / Radio: Custom indicators; keyboard/focusable
• Chip: Rounded label
• Spinner: Loading indicator
• Alert: success | error | info | warning
• Select: Controlled/uncontrolled, keyboard + ARIA, lucide ChevronDown
• Slider: Controlled; custom track/progress; vertically centered thumb
• Table: Minimal, borderless (Theme tables use fixed 3 equal columns)
• Tooltip: Hover/focus hint wrapper

Styling & Theming 🎨

• Tokens in src/styles/tokens.css (edit once; reflected app-wide)
• Global base styles in src/styles/base.css (reset/typography only)
• Component styles use CSS Modules; no global component CSS
• Theme page showcases every token using tables

Create New Components 🛠️

1. Create src/components/YourComponent/YourComponent.tsx and .module.css
2. Add a demo page src/pages/YourComponentPage.tsx using Page + Section
3. Register route in src/router/routes.tsx
4. Add a link in src/components/Menu/Menu.tsx
5. Use tokens and ensure focus/ARIA for accessibility

Notes 🙌

• The project intentionally avoids global UI frameworks
• If you prefer, tokens.css can be renamed to theme.css and imports updated