sigilUI

CLI Reference

The Sigil CLI bootstraps projects, converts existing apps, installs components, manages presets, and validates setup.

Installation

@sigil-ui/cli on npm

For raw one-off usage, call the scoped package:

npx @sigil-ui/cli <command> [options]
pnpm dlx @sigil-ui/cli <command> [options]

After installing the CLI locally, the shorter sigil binary is available:

pnpm add -D @sigil-ui/cli
pnpm sigil doctor

Commands

convert

Convert an existing project to Sigil end-to-end.

npx @sigil-ui/cli convert [options]
OptionDescriptionDefault
-p, --preset <name>Preset to usesigil
-d, --dir <dir>Components directorysrc/components/ui when src/ exists
-y, --yesSkip promptsfalse
--no-agentSkip .sigil/AGENTS.md and agent assetsfalse
--no-installUpdate package.json but skip package installfalse
--no-inject-cssSkip global CSS token import injectionfalse
--dry-runPrint planned changes without writing filesfalse
--overwriteReplace an existing sigil.config.tsfalse
npx @sigil-ui/cli convert
npx @sigil-ui/cli convert --preset noir --no-install

init

Create Sigil config, token CSS, optional starter components, and agent instructions. Use convert when you want the CLI to also update dependencies and inject the global CSS import by default.

npx @sigil-ui/cli init [options]
OptionDescriptionDefault
-p, --preset <name>Preset to usesigil
-d, --dir <dir>Components directorysrc/components/ui when src/ exists
-y, --yesSkip promptsfalse
--no-agentSkip agent instructionsfalse
--installInstall dependencies after writing filesfalse
--inject-cssInject token import into detected global CSSfalse
--dry-runPrint planned changes without writing filesfalse

What it does:

  1. Writes sigil.config.ts
  2. Writes token CSS that imports @sigil-ui/tokens/css and a preset
  3. Creates the configured components directory
  4. Optionally creates .sigil/AGENTS.md and installs Sigil agent assets
  5. Prints dependency and next-step guidance
npx @sigil-ui/cli init
npx @sigil-ui/cli init --preset cobalt --inject-css

add

Copy token-driven component source into your app.

npx @sigil-ui/cli add button card input
npx @sigil-ui/cli add --all
OptionDescriptionDefault
-a, --allAdd all registered CLI componentsfalse
-o, --overwriteReplace existing filesfalse
-d, --dir <dir>Override components directoryfrom sigil.config.ts

Copied entries re-export local source from an adjacent _sigil/ directory, including required hooks and utilities. Keep that directory with the entry. Install the external dependencies reported by the CLI. Existing source is preserved unless you pass --overwrite; unknown names or missing source return a nonzero exit status.

preset

Browse, switch, or create presets.

npx @sigil-ui/cli preset
npx @sigil-ui/cli preset list
npx @sigil-ui/cli preset noir
npx @sigil-ui/cli preset create

diff

Compare your token CSS against the local .sigil/tokens.snapshot.css.

npx @sigil-ui/cli diff
npx @sigil-ui/cli diff sync

The first run creates a snapshot. Run diff sync after accepting intentional token changes.

doctor

Validate a Sigil project.

npx @sigil-ui/cli doctor

Checks config, token CSS, component directory, component dependencies, global CSS import, preset validity, and installed Sigil agent assets.

New Projects

Use create-sigil-app for a fresh Next.js project:

npx create-sigil-app my-app

Raw vs Local Invocation

Use npx @sigil-ui/cli ... or pnpm dlx @sigil-ui/cli ... when Sigil is not installed yet. Use sigil ... only after @sigil-ui/cli is installed in the project.

Exit Codes

CodeMeaning
0Success
1Invalid setup or failing diagnostic