chakra-ui__chakra-ui/packages/cli

@chakra-ui/cli

The official CLI for Chakra UI projects: generate theme and recipe typings, add snippets and Pro blocks, eject theme artifacts into your repo, and browse component and documentation data from the terminal.

After installation, the binary is chakra (also available via npx @chakra-ui/cli).

Commands

Command	Description
typegen	Generate theme and recipe TypeScript types from your theme file
snippet	Add curated composition snippets to your project
blocks	Add Chakra UI Pro blocks (requires API key)
eject	Write default theme tokens and recipes into your project
component	List components, show props, or show examples (reads public docs API)
theme	Print theme categories or full theme JSON (reads public docs API)
docs	Search the documentation (reads public docs API)

Run chakra --help or chakra <command> --help for options.

---

Type generation (typegen)

Generate TypeScript types for your custom theme (conditions, recipes, prop types, tokens, system types):

npx @chakra-ui/cli typegen <path/to/your/theme.ts>

You can also pass a resolvable package that exports your theme.

npx @chakra-ui/cli typegen @your-org/chakra-theme

Options

Option	Description
--strict	Stricter types for recipe variants and sizes
--outdir <dir>	Where to write generated files (see --help for default)
--tsconfig <path>	Tsconfig used to resolve path aliases
--watch [path]	Rebuild when dependencies change
--clean	Remove the output directory before generating

If you delete node_modules, regenerate typings by running typegen again.

package.json (optional):

{
  "scripts": {
    "gen:theme-types": "chakra typegen ./src/theme.ts"
  }
}

---

Snippets (snippet)

Add community-driven composition snippets to your project:

npx @chakra-ui/cli snippet add
npx @chakra-ui/cli snippet add provider toaster
npx @chakra-ui/cli snippet list

Snippet JSON is loaded from the registry URL below (override for local docs or mirrors).

---

Pro blocks (blocks)

Add premium blocks from Chakra UI Pro:

npx @chakra-ui/cli blocks add
npx @chakra-ui/cli blocks add hero
npx @chakra-ui/cli blocks add hero --variant simple
npx @chakra-ui/cli blocks list
npx @chakra-ui/cli blocks list --category marketing

Setup: set CHAKRA_UI_PRO_API_KEY (shell or .env in the project root).

Common options: --outdir, --force, --dry-run, --tsx, --variant.

---

Eject (eject)

Export default theme-related files (e.g. global CSS, tokens, recipes) into your project so you can own them:

npx @chakra-ui/cli eject
npx @chakra-ui/cli eject --outdir theme

---

Component (component)

Uses the public Chakra documentation API (see Environment).

npx @chakra-ui/cli component list
npx @chakra-ui/cli component list --charts
npx @chakra-ui/cli component props button
npx @chakra-ui/cli component example dialog

---

Theme (theme)

npx @chakra-ui/cli theme
npx @chakra-ui/cli theme --json
npx @chakra-ui/cli theme --filter tokens

Default output is a summary table; --json prints the full payload; --filter prints one category.

---

Docs search (docs)

npx @chakra-ui/cli docs button
npx @chakra-ui/cli docs theming

---

Environment

The CLI loads .env from the current working directory when present.

Variable	Purpose
REGISTRY_URL	Base URL for snippet/composition JSON (default points at the hosted docs registry).
CHAKRA_DOCS_URL	Base URL for /api/types, /api/theme, /api/search, and examples (default https://chakra-ui.com).
HTTPS_PROXY	Proxy for outbound HTTP(S) requests.
CHAKRA_UI_PRO_API_KEY	Required for blocks add (Pro API).