CLI

Learn how to generate components and theme using CLI commands.

Installation

To use CLI, you need to install @yamada-ui/cli in your project.

pnpm add -D @yamada-ui/cli

npm i -D @yamada-ui/cli

yarn add -D @yamada-ui/cli

bun add -D @yamada-ui/cli

Commands

init

When you run the init command, the necessary files and folders for your project will be created.

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)
  -t, --tag <name>           tag for the registries (e.g. dev, next).
  -j, --jsx                  use jsx instead of tsx. (default: false)
  -y, --yes                  skip all confirmation prompts. (default: false)
  -m, --monorepo             enable monorepo mode.
  --no-monorepo              disable monorepo mode.
  -p, --package-name <name>  package name.
  -s, --src                  use `src/` directory when choice is monorepo.
  -i, --install              install dependencies when choice is monorepo.
  --no-install               do not install dependencies when choice is monorepo.
  -f, --format               use Prettier.
  --no-format                do not use Prettier.
  -l, --lint                 use ESLint.
  --no-lint                  do not use ESLint.
  --outdir <path>            output directory path.
  -h, --help                 display help for command

After running the init command, you will see the following prompts.

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

After the prompts, the config and required dependencies will be installed.

add

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

diff

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

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

theme

When you run the theme command, the theme will be generated at the specified path.

pnpm yamada-cli theme

npm yamada-cli theme

yarn yamada-cli theme

bun yamada-cli theme

If you don't specify a path, the theme will be generated in ./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.
  -y, --yes                  skip all confirmation prompts. (default: false)
  -p, --package-name <name>  package name (for monorepo).
  -s, --src                  use src/ directory.
  --no-src                   do not use src/ directory.
  -i, --install              install dependencies when choice is monorepo.
  --no-install               do not install dependencies when choice is monorepo.
  -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

tokens

When you run the tokens command, you can update the customized theme typings. This typings are used for Style Props.

pnpm yamada-cli tokens

npm yamada-cli tokens

yarn yamada-cli tokens

bun yamada-cli tokens

If you don't specify a path, the theme.path will be used.

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.
  --no-format          do not format the output file.
  -l, --lint           lint the output file.
  --no-lint            do not lint the output file.
  --internal           generate internal tokens. (default: false)
  -h, --help           display help for command

Configuration

After running the init command, a ui.json will be generated in your project. You can customize it in various ways.

Property	Default	Description
`path`	`./ui`	The path to the workspace.
`monorepo`	`false`	Whether to use a monorepo.
`jsx`	`false`	Whether to use JSX.
`theme.path`	`./theme`	The path to the theme directory.
`components.path`	`./components`	The path to the components directory.
`components.overwrite`	`true`	Whether to update the local references of existing components when components are added.
`components.dependents`	`true`	Whether to add dependents of components when components are added.
`components.dependencies`	`false`	Whether to add dependencies of components when components are added.
`hooks.path`	`./hooks`	The path to the hooks directory.
`hooks.overwrite`	`false`	Whether to update the local references of existing hooks when components are added.
`hooks.dependents`	`true`	Whether to add dependents of hooks when hooks are added.
`hooks.dependencies`	`false`	Whether to add dependencies of hooks when hooks are added.
`providers.path`	`./providers`	The path to the providers directory.
`providers.overwrite`	`false`	Whether to update the local references of existing providers when components are added.
`providers.dependents`	`true`	Whether to add dependents of providers when providers are added.
`providers.dependencies`	`false`	Whether to add dependencies of providers when providers are added.
`format.configPath`	-	The path to the config file for Prettier.
`format.enabled`	`false`	Whether to run the `--write` option of Prettier when components are added or updated.
`lint.enabled`	`false`	Whether to run the `--fix` option of ESLint when components are added or updated.