# 7onic CLI

> CLI for adding 7onic design system components to your project
> Source: https://7onic.design
> npm: https://www.npmjs.com/package/7onic

⚠️ **DO NOT GUESS** — CLI behavior + install procedures evolve with each version. For up-to-date documentation, always defer to the live pages:

- **CLI page (SSOT)**: https://7onic.design/components/cli
- **Install page**: https://7onic.design/components/installation
- **Tailwind CSS official**: https://tailwindcss.com/docs/installation

## Quick Start

```bash
npx 7onic init
npx 7onic add button card input
```

## Commands

### init

Initialize 7onic in your project (creates `7onic.json`, installs base dependencies, sets up CSS token imports and `cn()` utility).

```bash
npx 7onic init
npx 7onic init --tailwind v3 --yes    # Explicit v3, skip prompts
```

The exact init steps are version-sensitive — always defer to the CLI / install pages above.

**Requirements:**
- TypeScript project (tsconfig.json required)
- `@/` path alias — auto-configured for Vite; Next.js handles this automatically

### add

Add components to your project. Copies `.tsx` source files and installs required dependencies.

```bash
npx 7onic add <component...>   # Add specific components
npx 7onic add --all             # Add all 39 components
npx 7onic add button --yes      # Skip confirmation prompt
npx 7onic add card --overwrite  # Overwrite existing files
```

**Dependency resolution:**
- `add button` → copies button.tsx + button-group.tsx (auto-resolved)
- `add icon-button` → copies icon-button.tsx + button.tsx + button-group.tsx
- `add input` → copies input.tsx + field.tsx
- `add pie-chart` → copies chart.tsx (alias for chart)

**Chart aliases:** `bar-chart`, `line-chart`, `area-chart`, `pie-chart` all resolve to `chart`.

## Config: 7onic.json

```json
{
  "$schema": "https://7onic.design/schema/7onic.json",
  "tailwind": {
    "version": 3,
    "config": "tailwind.config.js",
    "css": "src/app/globals.css"
  },
  "aliases": {
    "components": "@/components/ui",
    "utils": "@/lib/utils"
  }
}
```

| Field | Description |
|-------|-------------|
| tailwind.version | 3 or 4 |
| tailwind.config | v3 only — Tailwind config file path |
| tailwind.css | Main CSS file for token imports |
| aliases.components | Where components are copied to |
| aliases.utils | Where cn() utility lives |

## Available Components (39)

accordion, alert, avatar, badge, breadcrumb, button, button-group, card, chat-input, chat-message, chart, checkbox, divider, drawer, dropdown, icon-button, input, metric-card, modal, navigation-menu, pagination, popover, progress, quick-reply, radio-group, segmented, select, skeleton, slider, spinner, switch, table, tabs, textarea, toast, toggle, toggle-group, tooltip, typing-indicator

## Post-install Setup

- **toast**: Add `<Toaster />` to root layout
- **tooltip**: Wrap app with `<TooltipProvider>`

## Notes

- TypeScript only (.tsx output)
- Components use `cn()` from `@/lib/utils` (configurable)
- All components are in a flat directory (no nested imports)
- Existing files are skipped by default (use `--overwrite` to replace)
