Skip to Content
文档

CLI

了解更多关于如何使用 Chakra CLI 命令生成代码片段和输入内容的信息。

Chakra UI CLI 可用于生成自定义主题标记的类型，例如颜色、语义标记、配方变体等。

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

安装

¥Installation

为了使用 CLI，你需要将其作为开发依赖安装到你的项目中：

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

npm i -D @chakra-ui/cli
warning

要使用 CLI 工具，请确保 Node.js 版本为 >= 20.6.0。

¥To use the CLI tool, please ensure that the version of Node.js is >= 20.6.0.

用法

¥Usage

使用 Chakra CLI 和你首选的包管理器运行以下列出的任何命令。

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

Usage: npx chakra [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 add dialog --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?

生成类型后，你需要 "重启 TS 服务器" 才能显示自动补齐功能。

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

或者，你可以将 @chakra-ui/cli 包作为开发依赖本地安装，然后运行 ​​chakra typegen 命令来生成类型。

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

Previous

迁移

Next

Figma