NextUI CLI

NextUI CLIのAPIリファレンスは以下のとおりです。

CLIをインストールしたら、次のコマンドを実行して利用可能なコマンドを表示します。

利用可能なCLIコマンドのリストを取得するには、プロジェクトディレクトリ内で次のコマンドを実行します。

nextui -h

これにより、次のヘルプ出力が生成されます。

NextUI CLI <version>

A command line tool for seamless integration with NextUI

Usage: nextui [command]

Options:
  -v, --version  Show the version number
  --no-cache     Disable cache, by default data will be cached for 30m after the first request
  -h, --help     Display help for commands

Commands:
  init [options] [projectName]       Start a new NextUI project
  add [options] [components...]      Add NextUI components to your project
  upgrade [options] [components...]  Update NextUI components to the latest versions
  remove [options] [components...]   Remove NextUI components from your project
  list [options]                     Show details of installed components
  env [options]                      Display debug information about the local environment
  doctor [options]                   Diagnose problems in your project
  help [command]                     Get help on a specific command

init

新しいプロジェクトを開始するには、initコマンドを使用します。

nextui init [projectName] [options]

オプション

-t --template [string] 新しいプロジェクトに使用するテンプレート。例：app、pages
-p --package [string] 新しいプロジェクトに使用するパッケージマネージャー（デフォルト：npm）

例

nextui init my-nextui-app -t app

出力

NextUI CLI v0.2.1

┌  Create a new project
│
◇  Select a template (Enter to select)
│  ● App (A Next.js 14 with app directory template pre-configured with NextUI (v2) and Tailwind CSS.)
│  ○ Pages (A Next.js 14 with pages directory template pre-configured with NextUI (v2) and Tailwind CSS.)
│  ○ Vite (A Vite template pre-configured with NextUI (v2) and Tailwind CSS.)
│
◇  New project name (Enter to skip with default name)
│  my-nextui-app
│
◇  Select a package manager (Enter to select)
│  ● npm
│  ○ yarn
│  ○ pnpm
│  ○ bun
│
◇  Template created successfully!
│
◇  Next steps ───────╮
│                    │
│  cd my-nextui-app  │
│  npm install       │
│                    │
├────────────────────╯
│
└  🚀 Get started with npm run dev

add

プロジェクトに必要な不足している依存関係を自動的に追加します。

プロジェクトに必要なtailwindcss.config.jsの設定を自動的に追加します。

pnpmを使用しているかどうかを検出し、その場合は必要な設定を.npmrcファイルに追加します。

コンポーネントをプロジェクトに追加するには、addコマンドを使用します。

nextui add [components...] [options]

オプション

-a --all [boolean] すべてのNextUIコンポーネントを追加します（デフォルト：false）
-p --packagePath [string] package.jsonファイルへのパス
-tw --tailwindPath [string] tailwind.configファイルへのパス
-app --appPath [string] App.tsxファイルへのパス
--prettier [boolean] インストール済みのprettierが必要な場合に、追加コンテンツにprettierフォーマットを追加します - （デフォルト：false）
--addApp [boolean] プロバイダーが必要なApp.tsxファイルコンテンツを追加します（デフォルト：false）

例

特定のコンポーネントを設定しない場合、addコマンドは利用可能なコンポーネントのリストを表示します。

nextui add

出力

NextUI CLI v0.2.1

? Which components would you like to add? › - Space to select. Return to submit 

Filtered results for: Enter something to filter

◯   accordion
◯   autocomplete
◯   avatar
◯   badge
◯   breadcrumbs
◯   button
◯   calendar
◯   card
◯   checkbox
◯ ↓ chip

特定のコンポーネントを追加する場合は、コンポーネント名を指定できます。

nextui add button input

出力

NextUI CLI v0.2.1

Adding the required dependencies: @nextui-org/button

pnpm add @nextui-org/button
Packages: +1
+
Progress: resolved 470, reused 462, downloaded 0, added 0, done

dependencies:
+ @nextui-org/button 2.0.24

Done in 3.4s

Tailwind CSS settings have been updated in: /project-path/tailwind.config.js

✅ Components added successfully

upgrade

NextUIコンポーネントを最新バージョンにアップグレードします。

nextui upgrade [components...] [options]

オプション

-p --packagePath [string] package.jsonファイルへのパス。
-a --all [boolean] すべてのNextUIコンポーネントをアップグレードします（デフォルト：false）。
-h, --help コマンドのヘルプを表示します。

例

nextui upgrade button

出力

NextUI CLI v0.2.1

╭───────────────────────── Component ─────────────────────────╮
│  @nextui-org/button              ^2.0.11  ->  ^2.0.31       │
╰─────────────────────────────────────────────────────────────╯

Required min version: @nextui-org/theme>=2.1.0, tailwindcss>=3.4.0
╭───────────────────── PeerDependencies ─────────────────────╮
│  @nextui-org/theme               2.0.1    ->  2.1.0        │
│  tailwindcss                     ^3.2.3   ->  ^3.4.0       │
╰────────────────────────────────────────────────────────────╯
2 minor, 1 patch

? Would you like to proceed with the upgrade? › - Use arrow-keys. Return to submit.
❯   Yes
    No

pnpm add @nextui-org/button@2.0.31 @nextui-org/theme@2.1.0 tailwindcss@3.4.0
Already up to date
Progress: resolved 474, reused 465, downloaded 0, added 0, done
Done in 2.9s

✅ Upgrade complete. All components are up to date.

remove

プロジェクトからNextUIコンポーネントを削除します。

注記: 削除後に NextUI コンポーネントがない場合、必要なコンテンツも削除されます。_createMdxContent

nextui remove [components...] [options]

オプション

-p --packagePath [string] package.jsonファイルへのパス。
-a --all [boolean] すべての NextUI コンポーネントを削除します（デフォルト: false）。
-tw --tailwindPath [string] tailwind.config ファイルへのパス。
--prettier [boolean] prettier がインストールされている場合に、prettier フォーマットを追加します（デフォルト: false）。

例

nextui remove button

出力

NextUI CLI v0.2.1

❗️ Components slated for removal:
╭──────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
│   Package              │   Version              │   Status   │   Docs                                        │
│──────────────────────────────────────────────────────────────────────────────────────────────────────────────│
│   @nextui-org/button   │   2.0.27 🚀latest      │   stable   │   https://nextui.dokyumento.jp/docs/components/button   │
╰──────────────────────────────────────────────────────────────────────────────────────────────────────────────╯
? Confirm removal of these components: › - Use arrow-keys. Return to submit.
❯   Yes
    No

pnpm remove  @nextui-org/button
Already up to date
Progress: resolved 474, reused 465, downloaded 0, added 0, done

dependencies:
- @nextui-org/button 2.0.27

Done in 2.1s

Remove the removed components tailwind content in file:/project-path/tailwind.config.js

✅ Successfully removed the specified NextUI components: @nextui-org/button

NextUI CLI v0.2.1

Current installed components:

╭───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
│   Package                    │   Version              │   Status    │   Docs                                              │
│───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────│
│   @nextui-org/autocomplete   │   2.0.10 🚀latest      │   newPost   │   https://nextui.dokyumento.jp/docs/components/autocomplete   │
│   @nextui-org/badge          │   2.0.24 🚀latest      │   stable    │   https://nextui.dokyumento.jp/docs/components/badge          │
│   @nextui-org/button         │   2.0.27 🚀latest      │   stable    │   https://nextui.dokyumento.jp/docs/components/button         │
│   @nextui-org/chip           │   2.0.25 🚀latest      │   stable    │   https://nextui.dokyumento.jp/docs/components/chip           │
╰───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯

ドクター

プロジェクトの問題を診断します。

プロジェクトに 冗長な依存関係 があるかどうかを確認します。

NextUI コンポーネントに必要な 依存関係がプロジェクトにインストールされているか を確認します。

必要な tailwind.config.js ファイルとコンテンツが正しいかを確認します。

.npmrc が pnpm を使用する際に正しいかを確認します。

必要なバージョンを持つ peerDependencies がプロジェクトにインストールされているかを確認します。

nextui doctor [options]

オプション

-p --packagePath [string] package.json ファイルへのパス
-tw --tailwindPath [string] tailwind.config ファイルへのパス
-app --appPath [string] App.tsx ファイルへのパス
-ca --checkApp [boolean] App チェックを有効にします (デフォルト: true)
-ct --checkTailwind [boolean] tailwind.config ファイルのチェックを有効にします (デフォルト: true)
-cp --checkPnpm [boolean] Pnpm チェックを有効にします (デフォルト: true)

例

nextui doctor

出力

プロジェクトに問題がある場合、doctor コマンドは問題情報を表示します。

NextUI CLI v0.2.1

NextUI CLI: ❌ Your project has 1 issue that require attention

❗️Issue 1: missingTailwind

Missing tailwind.config.(j|t)s file. To set up, visit: https://nextui.dokyumento.jp/docs/guide/installation#tailwind-css-setup

そうでない場合、doctor コマンドは次のメッセージを表示します。

NextUI CLI v0.2.1

✅ Your project has no detected issues.

環境

ローカル環境に関するデバッグ情報を表示します。

nextui env [options]

オプション

-p --packagePath [string] package.jsonファイルへのパス

例

nextui env

出力

NextUI CLI 0.2.1

Current installed components:

╭───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
│   Package                    │   Version              │   Status    │   Docs                                              │
│───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────│
│   @nextui-org/autocomplete   │   2.0.10 🚀latest      │   newPost   │   https://nextui.dokyumento.jp/docs/components/autocomplete   │
│   @nextui-org/badge          │   2.0.24 🚀latest      │   stable    │   https://nextui.dokyumento.jp/docs/components/badge          │
│   @nextui-org/button         │   2.0.27 🚀latest      │   stable    │   https://nextui.dokyumento.jp/docs/components/button         │
│   @nextui-org/chip           │   2.0.25 🚀latest      │   stable    │   https://nextui.dokyumento.jp/docs/components/chip           │
╰───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯

Environment Info:
  System:
    OS: darwin
    CPU: arm64
  Binaries:
    Node: v18.18.2