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

添加

自动添加项目中缺少的必需 dependencies

自动添加项目中所需的 tailwindcss.config.js 配置

检测是否使用 pnpm，如果是，则将所需的配置添加到您的 .npmrc 文件中

要将组件添加到您的项目中，请使用 add 命令

nextui add [components...] [options]

选项

-a --all [布尔值] 添加所有 NextUI 组件（默认值：false）
-p --packagePath [字符串] package.json 文件的路径
-tw --tailwindPath [字符串] tailwind.config 文件的路径
-app --appPath [字符串] App.tsx 文件的路径
--prettier [布尔值] 在添加的内容中添加 prettier 格式，需要安装 prettier - （默认值：false）
--addApp [布尔值] 添加需要提供程序的 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

升级

将 NextUI 组件升级到最新版本。

nextui upgrade [components...] [options]

选项

-p --packagePath [字符串] package.json 文件的路径。
-a --all [布尔值] 升级所有 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/[email protected] @nextui-org/[email protected] [email protected]
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.

移除

从项目中移除 NextUI 组件。

注意：如果移除后没有 NextUI 组件，则也会移除所需内容_createMdxContent

nextui remove [components...] [options]

选项

-p --packagePath [字符串] package.json 文件的路径。
-a --all [布尔值] 移除所有 NextUI 组件（默认：false）。
-tw --tailwindPath [字符串] Tailwind.config 文件的路径。
--prettier [布尔值] 在添加内容时添加 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.org.cn/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

list

显示已安装组件的详细信息。

nextui list [options]

选项

-p --packagePath [字符串] package.json 文件的路径
-r --remote 列出所有远程可用的组件

示例

nextui list

输出

NextUI CLI v0.2.1

Current installed components:

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

doctor

诊断项目中的问题。

检查项目中是否具有 冗余依赖项

检查项目中是否安装了 NextUI 组件 所需依赖项

检查所需的 tailwind.config.js 文件，并确保内容正确

使用 pnpm 时，请检查 .npmrc 文件是否正确。

请检查项目中是否安装了 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.org.cn/docs/guide/installation#tailwind-css-setup

否则，doctor 命令将显示以下消息。

NextUI CLI v0.2.1

✅ Your project has no detected issues.

env

显示有关本地环境的调试信息。

nextui env [options]

选项

-p --packagePath [字符串] 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.org.cn/docs/components/autocomplete   │
│   @nextui-org/badge          │   2.0.24 🚀latest      │   stable    │   https://nextui.org.cn/docs/components/badge          │
│   @nextui-org/button         │   2.0.27 🚀latest      │   stable    │   https://nextui.org.cn/docs/components/button         │
│   @nextui-org/chip           │   2.0.25 🚀latest      │   stable    │   https://nextui.org.cn/docs/components/chip           │
╰───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯

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