HeroUI

https://v2.heroui.com/docs
Admin
HeroUI is a React UI library that combines Tailwind CSS and React Aria to provide beautiful,...
Tokens:105,120
Snippets:1,244
Trust Score:9.6
Update:1 month ago
Show doc for...
Tokens:
Raw
### Install Individual Component

Source: https://v2.heroui.com/docs/guide/installation

Example command to install a specific component, such as the Button.

```bash
pnpm add @heroui/button
```

```bash
npm install @heroui/button
```

```bash
yarn add @heroui/button
```

```bash
bun add @heroui/button
```

--------------------------------

### Install Core Packages for Individual Setup

Source: https://v2.heroui.com/docs/guide/installation

Install the required core packages before using individual components.

```bash
pnpm add @heroui/system @heroui/theme framer-motion
```

```bash
npm install @heroui/system @heroui/theme framer-motion
```

```bash
yarn add @heroui/system @heroui/theme framer-motion
```

```bash
bun add @heroui/system @heroui/theme framer-motion
```

--------------------------------

### Installation

Source: https://v2.heroui.com/docs/components/toast

Commands for installing the Toast component via various package managers.

```bash
pnpm add @heroui/toast
```

```bash
npm install @heroui/toast
```

```bash
yarn add @heroui/toast
```

```bash
bun add @heroui/toast
```

--------------------------------

### Install main library via CLI

Source: https://v2.heroui.com/docs/frameworks/laravel

Install the core @heroui/react library using the CLI.

```bash
npx @heroui/cli add
```

--------------------------------

### Install Chip via CLI

Source: https://v2.heroui.com/docs/components/chip

Use the HeroUI CLI to install the Chip component individually. This step is optional if @heroui/react is already installed globally.

```bash
npx heroui-cli@latest add chip
```

--------------------------------

### List installed components

Source: https://v2.heroui.com/docs/api-references/cli-api

Display a list of all currently installed HeroUI components.

```bash
npx heroui@latest list
```

```text
Installed components:
- Button
- Input
```

--------------------------------

### Install useAsyncList and use-infinite-scroll hooks

Source: https://v2.heroui.com/docs/components/table

Commands to install the necessary hooks for implementing infinite pagination in the Table component.

```bash
pnpm add @react-stately/data @heroui/use-infinite-scroll
```

```bash
npm install @react-stately/data @heroui/use-infinite-scroll
```

```bash
yarn add @react-stately/data @heroui/use-infinite-scroll
```

```bash
bun add @react-stately/data @heroui/use-infinite-scroll
```

--------------------------------

### Global Installation of HeroUI CLI

Source: https://v2.heroui.com/docs/guide/cli

Install the CLI globally using npm.

```bash
npm install heroui-cli -g
```

--------------------------------

### Install useAsyncList hook

Source: https://v2.heroui.com/docs/components/table

Commands to install the @react-stately/data package required for managing data sorting.

```bash
pnpm add @react-stately/data
```

```bash
npm install @react-stately/data
```

```bash
yarn add @react-stately/data
```

```bash
bun add @react-stately/data
```

--------------------------------

### Install Select via CLI

Source: https://v2.heroui.com/docs/components/select

Use the HeroUI CLI to add the Select component to your project. This step is unnecessary if @heroui/react is already installed globally.

```bash
npx heroui-cli@latest add select
```

--------------------------------

### List

Source: https://v2.heroui.com/docs/api-references/cli-api

List all the currently installed components.

```APIDOC
## List

### Description
List all the currently installed components.

### Options
- **-p, --packagePath** (string) - Optional - The path to the package.json file
- **-r, --remote** (boolean) - Optional - List all components available remotely
```

--------------------------------

### Install HeroUI Dependencies

Source: https://v2.heroui.com/docs/frameworks/nextjs

Install the necessary HeroUI packages using your preferred package manager.

```bash
pnpm add @heroui/react framer-motion
npm install @heroui/react framer-motion
yarn add @heroui/react framer-motion
bun add @heroui/react framer-motion
```

--------------------------------

### Install Drawer via CLI

Source: https://v2.heroui.com/docs/components/drawer

Use the HeroUI CLI to add the Drawer component to your project. This step is only required for individual component installation.

```bash
npx heroui-cli@latest add drawer
```

--------------------------------

### Install Spinner via CLI

Source: https://v2.heroui.com/docs/components/spinner

Use the HeroUI CLI to add the Spinner component to your project. This step is optional if @heroui/react is already installed.

```bash
npx heroui-cli@latest add spinner
```

--------------------------------

### Install Input OTP via CLI

Source: https://v2.heroui.com/docs/components/input-otp

Use the HeroUI CLI to add the InputOtp component to your project. This step is optional if @heroui/react is already installed globally.

```bash
npx heroui-cli@latest add input-otp
```

--------------------------------

### Install Pagination via CLI

Source: https://v2.heroui.com/docs/components/pagination

Use the HeroUI CLI to add the pagination component to your project. This step is optional if @heroui/react is already installed globally.

```bash
npx heroui-cli@latest add pagination
```

--------------------------------

### Install Input component via CLI

Source: https://v2.heroui.com/docs/components/input

Use the HeroUI CLI to add the Input component to your project. This step is unnecessary if @heroui/react is already installed globally.

```bash
npx heroui-cli@latest add input
```

--------------------------------

### Install Form via CLI

Source: https://v2.heroui.com/docs/components/form

Use the HeroUI CLI to add the Form component to your project. This step is optional if @heroui/react is already installed.

```bash
npx heroui-cli@latest add form
```

--------------------------------

### Install Autocomplete via CLI

Source: https://v2.heroui.com/docs/components/autocomplete

Use the HeroUI CLI to add the Autocomplete component to your project. This step is optional if @heroui/react is already installed globally.

```bash
npx heroui-cli@latest add autocomplete
```

--------------------------------

### Install Dropdown via CLI

Source: https://v2.heroui.com/docs/components/dropdown

Use the HeroUI CLI to add the Dropdown component to your project. This step is unnecessary if @heroui/react is already installed globally.

```bash
npx heroui-cli@latest add dropdown
```

--------------------------------

### Install DatePicker via CLI

Source: https://v2.heroui.com/docs/components/date-picker

Use the HeroUI CLI to add the DatePicker component to your project. This step is unnecessary if @heroui/react is already installed globally.

```bash
npx heroui-cli@latest add date-picker
```

--------------------------------

### Install Popover via CLI

Source: https://v2.heroui.com/docs/components/popover

Use the HeroUI CLI to add the Popover component to your project. This command is for individual installation if the full package is not already present.

```bash
npx heroui-cli@latest add popover
```

--------------------------------

### Install Image Component via CLI

Source: https://v2.heroui.com/docs/components/image

Use the HeroUI CLI to add the Image component to your project. This step is optional if @heroui/react is already installed.

```bash
npx heroui-cli@latest add image
```

--------------------------------

### Install Radio Group via CLI

Source: https://v2.heroui.com/docs/components/radio-group

Use the HeroUI CLI to add the Radio Group component to your project. This command is for individual installation and can be skipped if @heroui/react is already installed globally.

```bash
npx heroui-cli@latest add radio
```

--------------------------------

### Initialize HeroUI project with CLI

Source: https://v2.heroui.com/docs/frameworks/vite

Use the HeroUI CLI to create a new project with HeroUI pre-configured.

```bash
npx heroui-cli@latest init -t vite
```

--------------------------------

### Initialize a new HeroUI project

Source: https://v2.heroui.com/docs/api-references/cli-api

Use the init command to scaffold a new project with official templates.

```bash
npx heroui@latest init
```

--------------------------------

### Install @internationalized/date

Source: https://v2.heroui.com/docs/components/date-picker

Install the required internationalization package using your preferred package manager.

```bash
pnpm add @internationalized/date
```

```bash
npm install @internationalized/date
```

```bash
yarn add @internationalized/date
```

--------------------------------

### Init

Source: https://v2.heroui.com/docs/api-references/cli-api

Initialize a new HeroUI project with official templates.

```APIDOC
## Init

### Description
Initialize a new HeroUI project with official templates.

### Options
- **-t, --template** (string) - Optional - The template to use for the new project (e.g., app, laravel, pages, remix, vite)
- **-p, --package** (string) - Optional - The package manager to use for the new project (default: npm)
```

--------------------------------

### Add HeroUI components

Source: https://v2.heroui.com/docs/api-references/cli-api

Run the add command to select and install components into your project.

```bash
npx heroui@latest add
```

```text
? Which components would you like to add? (Use arrow keys to select)
❯ ◯ Button
  ◯ Input
  ◯ Modal
```

--------------------------------

### Breadcrumbs Start and End Content

Source: https://v2.heroui.com/docs/components/breadcrumbs

Add icons or elements to the start or end of the breadcrumbs.

```jsx
<Breadcrumbs>
  <BreadcrumbItem startContent={<HomeIcon />}>Home</BreadcrumbItem>
  <BreadcrumbItem startContent={<MusicIcon />}>Music</BreadcrumbItem>
  <BreadcrumbItem>Artist</BreadcrumbItem>
</Breadcrumbs>
```

--------------------------------

### Install Kbd via CLI

Source: https://v2.heroui.com/docs/components/kbd

Use the HeroUI CLI to add the Kbd component to your project.

```bash
npx heroui-cli@latest add kbd
```

--------------------------------

### Install Switch via CLI

Source: https://v2.heroui.com/docs/components/switch

Use the HeroUI CLI to add the Switch component to your project.

```bash
npx heroui-cli@latest add switch
```

--------------------------------

### Setup HeroUIProvider

Source: https://v2.heroui.com/docs/frameworks/laravel

Wrap your application root with HeroUIProvider to enable theme and component functionality.

```jsx
import {HeroUIProvider} from "@heroui/react";

function App({Component, pageProps}) {
  return (
    <HeroUIProvider>
      <Component {...pageProps} />
    </HeroUIProvider>
  );
}
```

--------------------------------

### Install Navbar via CLI

Source: https://v2.heroui.com/docs/components/navbar

Use the HeroUI CLI to add the Navbar component to your project. This step is optional if @heroui/react is already installed.

```bash
npx heroui-cli@latest add navbar
```

--------------------------------

### Install Breadcrumbs via CLI

Source: https://v2.heroui.com/docs/components/breadcrumbs

Use the CLI to add the Breadcrumbs component to your project. This step is unnecessary if @heroui/react is already installed globally.

```bash
npx heroui-cli@latest add breadcrumbs
```

--------------------------------

### Create Remix project with HeroUI template

Source: https://v2.heroui.com/docs/frameworks/remix

Use the official template to initialize a new Remix project pre-configured with HeroUI.

```bash
npx create-remix@latest --template https://github.com/heroui-inc/remix-template
```

--------------------------------

### Install Alert via CLI

Source: https://v2.heroui.com/docs/components/alert

Use the HeroUI CLI to add the Alert component to your project.

```bash
npx heroui-cli@latest add alert
```

--------------------------------

### Install Slider via CLI

Source: https://v2.heroui.com/docs/components/slider

Use the HeroUI CLI to add the Slider component to your project. This step is unnecessary if @heroui/react is already installed globally.

```bash
npx heroui-cli@latest add slider
```

--------------------------------

### Install Skeleton via CLI

Source: https://v2.heroui.com/docs/components/skeleton

Use the HeroUI CLI to add the Skeleton component to your project.

```bash
npx heroui-cli@latest add skeleton
```

--------------------------------

### Install Tooltip via CLI

Source: https://v2.heroui.com/docs/components/tooltip

Use the HeroUI CLI to add the Tooltip component to your project.

```bash
npx heroui-cli@latest add tooltip
```

--------------------------------

### Install Modal via CLI

Source: https://v2.heroui.com/docs/components/modal

Use the HeroUI CLI to add the Modal component to your project. This step is unnecessary if @heroui/react is already installed globally.

```bash
npx heroui-cli@latest add modal
```
Tokens:
Raw