@frontic/ui

CLI for adding Frontic UI components to your Vue project.

Installation

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

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

Commands

init

Initialize Frontic UI in your Vue project:

npx @frontic/ui init

This will:

1. Run @frontic/ui init if needed
2. Configure the Frontic registry
3. Set up theme colors

Options:

• --yes, -y - Skip confirmation prompts
• --defaults, -d - Use default configuration

add

Add components to your project:

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

Set up MCP (Model Context Protocol) for AI assistants:

npx @frontic/ui mcp init

This creates the MCP configuration for tools like Claude Code, Cursor, or VS Code.

Options:

• --client, -c - Target client (claude, cursor, vscode)

Configuration

After running init, your components.json will include:

{
  "registries": {
    "frontic": {
      "url": "https://registry.frontic.io/r"
    }
  }
}

Theme Colors

Frontic UI includes additional theme colors:

bg-brand text-brand border-brand
bg-success text-success border-success
bg-warning text-warning border-warning
bg-info text-info border-info

These are configured during init and can be customized in your CSS.

Development

# Install dependencies
pnpm install

# Build
pnpm build

# Run in development
pnpm dev

# Run tests
pnpm test

# Link globally for local testing
pnpm link --global

License

MIT