CLI

CLIコマンドを使用してコンポーネントやテーマを生成する方法を学ぶ。

インストール

CLIを使用するには、まずプロジェクトに@yamada-ui/cliをインストールする必要があります。

pnpm add -D @yamada-ui/cli

npm i -D @yamada-ui/cli

yarn add -D @yamada-ui/cli

bun add -D @yamada-ui/cli

コマンド

init

initコマンドを実行すると、プロジェクトに必要なファイルやフォルダが作成されます。

pnpm yamada-cli init

npm yamada-cli init

yarn yamada-cli init

bun yamada-cli init

Usage: pnpm yamada-cli init [options]

initialize your project and install dependencies

Options:
  --cwd <path>         current working directory
  -c, --config <path>  path to the config file (default: "ui.json")
  -o, --overwrite      overwrite existing files. (default: false)
  -j, --jsx            use jsx instead of tsx (default: false)
  -h, --help           display help for command

initコマンドを実行すると、次のプロンプトが表示されます。

Would you like to use monorepo? (recommended) … No / Yes
What is the path to the monorepo? … ./workspaces/ui
What is the package name? … @workspaces/ui
Would you like your code inside a `src/` directory? … No / Yes
Would you like to use Prettier? … No / Yes
Would you like to use ESLint? … No / Yes

プロンプトの後、コンフィグと必要な依存関係がインストールされます。

add

addコマンドを実行すると、プロジェクトに指定したコンポーネントと依存関係が追加されます。

pnpm yamada-cli add box

npm yamada-cli add box

yarn yamada-cli add box

bun yamada-cli add box

指定したコンポーネントに依存しているコンポーネントもすべて追加されます。

コンポーネントを指定しない場合は、利用可能なすべてのコンポーネントが追加されます。

pnpm yamada-cli add

npm yamada-cli add

yarn yamada-cli add

bun yamada-cli add

Usage: pnpm yamada-cli add [options] [components...]

add a component to your project

Arguments:
  components           components to add

Options:
  --cwd <path>         current working directory
  -c, --config <path>  path to the config file (default: "ui.json")
  -o, --overwrite      overwrite existing files. (default: false)
  -i, --install        install dependencies (default: false)
  -s, --sequential     run tasks sequentially. (default: false)
  -f, --format         format the output files.
  -l, --lint           lint the output files.
  -h, --help           display help for command

diff

diffコマンドを実行すると、指定したコンポーネントのローカルとリモートの差分を確認できます。

pnpm yamada-cli diff box

npm yamada-cli diff box

yarn yamada-cli diff box

bun yamada-cli diff box

コンポーネントを指定しない場合は、ローカルにあるすべてのコンポーネントの差分を確認できます。

pnpm yamada-cli diff

npm yamada-cli diff

yarn yamada-cli diff

bun yamada-cli diff

Usage: pnpm yamada-cli diff [options] [component]

check for updates against the registry

Arguments:
  component            component to check

Options:
  --cwd <path>         current working directory
  -c, --config <path>  path to the config file (default: "ui.json")
  -s, --sequential     run tasks sequentially. (default: false)
  -d, --detail         show detailed changes (default: false)
  -h, --help           display help for command

update

updateコマンドを実行すると、指定したコンポーネントを更新します。

pnpm yamada-cli update box

npm yamada-cli update box

yarn yamada-cli update box

bun yamada-cli update box

コンポーネントを指定しない場合は、ローカルにあるすべてのコンポーネントが更新されます。

pnpm yamada-cli update

npm yamada-cli update

yarn yamada-cli update

bun yamada-cli update

Usage: pnpm yamada-cli update [options] [components...]

update components in your project

Arguments:
  components           components to update

Options:
  --cwd <path>         current working directory
  -c, --config <path>  path to the config file (default: "ui.json")
  -i, --install        install dependencies (default: false)
  -s, --sequential     run tasks sequentially. (default: false)
  -f, --format         format the output files.
  -l, --lint           lint the output files.
  -h, --help           display help for command

theme

themeコマンドを実行すると、指定されたパスにテーマを生成します。

pnpm yamada-cli theme

npm yamada-cli theme

yarn yamada-cli theme

bun yamada-cli theme

パスが指定されない場合は、./themeにテーマが生成されます。

Usage: pnpm yamada-cli theme [options] [path]

generate theme to your project

Arguments:
  path                 path to the theme directory

Options:
  --cwd <path>         current working directory
  -c, --config <path>  path to the config file (default: "ui.json")
  -o, --overwrite      overwrite existing directory. (default: false)
  -j, --js             use js instead of ts
  -f, --format         format the output files.
  -l, --lint           lint the output files.
  -h, --help           display help for command

tokens

tokensコマンドを実行すると、カスタマイズしたテーマの型定義を更新できます。この型定義は、Style Propsなどで使用されます。

pnpm yamada-cli tokens

npm yamada-cli tokens

yarn yamada-cli tokens

bun yamada-cli tokens

パスが指定されない場合は、コンフィグのtheme.pathを参照します。

Usage: pnpm yamada-cli tokens [options] [path]

generate theme typings

Arguments:
  path                 path to the theme file

Options:
  --cwd <path>         current working directory
  -c, --config <path>  path to the config file (default: "ui.json")
  -o, --out <path>     output path
  -f, --format         format the output file
  -l, --lint           lint the output file
  -h, --help           display help for command

設定

initコマンドを実行した後、プロジェクトにui.jsonが生成されます。ui.jsonを変更することで、さまざまなカスタマイズが可能です。

プロパティ	デフォルト	説明
`path`	`./ui`	生成されるディレクトリのパス。
`monorepo`	`false`	モノレポで生成します。
`jsx`	`false`	JSXファイルで生成します。
`theme.path`	`./theme`	テーマが生成されるディレクトリのパス。
`components.path`	`./components`	コンポーネントが生成されるディレクトリのパス。
`components.overwrite`	`false`	コンポーネントなどが追加されたときにローカルの既存のコンポーネントの参照先を更新します。
`components.dependents`	`true`	コンポーネントを追加するときに依存されているコンポーネントも追加します。
`components.dependencies`	`false`	コンポーネントを追加するときに依存しているコンポーネントも追加します。
`hooks.path`	`./hooks`	フックが生成されるディレクトリのパス。
`hooks.overwrite`	`false`	コンポーネントなどが追加されたときにローカルの既存のフックの参照先を更新します。
`hooks.dependents`	`true`	フックを追加するときに依存されているフックも追加します。
`hooks.dependencies`	`false`	フックを追加するときに依存しているフックも追加します。
`providers.path`	`./providers`	プロバイダーが生成されるディレクトリのパス。
`providers.overwrite`	`false`	コンポーネントなどが追加されたときにローカルの既存のプロバイダーの参照先を更新します。
`providers.dependents`	`true`	プロバイダーを追加するときに依存されているプロバイダーも追加します。
`providers.dependencies`	`false`	プロバイダーを追加するときに依存しているプロバイダーも追加します。
`format.configPath`	-	Prettierが参照するコンフィグのパス。
`format.enabled`	`false`	コンポーネントなどを追加・更新するときにPrettierの`--write`を実行します。
`lint.enabled`	`false`	コンポーネントなどを追加・更新するときにESLintの`--fix`を実行します。