mirror of
https://github.com/nextui-org/nextui.git
synced 2025-12-08 19:26:11 +00:00
443 lines
16 KiB
Plaintext
443 lines
16 KiB
Plaintext
---
|
||
title: HeroUI CLI
|
||
description: API References for HeroUI CLI
|
||
---
|
||
|
||
# HeroUI CLI
|
||
|
||
------
|
||
|
||
|
||
<CarbonAd/>
|
||
|
||
<Spacer y={4} />
|
||
|
||
Here's the API reference for the `HeroUI CLI`.
|
||
|
||
Once the `CLI` is installed, run the following command to display available commands:
|
||
|
||
To get a list of the available CLI commands, run the following command inside your project directory:
|
||
|
||
```codeBlock bash
|
||
heroui -h
|
||
```
|
||
|
||
This will produce the following help output:
|
||
|
||
```codeBlock bash
|
||
HeroUI CLI <version>
|
||
|
||
A command line tool for seamless integration with HeroUI
|
||
|
||
Usage: heroui [command]
|
||
|
||
Options:
|
||
-v, --version Output the current version
|
||
--no-cache Disable cache, by default data will be cached for 30m after the first request
|
||
-d, --debug Debug mode will not install dependencies
|
||
-h --help Display help information for commands
|
||
|
||
Commands:
|
||
init [options] [projectName] Initializes a new project
|
||
add [options] [targets...] 1. Adds components to your project
|
||
2. Adds HeroUI Chat codebase to your project
|
||
upgrade [options] [components...] Upgrades project components to the latest versions
|
||
remove [options] [components...] Removes components from the project
|
||
list [options] Lists all components, showing status, descriptions, and versions
|
||
env [options] Displays debugging information for the local environment
|
||
doctor [options] Checks for issues in the project
|
||
help [command] Display help for command
|
||
```
|
||
|
||
## Commands
|
||
|
||
### Init
|
||
|
||
Initialize a new HeroUI project with official templates.
|
||
|
||
```codeBlock bash
|
||
heroui init [projectName] [options]
|
||
```
|
||
|
||
#### Init Options
|
||
|
||
- `-t --template [string]` The template to use for the new project e.g. app, laravel, pages, remix, vite
|
||
- `-p --package [string]` The package manager to use for the new project (default: `npm`)
|
||
|
||
##### Example
|
||
|
||
```codeBlock bash
|
||
# Initialize a new HeroUI project with the app template, named my-heroui-app
|
||
heroui init my-heroui-app -t app
|
||
```
|
||
|
||
output:
|
||
|
||
```codeBlock bash
|
||
HeroUI CLI v0.2.1
|
||
|
||
┌ Create a new project
|
||
│
|
||
◇ Select a template (Enter to select)
|
||
│ ● App (A Next.js 15 with app directory template pre-configured with HeroUI (v2) and Tailwind CSS.)
|
||
│ ○ Pages (A Next.js 15 with pages directory template pre-configured with HeroUI (v2) and Tailwind CSS.)
|
||
│ ○ Vite (A Vite template pre-configured with HeroUI (v2) and Tailwind CSS.)
|
||
│ ○ Remix (A Remix template pre-configured with HeroUI (v2) and Tailwind CSS.)
|
||
│ ○ Laravel (A Laravel template pre-configured with HeroUI (v2) and Tailwind CSS.)
|
||
│
|
||
◇ New project name (Enter to skip with default name)
|
||
│ my-heroui-app
|
||
│
|
||
◇ Select a package manager (Enter to select)
|
||
│ ● npm
|
||
│ ○ yarn
|
||
│ ○ pnpm
|
||
│ ○ bun
|
||
│
|
||
◇ Template created successfully!
|
||
│
|
||
◇ Next steps ───────╮
|
||
│ │
|
||
│ cd my-heroui-app │
|
||
│ npm install │
|
||
│ │
|
||
├────────────────────╯
|
||
│
|
||
└ 🚀 Get started with npm run dev
|
||
```
|
||
|
||
### Add
|
||
|
||
1. Add HeroUI components to your project.
|
||
2. Add HeroUI Chat codebase to your project.
|
||
|
||
#### Features
|
||
|
||
> 1. Auto add the missing required `dependencies` to your project
|
||
> 2. Auto add the required `tailwindcss.config.js` configuration to your project
|
||
> 3. Detect whether using pnpm, if so, add the required configuration to your `.npmrc` file
|
||
> 4. Add HeroUI Chat codebase to your project
|
||
|
||
```codeBlock bash
|
||
heroui add [targets...] [options]
|
||
```
|
||
|
||
#### Add Options
|
||
|
||
- `-a --all` [boolean] Add all components (default: `false`)
|
||
- `-p --packagePath` [string] The path to the package.json file
|
||
- `-tw --tailwindPath` [string] The path to the tailwind.config file file
|
||
- `-app --appPath` [string] The path to the App.tsx file
|
||
- `--prettier` [boolean] Add prettier format in the add content which required installed prettier - (default: `false`)
|
||
- `--addApp` [boolean] Add App.tsx file content which required provider (default: `false`)
|
||
- `-b --beta` [boolean] Add beta components (default: `false`)
|
||
- `-d --directory` [string] Add HeroUI Chat codebase to a specific directory
|
||
|
||
##### Example
|
||
|
||
Without setting a specific component, the `add` command will show a list of available components.
|
||
|
||
```codeBlock bash
|
||
heroui add
|
||
```
|
||
|
||
Output:
|
||
|
||
```codeBlock bash
|
||
HeroUI CLI v0.2.1
|
||
|
||
? 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
|
||
```
|
||
|
||
If you want to add a specific component, you can specify the component name.
|
||
|
||
```codeBlock bash
|
||
heroui add button
|
||
```
|
||
|
||
Output:
|
||
|
||
```codeBlock bash
|
||
HeroUI CLI v0.2.1
|
||
|
||
Adding the required dependencies: @heroui/button
|
||
|
||
pnpm add @heroui/button
|
||
Packages: +1
|
||
+
|
||
Progress: resolved 470, reused 462, downloaded 0, added 0, done
|
||
|
||
dependencies:
|
||
+ @heroui/button 2.0.24
|
||
|
||
Done in 3.4s
|
||
|
||
Tailwind CSS settings have been updated in: /project-path/tailwind.config.js
|
||
|
||
✅ Components added successfully
|
||
```
|
||
|
||
### Upgrade
|
||
|
||
Upgrade the HeroUI components to the latest version.
|
||
|
||
```codeBlock bash
|
||
heroui upgrade [components...] [options]
|
||
```
|
||
|
||
#### Upgrade Options
|
||
|
||
- `-p --packagePath` [string] The path to the package.json file
|
||
- `-a --all` [boolean] Upgrade all the HeroUI components (default: `false`)
|
||
- `-w --write` [boolean] Write the upgrade version to package.json file (default: `false`)
|
||
- `-b --beta` [boolean] Upgrade beta components (default: `false`)
|
||
- `-h --help` Display help for command
|
||
|
||
##### Example
|
||
|
||
Upgrade the **Button** component to the latest version.
|
||
|
||
```codeBlock bash
|
||
heroui upgrade button
|
||
```
|
||
|
||
Output:
|
||
|
||
```codeBlock bash
|
||
HeroUI CLI v0.2.1
|
||
|
||
╭───────────────────────── Component ─────────────────────────╮
|
||
│ @heroui/button ^2.0.11 -> ^2.0.31 │
|
||
╰─────────────────────────────────────────────────────────────╯
|
||
|
||
Required min version: @heroui/theme>=2.1.0, tailwindcss>=3.4.0, react>=18.3.1, react-dom>=18.3.1
|
||
╭───────────────────── PeerDependencies ─────────────────────╮
|
||
│ @heroui/theme 2.0.1 -> 2.1.0 │
|
||
│ tailwindcss ^3.2.3 -> ^3.4.0 │
|
||
│ react Missing -> 18.3.1 │
|
||
│ react-dom Missing -> 18.3.1 │
|
||
╰────────────────────────────────────────────────────────────╯
|
||
2 major, 2 minor, 1 patch
|
||
|
||
? Would you like to proceed with the upgrade? › - Use arrow-keys. Return to submit.
|
||
❯ Yes
|
||
No
|
||
|
||
pnpm add @heroui/button@2.0.31 @heroui/theme@2.1.0 tailwindcss@3.4.0 react@18.3.1 react-dom@18.3.1
|
||
|
||
dependencies:
|
||
- @heroui/theme 2.0.1
|
||
+ @heroui/theme 2.1.0 (2.2.3 is available)
|
||
+ react 18.3.1
|
||
+ react-dom 18.3.1
|
||
|
||
Done in 1.8s
|
||
|
||
✅ Upgrade complete. All components are up to date.
|
||
```
|
||
|
||
### Remove
|
||
|
||
Remove HeroUI components from your project.
|
||
|
||
> **Note**: If there are no HeroUI components after removing, the required content will also be removed
|
||
|
||
```codeBlock bash
|
||
heroui remove [components...] [options]
|
||
```
|
||
|
||
#### Remove Options
|
||
|
||
- `-p --packagePath` [string] The path to the package.json file
|
||
- `-a --all` [boolean] Remove all the HeroUI components (default: `false`)
|
||
- `-tw --tailwindPath` [string] The path to the tailwind.config file file
|
||
- `--prettier` [boolean] Add prettier format in the add content which required installed prettier - (default: `false`)
|
||
|
||
##### Example
|
||
|
||
Remove the **Button** component from your project.
|
||
|
||
```codeBlock bash
|
||
heroui remove button
|
||
```
|
||
|
||
Output:
|
||
|
||
```codeBlock bash
|
||
HeroUI CLI v0.2.1
|
||
|
||
❗️ Components slated for removal:
|
||
╭──────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
|
||
│ Package │ Version │ Status │ Docs │
|
||
│──────────────────────────────────────────────────────────────────────────────────────────────────────────────│
|
||
│ @heroui/button │ 2.0.27 🚀latest │ stable │ https://heroui.com/docs/components/button │
|
||
╰──────────────────────────────────────────────────────────────────────────────────────────────────────────────╯
|
||
? Confirm removal of these components: › - Use arrow-keys. Return to submit.
|
||
❯ Yes
|
||
No
|
||
|
||
pnpm remove @heroui/button
|
||
Already up to date
|
||
Progress: resolved 474, reused 465, downloaded 0, added 0, done
|
||
|
||
dependencies:
|
||
- @heroui/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 HeroUI components: @heroui/button
|
||
```
|
||
|
||
### List
|
||
|
||
List all the current installed components.
|
||
|
||
```codeBlock bash
|
||
heroui list [options]
|
||
```
|
||
|
||
#### List Options
|
||
|
||
- `-p --packagePath` [string] The path to the package.json file
|
||
- `-r --remote` List all components available remotely
|
||
|
||
##### Example
|
||
|
||
```codeBlock bash
|
||
heroui list
|
||
```
|
||
|
||
Output:
|
||
|
||
```codeBlock bash
|
||
HeroUI CLI v0.2.1
|
||
|
||
Current installed components:
|
||
|
||
╭───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
|
||
│ Package │ Version │ Status │ Docs │
|
||
│───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────│
|
||
│ @heroui/autocomplete │ 2.0.10 🚀latest │ stable │ https://heroui.com/docs/components/autocomplete │
|
||
│ @heroui/badge │ 2.0.24 🚀latest │ stable │ https://heroui.com/docs/components/badge │
|
||
│ @heroui/button │ 2.0.27 🚀latest │ stable │ https://heroui.com/docs/components/button │
|
||
│ @heroui/chip │ 2.0.25 🚀latest │ stable │ https://heroui.com/docs/components/chip │
|
||
╰───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯
|
||
```
|
||
|
||
### Doctor
|
||
|
||
Check whether exist problem in your project by using the `doctor` command.
|
||
|
||
```codeBlock bash
|
||
heroui doctor [options]
|
||
```
|
||
|
||
### Features
|
||
|
||
> 1. Check whether have `redundant dependencies` in the project
|
||
> 2. Check whether the HeroUI components `required dependencies are installed` in the project
|
||
> 3. Check the required `tailwind.config.js` file and the content is correct
|
||
> 4. Check `.npmrc` is correct when using `pnpm`
|
||
> 5. Check `peerDependencies with required version` are installed in the project
|
||
|
||
#### Doctor Options
|
||
|
||
- `-p` `--packagePath` [string] The path to the package.json file
|
||
- `-tw` `--tailwindPath` [string] The path to the tailwind.config file file
|
||
- `-app` `--appPath` [string] The path to the App.tsx file
|
||
- `-ca` `--checkApp` [boolean] Open check App (default: `true`)
|
||
- `-ct` `--checkTailwind` [boolean] Open check tailwind.config file (default: `true`)
|
||
- `-cp` `--checkPnpm` [boolean] Open check Pnpm (default: `true`)
|
||
|
||
#### Example
|
||
|
||
```codeBlock bash
|
||
heroui doctor
|
||
```
|
||
|
||
Output:
|
||
|
||
If there is a problem in your project, the `doctor` command will display the problem information.
|
||
|
||
```codeBlock bash
|
||
HeroUI CLI v0.2.1
|
||
|
||
HeroUI CLI: ❌ Your project has 1 issue that require attention
|
||
|
||
❗️Issue 1: missingTailwind
|
||
|
||
Missing tailwind.config.(j|t)s file. To set up, visit: https://heroui.com/docs/guide/installation#tailwind-css-setup
|
||
```
|
||
|
||
Otherwise, the `doctor` command will display the following message.
|
||
|
||
```codeBlock bash
|
||
HeroUI CLI v0.2.1
|
||
|
||
✅ Your project has no detected issues.
|
||
```
|
||
|
||
### Env
|
||
|
||
Display debug information about the local environment.
|
||
|
||
```codeBlock bash
|
||
heroui env [options]
|
||
```
|
||
|
||
#### Env Options
|
||
|
||
- `-p --packagePath` [string] The path to the package.json file
|
||
|
||
#### Example
|
||
|
||
Display the local environment Information by using the `env` command.
|
||
|
||
```codeBlock bash
|
||
heroui env
|
||
```
|
||
|
||
Output:
|
||
|
||
```codeBlock bash
|
||
HeroUI CLI v0.2.1
|
||
|
||
Current installed components:
|
||
|
||
╭───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
|
||
│ Package │ Version │ Status │ Docs │
|
||
│───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────│
|
||
│ @heroui/autocomplete │ 2.0.10 🚀latest │ stable │ https://heroui.com/docs/components/autocomplete │
|
||
│ @heroui/badge │ 2.0.24 🚀latest │ stable │ https://heroui.com/docs/components/badge │
|
||
│ @heroui/button │ 2.0.27 🚀latest │ stable │ https://heroui.com/docs/components/button │
|
||
│ @heroui/chip │ 2.0.25 🚀latest │ stable │ https://heroui.com/docs/components/chip │
|
||
╰───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯
|
||
|
||
Environment Info:
|
||
System:
|
||
OS: darwin
|
||
CPU: arm64
|
||
Binaries:
|
||
Node: v18.18.2
|
||
```
|