npm package: @frontic/ui
Description: CLI for adding Frontic UI components to your Vue project
Author: Frontic
Latest version: 0.10.8

# @frontic/ui

CLI for building Vue and Nuxt storefronts with Frontic UI — a design-system-driven component library with 67 components, 5 visual styles, and commerce-optimized color palettes.

## Installation

```bash
# Use directly with npx (recommended)
npx @frontic/ui init

# Or install globally
npm install -g @frontic/ui
```

## Commands

### `create` — Scaffold a new project

Create a new Vue/Nuxt project with Frontic UI pre-configured:

```bash
# Interactive — prompts for everything
npx @frontic/ui create

# With a preset
npx @frontic/ui create my-app --preset reka-vega

# Open the visual creator in the browser
npx @frontic/ui create --open

# Fully non-interactive
npx @frontic/ui create my-app --preset reka-maia --yes
```

Options:

- `--preset` — Use a predefined design system preset (reka-vega, reka-nova, reka-maia, reka-lyra, reka-mira)
- `--base` — Component library base (reka)
- `--style` — Visual style (vega, nova, maia, lyra, mira)
- `--base-color` — Base color (neutral, gray, zinc, stone, slate)
- `--icon-library` — Icon library (lucide, tabler, hugeicons, phosphor, remixicon)
- `--font` — Font (inter, figtree, jetbrains-mono, geist, geist-mono)
- `--color-palette` — Color palette (default, warm, cool, bold, monochrome, nature, ocean, sunset, berry)
- `--{token}-color` — Per-token color override (encoded OKLCH, e.g. `0.40_0.12_280:0.48_0.12_280`)
- `--open` — Open the visual creator at ui.frontic.com/create
- `--yes, -y` — Skip confirmation prompts

### `init` — Initialize in an existing project

Add Frontic UI to an existing Vue/Nuxt project:

```bash
# Interactive
npx @frontic/ui init

# With defaults
npx @frontic/ui init --defaults

# With specific options
npx @frontic/ui init --style maia --font figtree --icon-library hugeicons

# With color palette
npx @frontic/ui init --color-palette warm

# With per-token color overrides
npx @frontic/ui init --color-palette warm --buy-color 0.40_0.12_280:0.48_0.12_280
```

Options:

- `--style` — Visual style (vega, nova, maia, lyra, mira)
- `--base-color` — Base color (neutral, gray, zinc, stone, slate)
- `--base` — Component library base (reka)
- `--icon-library` — Icon library (lucide, tabler, hugeicons, phosphor, remixicon)
- `--font` — Font (inter, figtree, jetbrains-mono, geist, geist-mono)
- `--color-palette` — Color palette (default, warm, cool, bold, monochrome, nature, ocean, sunset, berry)
- `--{token}-color` — Per-token color override (encoded OKLCH light:dark)
- `--defaults, -d` — Use default config (nuxt, reka, vega, lucide, inter)
- `--force` — Force overwrite existing configuration
- `--yes, -y` — Skip confirmation prompts

### `add` — Install components

```bash
# Add single component
npx @frontic/ui add button

# Add multiple components
npx @frontic/ui add button dialog card

# Add all components
npx @frontic/ui add --all
```

Options:

- `--overwrite, -o` — Overwrite existing files
- `--all, -a` — Add all available components
- `--path, -p` — Custom installation path

### `mcp` — AI assistant integration

Configure MCP (Model Context Protocol) for AI assistants:

```bash
npx @frontic/ui mcp
```

Options:

- `--client` — Target client (claude, cursor, vscode, codex, opencode)

### `search` — Search the registry

```bash
# Search all components
npx @frontic/ui search

# Search with a query
npx @frontic/ui search -q button
```

### `view` — View component details

```bash
npx @frontic/ui view button
```

### Other commands

- `diff` — Check for updates against the Frontic UI registry
- `migrate` — Run codemods (icon library migration, RTL conversion)
- `info` — Print your Frontic UI project configuration
- `docs` — Open component documentation in the browser

## Design System

The CLI supports a full design system layer with interchangeable visual styles, fonts, icon libraries, and color palettes.

### Visual Styles

All visual styles use the same component API. Style differences are applied at install time:

| Style              | Effect                                  |
| ------------------ | --------------------------------------- |
| **Vega** (default) | Classic, balanced look                  |
| **Nova**           | Compact spacing                         |
| **Maia**           | Soft and rounded                        |
| **Lyra**           | Sharp and boxy                          |
| **Mira**           | Dense, smaller text and tighter spacing |

### Presets

Predefined combinations of style + icons + font:

| Preset      | Style | Icons     | Font           |
| ----------- | ----- | --------- | -------------- |
| `reka-vega` | Vega  | Lucide    | Inter          |
| `reka-nova` | Nova  | Hugeicons | Inter          |
| `reka-maia` | Maia  | Hugeicons | Figtree        |
| `reka-lyra` | Lyra  | Hugeicons | JetBrains Mono |
| `reka-mira` | Mira  | Hugeicons | Inter          |

### Fonts

- **inter** — Sans-serif (default)
- **figtree** — Sans-serif
- **geist** — Sans-serif
- **jetbrains-mono** — Monospace
- **geist-mono** — Monospace

### Icon Libraries

- **lucide** — lucide-vue-next (default)
- **tabler** — @tabler/icons-vue
- **hugeicons** — @hugeicons/vue + @hugeicons/core-free-icons
- **phosphor** — @phosphor-icons/vue
- **remixicon** — @remixicon/vue

### Color Palettes

9 built-in palettes with 10 semantic commerce tokens (buy, checkout, promo, discount, new, price, active, info, positive, warning). Use `--color-palette` to select a palette and `--{token}-color` to override individual tokens.

## Acknowledgments

Built on the foundation of [shadcn-vue](https://github.com/unovue/shadcn-vue). We're grateful for the work of the shadcn-vue team and community.

## Development

```bash
pnpm build     # Build
pnpm dev       # Watch mode
pnpm test      # Run tests
```

## License

MIT