Architecture Overview

Static UI is a multi-framework UI component library built on a modular, Turborepo-based monorepo.

Core Principles

• Source of Truth: All components are defined once in packages/ui using React.
• Code Generation: The registry and core packages generate framework-specific output.
• Copy-Paste: Components are designed to be copied into consumer projects, not installed as runtime dependencies.
• Unstyled & Accessible: Built on @base-ui/react for accessible, unstyled primitives.

Package Architecture

static-ui/
├── packages/
│   ├── ui/          # React component source of truth
│   ├── cli/         # CLI tool (init, add, theme commands)
│   ├── core/        # Schemas and code generators
│   ├── registry/    # Component registry for distribution
│   └── themes/      # Theme definitions (CSS variables)
├── apps/
│   ├── www/         # Documentation website
│   └── storybook/   # Component development environment
└── e2e/             # Playwright end-to-end tests

Data Flow

1. Components are authored in packages/ui/src
2. Registry metadata is defined in packages/registry/registry.json
3. Build script reads UI source + metadata to produce dist/index.json
4. CLI fetches registry and installs components into consumer projects
5. Consumer projects use components with framework-specific adapters