AI-first design system - accessible, LLM-optimized components for React
npm install @outpacesoftware/systemsAn AI-first design system with opinionated, accessible, LLM-optimized components for React.
- Opinionated - Beautiful dark-theme styling out of the box
- Accessible - WAI-ARIA patterns built in
- AI-First - Component manifests for LLM consumption via MCP
- Composable - Small building blocks that compose into complex UIs
- Two Layers - Styled components for quick use, primitives for customization
``bash`
npm install @outpacesoftware/systemsor
pnpm add @outpacesoftware/systems
`tsx
import { Button, Input, Dialog, Badge } from '@outpacesoftware/systems';
// Ready to use with built-in styling
placeholder="you@example.com"
required
/>
`
`tsx
import { Primitives } from '@outpacesoftware/systems';
// Unstyled primitives for full control
Click me
// Composition pattern for complex components
`
| Component | Description |
|-----------|-------------|
| Button | Primary interaction trigger with variants |
| Input | Text input with label and error states |
| Select | Dropdown selection |
| Textarea | Multi-line text input |
| Checkbox | Boolean selection |
| Switch | Toggle on/off |
| Badge | Status indicators |
| Card | Content containers |
| Dialog | Modal dialogs |
32 primitives including Dialog, Menu, Tabs, Tooltip, Popover, Toast, and more.
This design system is optimized for AI consumption. Each component includes a manifest with:
- Semantic description
- Props documentation
- Accessibility information
- Code examples
Query the API:
`bash``
GET /api/design-system/query?semantic=show+status
GET /api/design-system/query?name=Button&format=llm
GET /api/design-system/manifest
- React 18+
- React DOM 18+
MIT