使用美观组件快速交付
NextUI Pro

CLI

CLI 提供了一套全面的命令，用于初始化、管理和改进 NextUI 项目。它使您能够 添加、删除 或 升级 单个组件，评估项目的运行状况，等等。

安装

要求

全局安装

若要全局安装 CLI，请在终端中执行以下命令之一

npm install nextui-cli -g

不安装

或者，你可以使用 CLI，而无需全局安装，方法是使用 npx

npx nextui-cli@latest

快速入门

安装 CLI 后，运行以下命令以显示可用命令

nextui

这将生成以下帮助输出

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 项目。这将使用必要的配置来设置你的项目。

nextui init my-nextui-app

系统会提示你配置项目

┌  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

安装依赖项以启动本地服务器

cd my-nextui-app && npm install

启动本地服务器

npm run dev

add

使用 add 命令将组件添加到 NextUI 项目。此命令管理组件依赖项并更新项目配置。

未指定特定组件

nextui add

系统将提示您选择要添加的组件

? Which components would you like to add? › - Space to select. Return to submit
Instructions:
    ↑/↓: Highlight option
    ←/→/[space]: Toggle selection
    [a,b,c]/delete: Filter choices
    enter/return: Complete answer


Filtered results for: Enter something to filter


◯  accordion
◯  autocomplete
◯  avatar
◯  badge
◯  breadcrumbs
◉  button
◯  card
◯  checkbox
◯  chip
◯  code

要添加特定组件

nextui add button

您将看到一条输出，确认已添加组件

Adding the required dependencies: @nextui-org/button


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


✅ Components added successfully

upgrade

使用 upgrade 命令升级项目中的特定 NextUI 组件，以确保它们是最新的。

nextui upgrade button

系统将要求您确认升级



╭───────────────────────── 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

确认后，命令将执行并提供类似于以下内容的输出

✅ Upgrade complete. All components are up to date.

remove

使用 remove 命令从 NextUI 项目中移除组件。这有助于管理项目的组件结构和依赖项。

nextui remove button

将显示确认提示

❗️ 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

确认后，输出将指示移除成功

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

list

使用 list 命令列出项目中安装的所有 NextUI 组件。这提供了项目中当前包含内容的清晰概述。

nextui list

输出将详细说明每个组件

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

使用 doctor 命令诊断并解决项目中的问题。这可确保项目的健康和正确配置。

nextui doctor

根据项目的状况，您可能会看到

✅ Your project has no detected issues.

或者，如果检测到问题

❌ Your project has 1 issue that requires attention

env

使用 env 命令显示有关项目环境设置的详细信息。这包括系统、依赖项和配置详细信息。

nextui env

输出将反映您当前的环境设置

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

API 参考

在 API 参考 中探索完整的 CLI 命令和功能。

有关更新和源代码，请访问 GitHub 存储库。

安装设计原则