10.1k

CLI

PreviousNext

Use the @frontic/ui CLI to create projects, add components, and configure your design system.

create

Use the create command to scaffold a new Vue/Nuxt project with Frontic UI pre-configured.

pnpm dlx @frontic/ui create

You can also use a preset or the visual creator:

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

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

Options

Usage: frontic-ui create [options] [name]

Create a new project with Frontic UI

Arguments:
  name                              the name of the project

Options:
  --preset <preset>                 a preset to use (reka-vega, reka-nova, reka-maia, reka-lyra, reka-mira)
  --base <base>                     the component base (reka)
  --style <style>                   the visual style (vega, nova, maia, lyra, mira)
  -b, --base-color <base-color>     the base color (neutral, gray, zinc, stone, slate)
  --icon-library <icon-library>     the icon library (lucide, tabler, hugeicons, phosphor, remixicon)
  --font <font>                     the font (inter, figtree, jetbrains-mono, geist, geist-mono)
  --color-palette <palette>         the color palette (default, warm, cool, bold, monochrome, nature, ocean, sunset, berry)
  --buy-color <value>               buy color (encoded OKLCH light:dark)
  --checkout-color <value>          checkout color (encoded OKLCH light:dark)
  --promo-color <value>             promo color (encoded OKLCH light:dark)
  --discount-color <value>          discount color (encoded OKLCH light:dark)
  --new-color <value>               new color (encoded OKLCH light:dark)
  --price-color <value>             price color (encoded OKLCH light:dark)
  --active-color <value>            active color (encoded OKLCH light:dark)
  --info-color <value>              info color (encoded OKLCH light:dark)
  --positive-color <value>          positive color (encoded OKLCH light:dark)
  --warning-color <value>           warning color (encoded OKLCH light:dark)
  --theme-color <value>             custom primary theme color (encoded OKLCH light:dark)
  -y, --yes                         skip confirmation prompt (default: true)
  -d, --defaults                    use default configuration (default: false)
  -f, --force                       force overwrite of existing configuration (default: false)
  --open                            open the visual creator in the browser
  -s, --silent                      mute output (default: false)
  -c, --cwd <cwd>                   the working directory (default: current directory)
  -h, --help                        display help for command

init

Use the init command to initialize Frontic UI in an existing Vue/Nuxt project.

The init command installs dependencies, adds the cn util, configures CSS variables, and sets up your design system.

pnpm dlx @frontic/ui init

You can also pass design system options directly:

# With a preset
npx @frontic/ui init --preset reka-maia

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

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

Options

Usage: frontic-ui init [options] [components...]

Initialize Frontic UI in your Vue/Nuxt project

Arguments:
  components                        the components to add during init

Options:
  --preset <preset>                 a preset to use (reka-vega, reka-nova, reka-maia, reka-lyra, reka-mira)
  --base <base>                     the component base (reka)
  --style <style>                   the visual style (vega, nova, maia, lyra, mira)
  -b, --base-color <base-color>     the base color (neutral, gray, zinc, stone, slate)
  --icon-library <icon-library>     the icon library (lucide, tabler, hugeicons, phosphor, remixicon)
  --font <font>                     the font (inter, figtree, jetbrains-mono, geist, geist-mono)
  --color-palette <palette>         the color palette (default, warm, cool, bold, monochrome, nature, ocean, sunset, berry)
  --buy-color <value>               buy color (encoded OKLCH light:dark)
  --checkout-color <value>          checkout color (encoded OKLCH light:dark)
  --promo-color <value>             promo color (encoded OKLCH light:dark)
  --discount-color <value>          discount color (encoded OKLCH light:dark)
  --new-color <value>               new color (encoded OKLCH light:dark)
  --price-color <value>             price color (encoded OKLCH light:dark)
  --active-color <value>            active color (encoded OKLCH light:dark)
  --info-color <value>              info color (encoded OKLCH light:dark)
  --positive-color <value>          positive color (encoded OKLCH light:dark)
  --warning-color <value>           warning color (encoded OKLCH light:dark)
  --theme-color <value>             custom primary theme color (encoded OKLCH light:dark)
  -y, --yes                         skip confirmation prompt (default: true)
  -d, --defaults                    use default configuration (default: false)
  -f, --force                       force overwrite of existing configuration (default: false)
  -s, --silent                      mute output (default: false)
  -c, --cwd <cwd>                   the working directory (default: current directory)
  -h, --help                        display help for command

add

Use the add command to add components and dependencies to your project.

pnpm dlx @frontic/ui add [component]

You can also add multiple components at once or install all available components:

pnpm dlx @frontic/ui add button dialog card
pnpm dlx @frontic/ui add --all

Options

Usage: frontic-ui add [options] [components...]

Add components to your project

Arguments:
  components                        the components to add or a url to the component

Options:
  -y, --yes                         skip confirmation prompt (default: false)
  -o, --overwrite                   overwrite existing files (default: false)
  -a, --all                         add all available components (default: false)
  -p, --path <path>                 the path to add the component to
  -s, --silent                      mute output (default: false)
  -c, --cwd <cwd>                   the working directory (default: current directory)
  -h, --help                        display help for command

diff

Use the diff command to check for updates against the Frontic UI registry.

pnpm dlx @frontic/ui diff [component]

This compares your installed components with the latest versions in the registry and shows any differences.

Options

Usage: frontic-ui diff [options] [component]

Check for updates against the Frontic UI registry

Arguments:
  component                         the component name

Options:
  -y, --yes                         skip confirmation prompt (default: false)
  -c, --cwd <cwd>                   the working directory (default: current directory)
  -h, --help                        display help for command

mcp

Use the mcp command to configure the Frontic UI MCP server for your AI coding client.

pnpm dlx @frontic/ui mcp

This connects to the hosted MCP server by default — no local dependencies needed. See the MCP documentation for more details.

Options

Usage: frontic-ui mcp [options]

Configure the Frontic UI MCP server for your AI coding client

Options:
  --client <client>                 MCP client (claude, cursor, vscode, codex, opencode)
  -c, --cwd <cwd>                   the working directory (default: current directory)
  -h, --help                        display help for command

search

Use the search command to search components from the Frontic UI registry.

pnpm dlx @frontic/ui search
pnpm dlx @frontic/ui search -q button

Options

Usage: frontic-ui search [options]

Search components from the Frontic UI registry

Options:
  -q, --query <query>               query string
  -l, --limit <number>              maximum number of items to display (default: "100")
  -o, --offset <number>             number of items to skip (default: "0")
  -c, --cwd <cwd>                   the working directory (default: current directory)
  -h, --help                        display help for command

view

Use the view command to view detailed information about items from the Frontic UI registry.

pnpm dlx @frontic/ui view button
pnpm dlx @frontic/ui view button dialog card

Options

Usage: frontic-ui view [options] <items...>

View items from the Frontic UI registry

Arguments:
  items                             the item names or URLs to view

Options:
  -c, --cwd <cwd>                   the working directory (default: current directory)
  -h, --help                        display help for command

migrate

Use the migrate command to run codemods on your installed components.

pnpm dlx @frontic/ui migrate [migration]
pnpm dlx @frontic/ui migrate --list

Available migrations:

  • icons — Migrate your UI components to a different icon library
  • rtl — Convert directional Tailwind classes to logical properties for RTL support

Options

Usage: frontic-ui migrate [options] [migration]

Run a migration

Arguments:
  migration                         the migration to run

Options:
  -l, --list                        list all migrations (default: false)
  -y, --yes                         skip confirmation prompt (default: false)
  -c, --cwd <cwd>                   the working directory (default: current directory)
  -h, --help                        display help for command

info

Use the info command to display information about your Frontic UI project configuration.

pnpm dlx @frontic/ui info
pnpm dlx @frontic/ui info --json

Options

Usage: frontic-ui info [options]

Get information about your Frontic UI project configuration

Options:
  --json                            output as machine-readable JSON (default: false)
  -c, --cwd <cwd>                   the working directory (default: current directory)
  -h, --help                        display help for command

docs

Use the docs command to open component documentation in the browser.

pnpm dlx @frontic/ui docs button
AstroJavaScript