@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

# 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:

# 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:

# 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

# 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:

npx @frontic/ui mcp

Options:

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

search — Search the registry

# Search all components
npx @frontic/ui search

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

view — View component details

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. We're grateful for the work of the shadcn-vue team and community.

Development

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

License

MIT