CLI

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

使い方

下記のコマンドを実行する前に、@yamada-ui/cliをインストールしてinitコマンドを実行する必要があります。詳しくは、こちらをご覧ください。

コンポーネントを追加する

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)
  -s, --sequential     run tasks sequentially. (default: false)
  -y, --yes            skip all confirmation prompts. (default: false)
  -i, --install        install dependencies.
  --no-install         do not install dependencies.
  -f, --format         format the output files.
  --no-format          do not format the output files.
  -l, --lint           lint the output files.
  --no-lint            do not lint the output files.
  -t, --tag <name>     tag for the registries (e.g. dev, next).
  -h, --help           display help for command

差分を確認する

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)
  -y, --yes            skip all confirmation prompts. (default: false)
  -u, --update         update files when there are file diff.
  --no-update          do not update files when there are file diff.
  -i, --install        install dependencies when updating files.
  --no-install         do not install dependencies when updating files.
  -t, --tag <name>     tag for the registries (e.g. dev, next).
  -h, --help           display help for command

コンポーネントを更新する

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")
  -s, --sequential     run tasks sequentially. (default: false)
  -F, --force          force update, overwriting local changes. (default: false)
  -y, --yes            skip all confirmation prompts. (default: false)
  -i, --install        install dependencies.
  --no-install         do not install dependencies.
  -f, --format         format the output files.
  --no-format          do not format the output files.
  -l, --lint           lint the output files.
  --no-lint            do not lint the output files.
  -t, --tag <name>     tag for the registries (e.g. dev, next).
  -h, --help           display help for command