# Sage Design Engine (SDE)

> 100 accessible React components built on Radix UI + Tailwind CSS.
> Three themes (Studio, Terra, Volt) with light/dark modes.
> User-controlled motion system (0-10 scale).
> TypeScript strict mode. MIT license.

## Install

```
pnpm add @thesage/ui
```

## Quick Start

```tsx
import { ThemeProvider, TooltipProvider } from '@thesage/ui/providers'
import { Button, Card, Input } from '@thesage/ui'
import '@thesage/ui/globals.css'
```

## Docs
- Overview: https://thesage.dev/docs/overview
- Components: https://thesage.dev/docs/components
- Design Tokens: https://thesage.dev/docs/tokens
- Themes: https://thesage.dev/docs/themes
- Motion: https://thesage.dev/docs/motion

## Full Component API Reference
- https://thesage.dev/llms-full.txt
- JSON API: https://thesage.dev/docs/api.json

## MCP Server (for AI Assistants)
- Package: @thesage/mcp (v0.8.0, 8 tools)
- Tools: list_components, search_components, get_component, install_component, get_app_shell, get_examples, get_audit_checklist, eject_component
- Config: `{ "mcpServers": { "sds": { "command": "npx", "args": ["@thesage/mcp"] } } }`
- Discovery: https://thesage.dev/.well-known/mcp-server.json

## Eject (Full Customization)

Copy any component's source into your project with imports rewritten:

```bash
npx @thesage/ui eject Button              # eject to src/components/ui/
npx @thesage/ui eject Dialog --dir my/dir  # custom target
npx @thesage/ui eject --list               # list all components
```

Also available via:
- MCP tool: `eject_component` (returns transformed source code)
- Web UI: Eject button on every component page at thesage.dev
- API: `GET https://thesage.dev/api/eject/{ComponentName}` (JSON response)

## Resources
- GitHub: https://github.com/shalomormsby/sage-design-engine
- NPM: https://www.npmjs.com/package/@thesage/ui
- AGENTS.md: https://github.com/shalomormsby/sage-design-engine/blob/main/AGENTS.md