# Arcade Design System

Published as [`@arcadeai/design-system`](https://www.npmjs.com/package/@arcadeai/design-system) — 100+ accessible React components built on Base UI with Tailwind CSS.

## Usage

```bash
npm install @arcadeai/design-system
```

Import styles at your app root:

```css
@import "@arcadeai/design-system/index.css";
```

Then use components:

```tsx
import { Button, Card, Input } from "@arcadeai/design-system";
```

## shadcn Registry

The design system is also available as a [shadcn registry](https://ui.shadcn.com/docs/registry). Add the registry to your `components.json`:

```json
{
  "registries": {
    "@arcadeai": "https://ds.arcade.dev/r/{name}.json"
  }
}
```

Then install components:

```bash
npx shadcn@latest add @arcadeai/arcadeai-theme
npx shadcn@latest add @arcadeai/button
```

## Development

```bash
make help      # see all available commands
make install   # install dependencies
make dev       # start Storybook dev server (headless)
make run       # start Storybook (opens browser)
make build     # build the library
make check     # lint + type-check
```

## Contributing

### Adding Icons

1. Place SVG in `lib/assets/icons/`
2. Run `bun run generate-icons`
3. Import from `@arcadeai/design-system/components/ui/atoms/icons`

### Adding Toolkits

Add entries to `lib/metadata/toolkits.ts` — see existing entries for the pattern.

### Adding OAuth Providers

Add entries to `lib/metadata/oauth-providers.ts` — see existing entries for the pattern.