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

pnpm add -D @chakra-ui/cli

bun add -d @chakra-ui/cli

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 --all

# Add a specific snippet
chakra snippet add button

# List all available snippets
chakra snippet list

# Specify a custom directory
chakra snippet --outdir ./components/custom

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

FAQ

Autocomplete for custom tokens not working?

After generating the typings, you need to "Restart TS Server" for the autocomplete to show up.

Alternatively, you can install the @chakra-ui/cli package locally as a dev dependency and run the chakra typegen command to generate the typings.