--- title: CLI description: "Learn how to generate components and theme using CLI commands." --- ## Installation To use CLI, you need to install `@yamada-ui/cli` in your project. ```bash pnpm add -D @yamada-ui/cli ``` ```bash npm i -D @yamada-ui/cli ``` ```bash yarn add -D @yamada-ui/cli ``` ```bash 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. ```bash pnpm yamada-cli init ``` ```bash npm yamada-cli init ``` ```bash yarn yamada-cli init ``` ```bash bun yamada-cli init ``` ```bash Usage: pnpm yamada-cli init [options] initialize your project and install dependencies Options: --cwd current working directory -c, --config 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. ```txt 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. ```bash pnpm yamada-cli add box ``` ```bash npm yamada-cli add box ``` ```bash yarn yamada-cli add box ``` ```bash bun yamada-cli add box ``` :::note 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. ```bash pnpm yamada-cli add ``` ```bash npm yamada-cli add ``` ```bash yarn yamada-cli add ``` ```bash bun yamada-cli add ``` ```bash Usage: pnpm yamada-cli add [options] [components...] add a component to your project Arguments: components components to add Options: --cwd current working directory -c, --config 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. ```bash pnpm yamada-cli diff box ``` ```bash npm yamada-cli diff box ``` ```bash yarn yamada-cli diff box ``` ```bash bun yamada-cli diff box ``` If you don't specify a component, you can check the difference for all components in your project. ```bash pnpm yamada-cli diff ``` ```bash npm yamada-cli diff ``` ```bash yarn yamada-cli diff ``` ```bash bun yamada-cli diff ``` ```bash Usage: pnpm yamada-cli diff [options] [component] check for updates against the registry Arguments: component component to check Options: --cwd current working directory -c, --config 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. ```bash pnpm yamada-cli update box ``` ```bash npm yamada-cli update box ``` ```bash yarn yamada-cli update box ``` ```bash bun yamada-cli update box ``` If you don't specify a component, all components in your project will be updated. ```bash pnpm yamada-cli update ``` ```bash npm yamada-cli update ``` ```bash yarn yamada-cli update ``` ```bash bun yamada-cli update ``` ```bash Usage: pnpm yamada-cli update [options] [components...] update components in your project Arguments: components components to update Options: --cwd current working directory -c, --config 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. ```bash pnpm yamada-cli theme ``` ```bash npm yamada-cli theme ``` ```bash yarn yamada-cli theme ``` ```bash bun yamada-cli theme ``` :::note If you don't specify a path, the theme will be generated in `./theme`. ::: ```bash Usage: pnpm yamada-cli theme [options] [path] generate theme to your project Arguments: path path to the theme directory Options: --cwd current working directory -c, --config 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](https://yamada-ui.com/docs/styling/style-props.md). ```bash pnpm yamada-cli tokens ``` ```bash npm yamada-cli tokens ``` ```bash yarn yamada-cli tokens ``` ```bash bun yamada-cli tokens ``` :::note If you don't specify a path, the `theme.path` will be used. ::: ```bash Usage: pnpm yamada-cli tokens [options] [path] generate theme typings Arguments: path path to the theme file Options: --cwd current working directory -c, --config path to the config file (default: "ui.json") -o, --out 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](https://prettier.io). | | `format.enabled` | `false` | Whether to run the `--write` option of [Prettier](https://prettier.io) when components are added or updated. | | `lint.enabled` | `false` | Whether to run the `--fix` option of [ESLint](https://eslint.org) when components are added or updated. |