CLI

Chakra UI CLI 可用于为您的自定义主题令牌（如颜色、语义令牌、配方变体等）生成类型定义。

安装

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

npm i -D @chakra-ui/cli

pnpm add -D @chakra-ui/cli

bun add -d @chakra-ui/cli

用法

使用 Chakra CLI 运行以下任何命令，并选择您喜欢的包管理器。

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

为您的自定义主题生成主题和配方类型定义。这有助于在您的项目中提供自动补全和类型安全。

# 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

生成有用的组件组合，提升您的开发速度。

# 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

生成包含默认主题令牌和配方的文件，以便您可以完全控制它们。

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

常见问题

自定义令牌的自动补全不工作？

生成类型定义后，您需要“重启 TS 服务”才能显示自动补全。

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