Skip to main content
Version: 1.0.3

Installation

Get started with Ignix UI by installing the Ignix CLI. The CLI is a powerful command-line tool that helps you manage and interact with Ignix components and themes in your projects.

Prerequisites​

Before you begin, ensure you have the following installed:

  • Node.js 16.14 or later
  • npm (comes with Node.js) or yarn
  • React 17 or later
  • (Optional) TypeScript 4.5 or later for TypeScript support

Installation Methods​

npm install -g @mindfiredigital/ignix-cli

Usage Modes​

Interactive Mode​

Simply run ignix without any arguments to enter interactive mode:

ignix

The interactive mode provides a beautiful, guided interface with the following options:

  • 🚀 Initialize Ignix UI - Set up your project
  • ➕ Add components - Add components to your project
  • 📋 List components - View available components
  • 🎨 Manage themes - Configure and manage themes
  • 🚪 Exit - Close the CLI

Command Mode​

Run specific commands directly:

ignix <command> [options]

Quick Start​

Starting a New Project​

# 1. Create your project
npx create-react-app my-app
cd my-app

# 2. Initialize Ignix UI
ignix init

# 3. Add components
ignix add component button card input

# 4. Start using components in your app

Adding Components to Existing Project​

# Navigate to your project
cd my-existing-project

# Initialize if not already done
ignix init

# Add specific components
ignix add component modal dialog tooltip

Commands​

ignix init​

Initialize Ignix UI in your project. This command sets up the necessary configuration and directory structure.

ignix init

What it does:

  • Creates an ignix.config.js configuration file
  • Sets up the components directory structure
  • Creates utility files (e.g., utils/cn.ts for className utilities)
  • Installs required dependencies

Interactive prompts:

  • Project framework selection
  • Components directory path
  • Styling preferences
  • Additional configuration options

ignix add​

Add components or themes to your project from the Ignix UI registry.

Add Components​

ignix add component <component-names...>

Examples:

# Add a single component
ignix add component button

# Add multiple components
ignix add component button card modal input

# Interactive mode - prompts for component selection
ignix add component

Add Themes​

ignix add theme <theme-name>

Example:

ignix add theme japanese-washi

ignix list​

List all available components or themes from the Ignix UI registry.

List Components​

ignix list component

List Themes​

ignix list theme

ignix themes​

Manage and configure themes for your project.

ignix themes

Features:

  • View installed themes
  • Switch between themes
  • Customize theme variables
  • Export theme configurations

Configuration​

The CLI uses an ignix.config.js file in your project root for configuration.

Example Configuration​

/* eslint-env node */
/** @type {import('@mindfiredigital/ignix-cli').IgnixConfig} */
module.exports = {
  // URL to the raw registry.json file on GitHub
  registryUrl:
    'https://raw.githubusercontent.com/mindfiredigital/ignix-ui/main/packages/registry/registry.json',

  // URL to the raw themes.json file on GitHub
  themeUrl:
    'https://raw.githubusercontent.com/mindfiredigital/ignix-ui/main/packages/registry/themes.json',

  // Default directory for UI components
  componentsDir: 'src/components/ui',

  // Default directory for themes
  themesDir: 'src/themes',
};

CLI Options​

Global Options​

  • --help, -h - Display help information
  • --version, -v - Show CLI version

Command-Specific Options​

# Show help for a specific command
ignix add --help
ignix init --help

Troubleshooting​

Common Issues​

1. Command Not Found​

Problem: ignix: command not found

Solution:

# Reinstall globally
npm install -g @mindfiredigital/ignix-cli

# Or use npx
npx @mindfiredigital/ignix-cli

2. Permission Errors​

Problem: EACCES: permission denied

Solution:

# Use npx (recommended)
npx @mindfiredigital/ignix-cli

# Or fix npm permissions
npm config set prefix ~/.npm-global
export PATH=~/.npm-global/bin:$PATH

3. Component Not Found​

Problem: Component doesn't exist in registry

Solution:

# List available components first
ignix list component

# Verify component name spelling

4. Configuration File Issues​

Problem: ignix.config.js not found

Solution:

# Run init to create configuration
ignix init

# Or create manually
touch ignix.config.js

Next Steps​

Need Help?​

If you run into any issues during installation, please:

  1. Search our GitHub issues
  2. Open a new issue if you can't find a solution