CLI Introduction

The Sugarcoat CLI (@sugarcoat/cli) is a command-line tool that helps you:

Initialize Sugarcoat in your project with interactive setup
Add components from the registry to your project
Manage components with install, update, remove, and diff commands
Generate CSS artifacts from your configuration
Diagnose issues with the built-in doctor command

Quick Start#

# Install the CLI globally (optional)
npm install -g @sugarcoat/cli
 
# Or use npx directly
npx @sugarcoat/cli init

Available Commands#

Command	Description
`init`	Initialize Sugarcoat in your project
`add`	Add components from the registry
`remove`	Remove installed components
`update`	Update components to latest versions
`list`	List all available components
`search`	Search for components
`info`	Display component details
`diff`	Show differences from registry
`codegen`	Generate CSS artifacts
`dev`	Run codegen in watch mode
`doctor`	Check your setup

Command Aliases#

The CLI provides convenient aliases for common commands:

sugarcoat ls        # alias for 'list'
sugarcoat rm        # alias for 'remove'
sugarcoat gen       # alias for 'codegen'

You can also use sugar as a shorthand for sugarcoat:

sugar init
sugar add button
sugar dev

Project Structure#

After initialization, Sugarcoat creates the following structure:

your-project/
├── sugarcoat.config.ts     # Your configuration (edit this)
├── .sugarcoat/
│   ├── panda.config.ts     # Generated Panda config
│   ├── index.ts            # Barrel export
│   └── generated/          # Codegen output
│       ├── css/            # CSS functions
│       ├── tokens/         # Design tokens
│       ├── patterns/       # Layout patterns
│       ├── recipes/        # Component recipes
│       ├── jsx/            # JSX factory
│       └── styles.css      # Extracted CSS
├── components.json         # Installed components tracking
└── src/components/ui/      # Your components

Getting Help#

# Show all commands
sugarcoat --help
 
# Get help for a specific command
sugarcoat add --help
sugarcoat init --help

Quick Start#

Available Commands#

Command Aliases#

Project Structure#

Getting Help#

Customize Theme