CLI

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

The CLI scans your theme configuration and generates typings for your custom tokens in the node_modules/@chakra-ui/styled-system/dist/theming.types.d.ts file.

info

Troubleshoot: If the theme typings don't show up immediately, try restarting your TypeScript server (Cmd + Shift + P > "TypeScript: Restart TS server" if you're using VSCode).

Installation

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

npm install --save-dev @chakra-ui/cli

or:

yarn add --dev @chakra-ui/cli

To make it more convenient, it's also a good idea to create an npm script that triggers it:

package.json

{
  ...
  "scripts": {
    ...
    "theme": "chakra-cli tokens path/to/theme.ts",
    "theme:watch": "chakra-cli tokens path/to/theme.ts --watch",
  },
  ...
}

Don't forget to replace path/to/theme.ts with your theme file location.

Usage

To generate typings for your theme, run the theme script:

npm run theme

or:

yarn theme

If you'd like to continuously generate theme typings as you're editing your theme, run the theme:watch script:

npm run theme:watch

or:

yarn theme:watch

A successful execution should output something like this:

$ chakra-cli tokens src/theme/index.ts

Chakra UI CLI v2.1.8 by Chakra UI
Generate theme typings for autocomplete


ℹ Generating chakra theme typings
✔ Done
✨  Done in 0.83s.