--- title: CLI description: "CLIコマンドを使用してコンポーネントやテーマを生成する方法を学ぶ。" --- ## インストール CLIを使用するには、まずプロジェクトに`@yamada-ui/cli`をインストールする必要があります。 ```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 ``` ## コマンド ### init `init`コマンドを実行すると、プロジェクトに必要なファイルやフォルダが作成されます。 ```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 ``` `init`コマンドを実行すると、次のプロンプトが表示されます。 ```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 ``` プロンプトの後、コンフィグと必要な依存関係がインストールされます。 ### add `add`コマンドを実行すると、プロジェクトに指定したコンポーネントと依存関係が追加されます。 ```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 指定したコンポーネントに依存しているコンポーネントもすべて追加されます。 ::: コンポーネントを指定しない場合は、利用可能なすべてのコンポーネントが追加されます。 ```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 `diff`コマンドを実行すると、指定したコンポーネントのローカルとリモートの差分を確認できます。 ```bash pnpm yamada-cli diff box ``` ```bash npm yamada-cli diff box ``` ```bash yarn yamada-cli diff box ``` ```bash bun yamada-cli diff box ``` コンポーネントを指定しない場合は、ローカルにあるすべてのコンポーネントの差分を確認できます。 ```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 `update`コマンドを実行すると、指定したコンポーネントを更新します。 ```bash pnpm yamada-cli update box ``` ```bash npm yamada-cli update box ``` ```bash yarn yamada-cli update box ``` ```bash bun yamada-cli update box ``` コンポーネントを指定しない場合は、ローカルにあるすべてのコンポーネントが更新されます。 ```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 `theme`コマンドを実行すると、指定されたパスにテーマを生成します。 ```bash pnpm yamada-cli theme ``` ```bash npm yamada-cli theme ``` ```bash yarn yamada-cli theme ``` ```bash bun yamada-cli theme ``` :::note パスが指定されない場合は、`./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 `tokens`コマンドを実行すると、カスタマイズしたテーマの型定義を更新できます。 この型定義は、[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 パスが指定されない場合は、コンフィグの`theme.path`を参照します。 ::: ```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 -h, --help display help for command ``` ## 設定 `init`コマンドを実行した後、プロジェクトに`ui.json`が生成されます。`ui.json`を変更することで、さまざまなカスタマイズが可能です。 | プロパティ | デフォルト | 説明 | | ------------------------- | -------------- | ------------------------------------------------------------------------------------------------ | | `path` | `./ui` | 生成されるディレクトリのパス。 | | `monorepo` | `false` | モノレポで生成します。 | | `jsx` | `false` | JSXファイルで生成します。 | | `theme.path` | `./theme` | テーマが生成されるディレクトリのパス。 | | `components.path` | `./components` | コンポーネントが生成されるディレクトリのパス。 | | `components.overwrite` | `false` | コンポーネントなどが追加されたときにローカルの既存のコンポーネントの参照先を更新します。 | | `components.dependents` | `true` | コンポーネントを追加するときに依存されているコンポーネントも追加します。 | | `components.dependencies` | `false` | コンポーネントを追加するときに依存しているコンポーネントも追加します。 | | `hooks.path` | `./hooks` | フックが生成されるディレクトリのパス。 | | `hooks.overwrite` | `false` | コンポーネントなどが追加されたときにローカルの既存のフックの参照先を更新します。 | | `hooks.dependents` | `true` | フックを追加するときに依存されているフックも追加します。 | | `hooks.dependencies` | `false` | フックを追加するときに依存しているフックも追加します。 | | `providers.path` | `./providers` | プロバイダーが生成されるディレクトリのパス。 | | `providers.overwrite` | `false` | コンポーネントなどが追加されたときにローカルの既存のプロバイダーの参照先を更新します。 | | `providers.dependents` | `true` | プロバイダーを追加するときに依存されているプロバイダーも追加します。 | | `providers.dependencies` | `false` | プロバイダーを追加するときに依存しているプロバイダーも追加します。 | | `format.configPath` | - | [Prettier](https://prettier.io)が参照するコンフィグのパス。 | | `format.enabled` | `false` | コンポーネントなどを追加・更新するときに[Prettier](https://prettier.io)の`--write`を実行します。 | | `lint.enabled` | `false` | コンポーネントなどを追加・更新するときに[ESLint](https://eslint.org)の`--fix`を実行します。 |