CLI
Learn more to use the Chakra CLI command to generate snippets and typings
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