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)
  -j, --jsx            use jsx instead of tsx (default: false)
  -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)
  -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

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)
  -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")
  -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

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
  -f, --format         format the output files.
  -l, --lint           lint the output files.
  -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
  -l, --lint           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.