CLI
The CLI offers a comprehensive suite of commands to initialize, manage, and improve your NextUI projects. It enables you to add, remove, or upgrade individual components, assess the health of your project, and more.
Installation
Requirements:
Global Installation
To install the CLI globally, execute one of the following commands in your terminal:
npm install nextui-cli -g
Without Installation
Alternatively, you can use the CLI without a global installation by running the following command:
npx nextui-cli@latest
Quick Start
Once the CLI is installed, run the following command to display available commands:
nextui
This will produce the following help output:
NextUI CLI <version>A command line tool for seamless integration with NextUIUsage: 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 commandsCommands:init [options] [projectName] Start a new NextUI projectadd [options] [components...] Add NextUI components to your projectupgrade [options] [components...] Update NextUI components to the latest versionsremove [options] [components...] Remove NextUI components from your projectlist [options] Show details of installed componentsenv [options] Display debug information about the local environmentdoctor [options] Diagnose problems in your projecthelp [command] Get help on a specific command
init
Initialize a new NextUI project using the init command. This sets up your project with the necessary configurations.
nextui init my-nextui-app
You will be prompted to configure your project:
┌ 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
Install the dependencies to start the local server:
cd my-nextui-app && npm install
Start the local server:
npm run dev
add
Add components to your NextUI project with the add command. This command manages component dependencies and updates your project configurations.
Without specifying a specific component:
nextui add
You will be prompted to select the components you wish to add:
? Which components would you like to add? › - Space to select. Return to submitInstructions:↑/↓: Highlight option←/→/[space]: Toggle selection[a,b,c]/delete: Filter choicesenter/return: Complete answerFiltered results for: Enter something to filter◯ accordion◯ autocomplete◯ avatar◯ badge◯ breadcrumbs◉ button◯ card◯ checkbox◯ chip◯ code
To add a specific component:
nextui add button
You will see an output confirming the addition of the component:
Adding the required dependencies: @nextui-org/buttonTailwind CSS settings have been updated in: /project-path/tailwind.config.js✅ Components added successfully
upgrade
Upgrade all the NextUI components within your project.
nextui upgrade --all
Upgrade specific NextUI components within your project using the upgrade command to ensure they are up to date.
nextui upgrade button
You will be asked to confirm the upgrade:
╭───────────────────────── 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.❯ YesNo
Upon confirmation, the command will execute and provide an output similar to:
✅ Upgrade complete. All components are up to date.
remove
Remove components from your NextUI project with the remove command. This helps in managing the project's component structure and dependencies.
nextui remove button
A confirmation prompt will be displayed:
❗️ Components slated for removal:╭──────────────────────────────────────────────────────────────────────────────────────────────────────────────╮│ Package │ Version │ Status │ Docs ││──────────────────────────────────────────────────────────────────────────────────────────────────────────────││ @nextui-org/button │ 2.0.27 🚀latest │ stable │ https://nextui.org/docs/components/button │╰──────────────────────────────────────────────────────────────────────────────────────────────────────────────╯? Confirm removal of these components: › - Use arrow-keys. Return to submit.❯ YesNo
Following confirmation, the output will indicate successful removal:
✅ Successfully removed the specified NextUI components: @nextui-org/button
list
List all installed NextUI components in your project with the list command. This provides a clear overview of what is currently included in your project.
nextui list
The output will detail each component:
Current installed components:╭───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮│ Package │ Version │ Status │ Docs ││───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────││ @nextui-org/autocomplete │ 2.0.10 🚀latest │ newPost │ https://nextui.org/docs/components/autocomplete ││ @nextui-org/badge │ 2.0.24 🚀latest │ stable │ https://nextui.org/docs/components/badge ││ @nextui-org/button │ 2.0.27 🚀latest │ stable │ https://nextui.org/docs/components/button ││ @nextui-org/chip │ 2.0.25 🚀latest │ stable │ https://nextui.org/docs/components/chip │╰───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯
doctor
Diagnose and resolve issues within your project using the doctor command. This ensures your project's health and proper configuration.
nextui doctor
Depending on your project's status, you might see:
✅ Your project has no detected issues.
Or, if issues are detected:
❌ Your project has 1 issue that requires attention
env
Display detailed information about your project's environment settings using the env command. This includes system, dependencies, and configuration details.
nextui env
The output will reflect your current environment setup:
Current installed components:╭───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮│ Package │ Version │ Status │ Docs ││───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────││ @nextui-org/autocomplete │ 2.0.10 🚀latest │ newPost │ https://nextui.org/docs/components/autocomplete ││ @nextui-org/badge │ 2.0.24 🚀latest │ stable │ https://nextui.org/docs/components/badge ││ @nextui-org/button │ 2.0.27 🚀latest │ stable │ https://nextui.org/docs/components/button ││ @nextui-org/chip │ 2.0.25 🚀latest │ stable │ https://nextui.org/docs/components/chip │╰───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯Environment Info:System:OS: darwinCPU: arm64Binaries:Node: v18.18.2
API Reference
Explore the complete CLI commands and features in the API References.
For updates and source code, visit the GitHub Repository.
