CLI

The Chakra UI CLI can be used to generate typings for your custom theme tokens, like colors, semantic tokens, recipe variants, etc.

Installation

In order to use the CLI, you need to install it as a dev dependency in your project:

npm i -D @chakra-ui/cli@next

pnpm add -D @chakra-ui/cli@next

bun add -d @chakra-ui/cli@next

Usage

Use the Chakra CLI to run any of the commands listed below with your preferred package manager.

Usage: chakra-ui [options] [command]

The official CLI for Chakra UI projects

Options:
  -V, --version               output the version number
  -h, --help                  display help for command

Commands:
  typegen [options] <source>  Generate theme and recipe typings
  snippet                     Add snippets to your project for better DX
  eject [options]             Take control over the default theme tokens and recipes
  help [command]              display help for command

chakra typegen

Generates theme and recipe typings for your custom theme. This helps to provide autocompletion and type safety in your project.

# Generate typings
chakra typegen src/theme.ts

# Watch for changes and rebuild
chakra typegen src/theme.ts --watch

# Generate strict types for props variant and size
chakra typegen src/theme.ts --strict

chakra snippet

Generates useful component compositions that boost your development speed.

# Add all snippets
chakra snippet add

# Add a specific snippet
chakra snippet add button

# List all available snippets
chakra snippet list

chakra eject

Generated the file(s) that contain the default theme tokens and recipes so you can have full control over them.

# Copy the tokens and recipes to your project
chakra eject --outdir src/theme