@felixgeelhaar/glaze-cli

@felixgeelhaar/glaze-cli

Command-line interface for the Glaze Design System

Installation

npm install -g @felixgeelhaar/glaze-cli
# or
pnpm add -g @felixgeelhaar/glaze-cli
# or
yarn global add @felixgeelhaar/glaze-cli

Usage

Initialize a new project

glaze init my-project

This will create a new project with the Glaze Design System pre-configured.

Add Glaze to an existing project

# In your project directory
glaze add

This command will:

• Install necessary dependencies
• Set up configuration files
• Import required styles
• Configure your build tools

Add specific components

# Add individual components
glaze add button card dialog

# Add all components
glaze add --all

Generate component wrappers

# Generate React wrappers
glaze generate react

# Generate Vue wrappers
glaze generate vue

# Generate Angular wrappers (coming soon)
glaze generate angular

Commands

glaze init [project-name]

Create a new project with Glaze Design System.

Options:

• --framework <framework> - Choose framework (react, vue, vanilla)
• --typescript - Use TypeScript
• --tailwind - Include Tailwind CSS integration
• --git - Initialize git repository
• --install - Install dependencies immediately

Example:

glaze init my-app --framework react --typescript --tailwind

glaze add [components...]

Add Glaze components to your project.

Options:

• --all - Add all components
• --framework <framework> - Specify framework wrappers
• --force - Overwrite existing files

Example:

glaze add button card --framework vue

glaze generate <framework>

Generate framework-specific component wrappers.

Supported frameworks:

• react - React components
• vue - Vue 3 components
• angular - Angular components (coming soon)
• svelte - Svelte components (coming soon)

Example:

glaze generate react --output ./src/components

glaze config

Configure Glaze Design System settings.

Options:

• --theme - Configure theme settings
• --tokens - Customize design tokens
• --css - Configure CSS output

Example:

glaze config --theme

glaze update

Update Glaze packages to the latest version.

Options:

• --check - Check for updates without installing
• --major - Include major version updates

Example:

glaze update --check

Configuration

.glazerc.json

Create a .glazerc.json file in your project root:

{
  "framework": "react",
  "typescript": true,
  "components": ["button", "card", "dialog"],
  "theme": {
    "primary": "#6366f1",
    "accent": "#f472b6",
    "radius": "0.75rem"
  },
  "paths": {
    "components": "./src/components",
    "styles": "./src/styles"
  }
}

Environment Variables

# Set default framework
export GLAZE_FRAMEWORK=vue

# Set default output directory
export GLAZE_OUTPUT=./src/glaze

Project Templates

React + TypeScript + Tailwind

glaze init my-react-app \
  --framework react \
  --typescript \
  --tailwind \
  --git

Creates a project with:

• React 18
• TypeScript
• Tailwind CSS with Glaze preset
• Vite build tool
• ESLint & Prettier
• Git repository

Vue 3 + Composition API

glaze init my-vue-app \
  --framework vue \
  --typescript \
  --git

Creates a project with:

• Vue 3
• TypeScript
• Composition API setup
• Vite build tool
• ESLint & Prettier
• Git repository

Vanilla JavaScript

glaze init my-vanilla-app \
  --framework vanilla \
  --git

Creates a project with:

• Vanilla JavaScript
• Web Components
• Vite build tool
• Git repository

Integrations

With existing React app

cd my-react-app
glaze add --framework react

This will:

• Install @felixgeelhaar/glaze-react and @felixgeelhaar/glaze-components
• Add style imports to your entry file
• Provide usage examples

With existing Vue app

cd my-vue-app
glaze add --framework vue

This will:

• Install @felixgeelhaar/glaze-vue and @felixgeelhaar/glaze-components
• Set up the Vue plugin
• Add style imports
• Provide usage examples

With existing Tailwind project

glaze add --tailwind

This will:

• Install @felixgeelhaar/glaze-engine
• Update your tailwind.config.js
• Add Glaze preset and plugin

Troubleshooting

Common Issues

Issue: Components not styling correctly

# Ensure styles are imported
glaze doctor styles

Issue: TypeScript errors

# Generate type definitions
glaze generate types

Issue: Build errors

# Check configuration
glaze doctor config

Debug Mode

Run commands with debug output:

DEBUG=glaze:* glaze init my-project

Getting Help

# Show help for any command
glaze help [command]

# Show version
glaze --version

# Check system compatibility
glaze doctor

Features

• 🚀 Quick setup - Get started in seconds
• 📦 Smart defaults - Sensible configuration out of the box
• 🔧 Customizable - Fine-tune every aspect
• 🎨 Theme generation - Create custom themes
• 📝 TypeScript support - Full type safety
• 🔄 Auto-updates - Keep dependencies current
• 🏗️ Scaffolding - Generate boilerplate code
• 🔍 Diagnostics - Built-in troubleshooting

License

MIT

Links

• GitHub Repository
• Documentation
• Issue Tracker
• NPM Package