CLI

Learn how to generate components using CLI commands.

Usage

Before running the following commands, you need to install @yamada-ui/cli and execute the init command. For more details, please see here.

Add Components

When you run the add command, the specified component and its dependencies will be added to your project.

pnpm yamada-cli add box

npm yamada-cli add box

yarn yamada-cli add box

bun yamada-cli add box

All components that the specified component depends on will also be added.

If you don't specify a component, all available components will be added.

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

Check Differences

When you run the diff command, you can check the difference between the local and remote components.

pnpm yamada-cli diff box

npm yamada-cli diff box

yarn yamada-cli diff box

bun yamada-cli diff box

If you don't specify a component, you can check the difference for all components in your project.

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 Components

When you run the update command, the specified component will be updated.

pnpm yamada-cli update box

npm yamada-cli update box

yarn yamada-cli update box

bun yamada-cli update box

If you don't specify a component, all components in your project will be updated.

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