### Create Next.js Project with HeroUI Example (Pages Directory) Source: https://beta.heroui.com/docs/guide/introduction/frameworks/nextjs Create a new Next.js project using `create-next-app` with a pre-configured HeroUI example for the Pages Directory. This provides a quick start with HeroUI already integrated into a functional Next.js application. ```pnpm pnpm create next-app --example with-heroui my-app ``` ```npm npm create next-app --example with-heroui my-app ``` ```yarn yarn create next-app --example with-heroui my-app ``` -------------------------------- ### Install HeroUI Components via CLI (App Router & Pages Directory) Source: https://beta.heroui.com/docs/guide/introduction/frameworks/nextjs Use the HeroUI CLI to automatically add individual components or the entire `@heroui/react` library to your Next.js project. This command also manages all related dependencies, simplifying the setup process. ```bash npx heroui add button ``` ```bash npx heroui add button input ``` ```bash npx heroui add @heroui/react ``` -------------------------------- ### Install HeroUI Core Packages for Individual Setup Source: https://beta.heroui.com/docs/guide/introduction/guide/installation Before installing individual components, ensure the core HeroUI packages are installed. These foundational packages are required for all HeroUI components to operate correctly. ```pnpm pnpm add @heroui/core ``` ```npm npm install @heroui/core ``` ```yarn yarn add @heroui/core ``` ```bun bun add @heroui/core ``` -------------------------------- ### Initialize New Next.js Project with HeroUI CLI (Pages Directory) Source: https://beta.heroui.com/docs/guide/introduction/frameworks/nextjs Use the HeroUI CLI to quickly set up a new Next.js project with the Pages Directory structure, pre-configured with HeroUI. This command streamlines the initial project setup, providing a ready-to-use environment. ```bash npx heroui init ``` -------------------------------- ### Install All HeroUI Components Globally Source: https://beta.heroui.com/docs/guide/introduction/guide/installation Install the complete HeroUI library by running one of the following commands in your terminal. This method imports all components from a single package for ease of use. ```pnpm pnpm add @heroui/react ``` ```npm npm install @heroui/react ``` ```yarn yarn add @heroui/react ``` ```bun bun add @heroui/react ``` -------------------------------- ### Install HeroUI Components using CLI Source: https://beta.heroui.com/docs/guide/introduction/frameworks/vite Use the HeroUI CLI to automatically add individual or multiple components, or the entire @heroui/react library, to your project. The CLI handles dependency management, simplifying the installation process. ```bash npx heroui add button ``` ```bash npx heroui add button input ``` ```bash npx heroui add @heroui/react ``` -------------------------------- ### Manually Install HeroUI Library Dependencies Source: https://beta.heroui.com/docs/guide/introduction/frameworks/nextjs Install the core `@heroui/react` library in your Next.js project using your preferred package manager. This step is essential for manual setup and provides the foundational HeroUI components. ```pnpm pnpm add @heroui/react ``` ```npm npm install @heroui/react ``` ```yarn yarn add @heroui/react ``` ```bun bun add @heroui/react ``` -------------------------------- ### Use an Individually Installed HeroUI Component Source: https://beta.heroui.com/docs/guide/introduction/guide/installation After installing a specific HeroUI component, import and use it in your React application. This example demonstrates how to integrate the Button component into your UI. ```React import { Button } from '@heroui/button'; function MyComponent() { return ( ); } ``` -------------------------------- ### Install Specific HeroUI Components Individually Source: https://beta.heroui.com/docs/guide/introduction/guide/installation Install only the components you need, such as the Button component, to reduce your CSS bundle size. This approach allows for more granular control over your project's dependencies. ```pnpm pnpm add @heroui/button ``` ```npm npm install @heroui/button ``` ```yarn yarn add @heroui/button ``` ```bun bun add @heroui/button ``` -------------------------------- ### Install HeroUI Components via CLI in Laravel Source: https://beta.heroui.com/docs/guide/introduction/frameworks/laravel Use the HeroUI CLI to automatically add components and manage dependencies in your Laravel project. This method simplifies the installation of individual components or the entire HeroUI React library. Ensure `npx` is available in your environment. ```Bash npx heroui add button ``` ```Bash npx heroui add button input ``` ```Bash npx heroui add @heroui/react ``` ```Bash npx heroui add ``` -------------------------------- ### Install HeroUI Navbar Component Source: https://beta.heroui.com/docs/guide/introduction/components/navbar This snippet provides commands to install the HeroUI Navbar component using various package managers. This is for individual component installation; if `@heroui/react` is already globally installed, this step can be skipped. ```pnpm pnpm add @heroui/navbar ``` ```npm npm install @heroui/navbar ``` ```yarn yarn add @heroui/navbar ``` ```bun bun add @heroui/navbar ``` -------------------------------- ### Add HeroUI Components using CLI Source: https://beta.heroui.com/docs/guide/introduction/guide/installation Use the HeroUI CLI to quickly add individual components, multiple components, or the entire @heroui/react library to your project. This command automatically manages component dependencies. ```Shell npx heroui add button ``` ```Shell npx heroui add button input ``` ```Shell npx heroui add @heroui/react ``` -------------------------------- ### Install HeroUI Dependencies After Migration Source: https://beta.heroui.com/docs/guide/introduction/guide/nextui-to-heroui After running the automatic migration codemod, install the newly updated HeroUI dependencies. This step ensures all required packages are correctly installed for your migrated project. ```pnpm pnpm install ``` ```npm npm install ``` ```yarn yarn install ``` ```bun bun install ``` -------------------------------- ### Set up HeroUIProvider for Individual Component Usage Source: https://beta.heroui.com/docs/guide/introduction/guide/installation Ensure HeroUIProvider is added at the root of your application, regardless of whether you're using global or individual HeroUI installations. This provider is fundamental for component functionality. ```React import { HeroUIProvider } from '@heroui/react'; function App() { return ( {/* Your application */} ); } ``` -------------------------------- ### Set up HeroUIProvider for Global HeroUI Usage Source: https://beta.heroui.com/docs/guide/introduction/guide/installation Wrap your application's root component with HeroUIProvider. This is essential for HeroUI components to function correctly, providing necessary context and themes. ```React import { HeroUIProvider } from '@heroui/react'; function App() { return ( {/* Your application */} ); } ``` -------------------------------- ### Set up HeroUIProvider in React Application Source: https://beta.heroui.com/docs/guide/introduction/frameworks/vite Wrap your main application component with `HeroUIProvider` in `main.jsx` or `main.tsx` to enable HeroUI's context and functionality throughout your application. This is a mandatory step for HeroUI components to function correctly. ```jsx import React from 'react'; import ReactDOM from 'react-dom/client'; import App from './App.jsx'; import './index.css'; import { HeroUIProvider } from '@heroui/react'; ReactDOM.createRoot(document.getElementById('root')).render( ); ``` -------------------------------- ### Set Up HeroUI Provider in Next.js App Router Source: https://beta.heroui.com/docs/guide/introduction/frameworks/nextjs Create an `app/providers.tsx` or `app/providers.jsx` file and wrap your application's children with `HeroUIProvider`. This component enables HeroUI's context, theming, and other functionalities for your components. ```javascript 'use client'; import { HeroUIProvider } from '@heroui/react'; export function Providers({ children }) { return ( {children} ); } ``` -------------------------------- ### Install HeroUI Beta for Tailwind v4 Projects Source: https://beta.heroui.com/docs/guide/introduction/guide/tailwind-v4 Install the beta version of HeroUI, which is compatible with TailwindCSS v4. This step is crucial before proceeding with configuration updates. Use your preferred package manager. ```pnpm pnpm add @heroui/react@beta ``` ```npm npm install @heroui/react@beta ``` ```yarn yarn add @heroui/react@beta ``` ```bun bun add @heroui/react@beta ``` -------------------------------- ### Set Up HeroUI Provider in Next.js Pages Directory Source: https://beta.heroui.com/docs/guide/introduction/frameworks/nextjs Modify your `pages/_app.js` or `pages/_app.tsx` file to wrap the `Component` with `HeroUIProvider`. This ensures HeroUI's context and theming are available across all pages in your Pages Directory project, providing consistent UI. ```javascript import { HeroUIProvider } from '@heroui/react'; function MyApp({ Component, pageProps }) { return ( ); } export default MyApp; ``` -------------------------------- ### Install HeroUI in Astro Projects Source: https://beta.heroui.com/docs/guide/introduction/frameworks/astro Install the HeroUI library into your Astro project using your preferred package manager. This step adds the core HeroUI dependencies required for development. ```pnpm pnpm add @heroui/react ``` ```npm npm install @heroui/react ``` ```yarn yarn add @heroui/react ``` ```bun bun add @heroui/react ``` -------------------------------- ### Configure Tailwind CSS for HeroUI Source: https://beta.heroui.com/docs/guide/introduction/frameworks/vite Integrate HeroUI with your existing Tailwind CSS setup by extending the `content` array in your `tailwind.config.js` file. This ensures Tailwind processes HeroUI's component styles correctly. Remember to point to the root `node_modules` in monorepos. ```javascript /** @type {import('tailwindcss').Config} */ module.exports = { content: [ // ... './node_modules/@heroui/**/*.{js,ts,jsx,tsx}' ], theme: { extend: {}, }, plugins: [] } ``` -------------------------------- ### Interactively Add HeroUI Components with CLI Source: https://beta.heroui.com/docs/guide/introduction/frameworks/remix Run this command without specifying a component name to have the HeroUI CLI prompt you to select which components to add interactively, guiding you through the installation process. ```Shell npx heroui@latest add ``` -------------------------------- ### Manually Add HeroUI Dependencies to Laravel Source: https://beta.heroui.com/docs/guide/introduction/frameworks/laravel Install the core HeroUI React library manually using your preferred package manager. This step adds `@heroui/react` to your project's dependencies, preparing it for component usage. Choose the command corresponding to your package manager. ```pnpm pnpm add @heroui/react ``` ```npm npm install @heroui/react ``` ```yarn yarn add @heroui/react ``` ```bun bun add @heroui/react ``` -------------------------------- ### Import HeroUI Components in App Router Source: https://beta.heroui.com/docs/guide/introduction/frameworks/nextjs Import individual HeroUI components directly from their specific packages, rather than from `@heroui/react`. This approach allows for better tree-shaking, optimizing your bundle size by only including the components you use. ```javascript import { Button } from '@heroui/react/button'; ``` -------------------------------- ### Add HeroUI Dependencies Manually Source: https://beta.heroui.com/docs/guide/introduction/frameworks/vite Manually install the @heroui/react library in your Vite React project using your preferred package manager. This step is a prerequisite for using HeroUI components. ```pnpm pnpm add @heroui/react ``` ```npm npm install @heroui/react ``` ```yarn yarn add @heroui/react ``` ```bun bun add @heroui/react ``` -------------------------------- ### Configure pnpm Hoisted Dependencies for Individual HeroUI Packages Source: https://beta.heroui.com/docs/guide/introduction/guide/installation For pnpm users installing individual HeroUI packages, add this line to your .npmrc file. This step is crucial for correctly hoisting dependencies to the root node_modules. ```npmrc public-hoist-pattern[]=@heroui/* ``` -------------------------------- ### Install HeroUI Image Component Source: https://beta.heroui.com/docs/guide/introduction/components/image This snippet provides commands to install the HeroUI Image component using various package managers. It's an individual installation step, which can be skipped if `@heroui/react` is already installed globally in your project. ```pnpm pnpm add @heroui/image ``` ```npm npm install @heroui/image ``` ```yarn yarn add @heroui/image ``` ```bun bun add @heroui/image ``` -------------------------------- ### Set Up Tailwind CSS for HeroUI in Laravel Source: https://beta.heroui.com/docs/guide/introduction/frameworks/laravel Integrate HeroUI with your Tailwind CSS configuration by extending the `content` array in `tailwind.config.js`. This step ensures that Tailwind CSS correctly processes HeroUI's utility classes. Verify the path points to the root `node_modules` in monorepo setups. ```JavaScript /** @type {import('tailwindcss').Config} */ module.exports = { content: [ "./node_modules/@heroui/**/*.{js,ts,jsx,tsx}" ], theme: { extend: {} }, plugins: [] } ``` -------------------------------- ### Install HeroUI DatePicker Component Source: https://beta.heroui.com/docs/guide/introduction/components/date-picker This snippet provides commands to install the `@heroui/date-picker` package using various package managers. This is for individual component installation; you may skip this step if `@heroui/react` is already installed globally. ```pnpm pnpm add @heroui/date-picker ``` ```npm npm install @heroui/date-picker ``` ```yarn yarn add @heroui/date-picker ``` ```bun bun add @heroui/date-picker ``` -------------------------------- ### Install HeroUI Project Dependencies Source: https://beta.heroui.com/docs/guide/introduction/guide/cli Installs all required project dependencies after initializing a new HeroUI project. This step is crucial for the project to function correctly and access all necessary libraries. It ensures all packages defined in the project's manifest are available. ```pnpm pnpm install ``` ```npm npm install ``` ```yarn yarn install ``` ```bun bun install ``` -------------------------------- ### Configure pnpm Hoisted Dependencies for Global HeroUI Source: https://beta.heroui.com/docs/guide/introduction/guide/installation If using pnpm for global HeroUI installation, add this line to your .npmrc file. This ensures that HeroUI packages are correctly hoisted to the root node_modules directory, resolving potential dependency issues. ```npmrc public-hoist-pattern[]=@heroui/* ``` -------------------------------- ### Configure pnpm Hoisted Dependencies for HeroUI Source: https://beta.heroui.com/docs/guide/introduction/frameworks/nextjs For pnpm users, add this line to your `.npmrc` file to ensure HeroUI packages are correctly hoisted to the root `node_modules`. After modifying the file, you must run `pnpm install` again to apply the changes. ```npmrc public-hoist-pattern[]=@heroui/* ``` -------------------------------- ### List Installed HeroUI Components with CLI Source: https://beta.heroui.com/docs/guide/introduction/guide/cli The `list` command provides a clear overview of all HeroUI components currently installed in your project. It details each component's name and version. This helps in quickly assessing your project's component inventory. ```Shell # List all installed HeroUI components heroui list # Example output Installed HeroUI Components: - Button v1.0.0 - Navbar v2.1.0 - Card v1.5.2 ``` -------------------------------- ### HeroUI CLI Init Command API Reference Source: https://beta.heroui.com/docs/guide/introduction/api-references/cli-api Details the `init` command for initializing new HeroUI projects. It specifies the available options for selecting a project template and a package manager, enabling quick project setup. ```json { "command": "init", "description": "Initialize a new HeroUI project with official templates.", "options": [ { "name": "-t, --template", "type": "string", "description": "The template to use for the new project e.g. app, laravel, pages, remix, vite" }, { "name": "-p, --package", "type": "string", "description": "The package manager to use for the new project (default: npm)" } ], "example": "heroui init -t app -p npm" } ``` -------------------------------- ### Install HeroUI Skeleton Component Source: https://beta.heroui.com/docs/guide/introduction/components/skeleton Install the `@heroui/skeleton` package using your preferred package manager. This step is optional if `@heroui/react` is already installed globally, as it often includes individual components. ```pnpm pnpm add @heroui/skeleton ``` ```npm npm install @heroui/skeleton ``` ```yarn yarn add @heroui/skeleton ``` ```bun bun add @heroui/skeleton ``` -------------------------------- ### Configure pnpm Hoisted Dependencies for HeroUI Source: https://beta.heroui.com/docs/guide/introduction/frameworks/laravel If using pnpm, configure your `.npmrc` file to hoist HeroUI packages to the root `node_modules` directory. This ensures correct dependency resolution for HeroUI components. After modification, run `pnpm install` again to apply changes. ```INI public-hoist-pattern[]=@heroui/* ``` ```Bash pnpm install ``` -------------------------------- ### Configure pnpm Hoisted Dependencies for HeroUI Source: https://beta.heroui.com/docs/guide/introduction/frameworks/vite For pnpm users, add a specific pattern to your .npmrc file to ensure HeroUI packages are correctly hoisted to the root node_modules. This is crucial for proper dependency resolution and requires running pnpm install again after modification. ```ini public-hoist-pattern[]=@heroui/* ``` -------------------------------- ### Install HeroUI Spacer Component via CLI Source: https://beta.heroui.com/docs/guide/introduction/components/spacer This snippet provides commands to install the @heroui/spacer package using various package managers. Choose the command corresponding to your preferred package manager for individual installation. ```pnpm pnpm add @heroui/spacer ``` ```npm npm install @heroui/spacer ``` ```yarn yarn add @heroui/spacer ``` ```bun bun add @heroui/spacer ``` -------------------------------- ### Integrate HeroUI Provider into App Router Root Layout Source: https://beta.heroui.com/docs/guide/introduction/frameworks/nextjs Import the `Providers` component into your root layout file (e.g., `app/layout.tsx`) and wrap your `children` with it. This ensures the HeroUI context is available throughout your entire application, enabling consistent styling and behavior. ```javascript import { Providers } from './providers'; export default function RootLayout({ children }) { return ( {children} ); } ``` -------------------------------- ### Install HeroUI Accordion Component Source: https://beta.heroui.com/docs/guide/introduction/components/accordion This snippet provides commands to install the @heroui/accordion package using various package managers. Choose the command that corresponds to your preferred package manager. ```CLI heroui add accordion ``` ```pnpm pnpm add @heroui/accordion ``` ```npm npm install @heroui/accordion ``` ```yarn yarn add @heroui/accordion ``` ```bun bun add @heroui/accordion ``` -------------------------------- ### Basic Usage of HeroUI Textarea Source: https://beta.heroui.com/docs/guide/introduction/components/textarea This example shows the basic implementation of the Textarea component. It includes a label and a placeholder to guide user input. The component is ready for use within a React functional component. ```React import { Textarea } from "@heroui/input"; function MyForm() { return (

);
}
```

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

### Install HeroUI Textarea Component

Source: https://beta.heroui.com/docs/guide/introduction/components/textarea

This snippet demonstrates how to install the @heroui/input package, which includes the Textarea component. Choose the command corresponding to your preferred package manager. This step can be skipped if @heroui/react is already installed globally.

```Shell
npx heroui add @heroui/input
```

```Shell
pnpm add @heroui/input
```

```Shell
npm install @heroui/input
```

```Shell
yarn add @heroui/input
```

```Shell
bun add @heroui/input
```

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

### HeroUI CLI: List Installed Components

Source: https://beta.heroui.com/docs/guide/introduction/api-references/cli-api

The `list` command displays all HeroUI components currently installed in your project. It also offers an option to list all components available remotely, providing a comprehensive overview of your component ecosystem.

```APIDOC
-p --packagePath [string] The path to the package.json file
-r --remote List all components available remotely
```

```CLI
# List all currently installed components
heroui list
```

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

### Configure Tailwind CSS for Global HeroUI Styles

Source: https://beta.heroui.com/docs/guide/introduction/guide/installation

Integrate HeroUI's styles by updating your tailwind.config.js file. This configuration points Tailwind CSS to the HeroUI package, ensuring all component styles are included in your build.

```JavaScript
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './node_modules/@heroui/react/**/*.{js,ts,jsx,tsx}',
    // ...
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}
```

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

### Install HeroUI Modal Component

Source: https://beta.heroui.com/docs/guide/introduction/components/modal

This snippet provides commands to install the `@heroui/modal` package using various JavaScript package managers. This is a prerequisite for using the Modal component in your project.

```pnpm
pnpm add @heroui/modal
```

```npm
npm install @heroui/modal
```

```yarn
yarn add @heroui/modal
```

```bun
bun add @heroui/modal
```

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

### Configure Tailwind CSS for Individual HeroUI Component Styles

Source: https://beta.heroui.com/docs/guide/introduction/guide/installation

When using individual HeroUI packages, update your tailwind.config.js to include styles only for the components you've installed. This optimizes your CSS bundle by only including necessary styles.

```JavaScript
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './node_modules/@heroui/button/**/*.{js,ts,jsx,tsx}',
    // ...
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}
```

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

### Customize Calendar Content with Presets

Source: https://beta.heroui.com/docs/guide/introduction/components/range-calendar

This section provides an example for customizing the `topContent` and `bottomContent` areas of the calendar. This allows for adding preset values or custom UI elements.

```APIDOC
Props: topContent, bottomContent
Type: ReactNode | Function
Description: Customizable slots for adding content above and below the calendar grid, useful for presets or custom UI.
```

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

### Install HeroUI Avatar Component

Source: https://beta.heroui.com/docs/guide/introduction/components/avatar

This snippet provides commands to install the `@heroui/avatar` package using various package managers. This step can be skipped if `@heroui/react` is already installed globally.

```pnpm
pnpm add @heroui/avatar
```

```npm
npm install @heroui/avatar
```

```yarn
yarn add @heroui/avatar
```

```bun
bun add @heroui/avatar
```

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

### Integrate HeroUIProvider in Laravel React App

Source: https://beta.heroui.com/docs/guide/introduction/frameworks/laravel

Wrap your main application component with `HeroUIProvider` in `app.jsx` or `app.tsx` to enable HeroUI's theming and context features. This is a crucial step for HeroUI components to function correctly within your React application. Place it at the root of your component tree.

```JSX
import { HeroUIProvider } from '@heroui/react';

function App() {
  return (
    <HeroUIProvider>
      {/* Your app content */}
    </HeroUIProvider>
  );
}
```

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

### Install HeroUI Dependencies in Remix

Source: https://beta.heroui.com/docs/guide/introduction/frameworks/remix

This section provides commands to install HeroUI and its peer dependencies using various package managers. Choose the command corresponding to your preferred package manager (pnpm, npm, yarn, or bun) to add HeroUI to your Remix project. Ensure you have the respective package manager installed.

```pnpm
pnpm add @heroui/react
```

```npm
npm install @heroui/react
```

```yarn
yarn add @heroui/react
```

```bun
bun add @heroui/react
```

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

### Display HeroUI CLI Available Commands

Source: https://beta.heroui.com/docs/guide/introduction/api-references/cli-api

This snippet shows how to run the HeroUI CLI to display a list of all available commands and their basic usage. It helps users quickly understand the CLI's capabilities upon installation.

```bash
heroui --help
```

```text
Usage: heroui [options] [command]

Commands:
  init [options]  Initialize a new HeroUI project
  add [options]   Add HeroUI components or chat codebase

Options:
  -h, --help      display help for command
```

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

### Implement Basic HeroUI Navbar in React

Source: https://beta.heroui.com/docs/guide/introduction/components/navbar

This snippet provides a basic example of how to use the HeroUI Navbar component to create a responsive navigation header. It includes the main Navbar component along with NavbarBrand, NavbarContent, and NavbarItem for common navigation elements.

```TypeScript React
import { Navbar, NavbarBrand, NavbarContent, NavbarItem } from "@heroui/navbar";

function MyNavbar() {
  return (
    <Navbar>
      <NavbarBrand>
        <p className="font-bold text-inherit">HEROUI</p>
      </NavbarBrand>
      <NavbarContent className="hidden sm:flex gap-4" justify="center">
        <NavbarItem>
          <a href="#">Features</a>
        </NavbarItem>
        <NavbarItem isActive>
          <a href="#" aria-current="page">Customers</a>
        </NavbarItem>
        <NavbarItem>
          <a href="#">Integrations</a>
        </NavbarItem>
      </NavbarContent>
      <NavbarContent justify="end">
        <NavbarItem className="hidden lg:flex">
          <a href="#">Login</a>
        </NavbarItem>
        <NavbarItem>
          <button>Sign Up</button>
        </NavbarItem>
      </NavbarContent>
    </Navbar>
  );
}

export default MyNavbar;
```

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

### Install HeroUI Scroll Shadow Component

Source: https://beta.heroui.com/docs/guide/introduction/components/scroll-shadow

This section provides commands to install the `@heroui/scroll-shadow` package using various package managers. Choose the command corresponding to your preferred package manager (pnpm, npm, yarn, or bun). This step can be skipped if `@heroui/react` is already installed globally.

```pnpm
pnpm add @heroui/scroll-shadow
```

```npm
npm install @heroui/scroll-shadow
```

```yarn
yarn add @heroui/scroll-shadow
```

```bun
bun add @heroui/scroll-shadow
```

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

### Configure pnpm for HeroUI Hoisted Dependencies

Source: https://beta.heroui.com/docs/guide/introduction/frameworks/astro

For pnpm users, this step is crucial to ensure HeroUI packages are correctly hoisted to the root `node_modules` directory. Add the specified line to your `.npmrc` file and re-run `pnpm install`.

```npmrc
shamefully-hoist=true
```

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

### Add Multiple HeroUI Components with CLI

Source: https://beta.heroui.com/docs/guide/introduction/frameworks/remix

Use this CLI command to add several HeroUI components simultaneously, streamlining the setup process for common UI elements and their associated dependencies.

```Shell
npx heroui@latest add button input
```

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

### Configure Tailwind CSS for HeroUI Integration

Source: https://beta.heroui.com/docs/guide/introduction/frameworks/nextjs

Update your `tailwind.config.js` file to include HeroUI's component paths, allowing Tailwind CSS to correctly process HeroUI styles. If using pnpm with a monorepo, ensure the path points to the ROOT `node_modules` for proper resolution.

```javascript
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    './app/**/*.{js,ts,jsx,tsx,mdx}',
    './node_modules/@heroui/**/*.{js,ts,jsx,tsx,mdx}', // add this line
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}
```

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

### Install HeroUI Checkbox Component

Source: https://beta.heroui.com/docs/guide/introduction/components/checkbox-group

Installs the `@heroui/checkbox` package using various package managers. This step is for individual component installation and can be skipped if `@heroui/react` is already installed globally in your project.

```pnpm
pnpm add @heroui/checkbox
```

```npm
npm install @heroui/checkbox
```

```yarn
yarn add @heroui/checkbox
```

```bun
bun add @heroui/checkbox
```

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

### Install HeroUI CLI Globally

Source: https://beta.heroui.com/docs/guide/introduction/guide/cli

Installs the HeroUI CLI tool globally on your system, allowing access to its commands from any directory. This method is suitable for frequent CLI usage across multiple projects. It requires Node.js version 18.17.x or later to be installed.

```pnpm
pnpm add -g heroui
```

```npm
npm i -g heroui
```

```yarn
yarn global add heroui
```

```bun
bun add -g heroui
```

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

### DateInput Component API Reference: Props

Source: https://beta.heroui.com/docs/guide/introduction/components/date-input

Comprehensive reference for all available props of the DateInput component, including their types, default values, and detailed descriptions for configuration and behavior control.

```APIDOC
[
  {"prop": "label", "type": "ReactNode", "default": ""},
  {"prop": "value", "type": "DateValue", "default": ""},
  {"prop": "defaultValue", "type": "DateValue", "default": ""},
  {"prop": "variant", "type": "flat | bordered | faded | underlined", "default": "\"flat\""},
  {"prop": "color", "type": "default | primary | secondary | success | warning | danger", "default": "\"default\""},
  {"prop": "size", "type": "sm | md | lg", "default": "\"md\""},
  {"prop": "radius", "type": "none | sm | md | lg | full", "default": ""},
  {"prop": "placeholderValue", "type": "DateValue", "default": ""},
  {"prop": "minValue", "type": "DateValue", "default": ""},
  {"prop": "maxValue", "type": "DateValue", "default": ""},
  {"prop": "locale", "type": "string", "default": ""},
  {"prop": "description", "type": "ReactNode", "default": ""},
  {"prop": "errorMessage", "type": "ReactNode | (v: ValidationResult) => ReactNode", "default": ""},
  {"prop": "labelPlacement", "type": "inside | outside | outside-left", "default": "\"inside\""},
  {"prop": "isRequired", "type": "boolean", "default": "false"},
  {"prop": "isReadOnly", "type": "boolean", "default": ""},
  {"prop": "isDisabled", "type": "boolean", "default": "false"},
  {"prop": "isInvalid", "type": "boolean", "default": "false"},
  {"prop": "autoFocus", "type": "boolean", "default": "false"},
  {"prop": "hideTimeZone", "type": "boolean", "default": "false"},
  {"prop": "disableAnimation", "type": "boolean", "default": "false"},
  {"prop": "classNames", "type": "Partial<Record<\"base\" | \"label\" | \"inputWrapper\" | \"input\" | \"segment\" | \"helperWrapper\" | \"description\" | \"errorMessage\", string>>", "default": ""}
]
```

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

### API: Tooltip Props Reference

Source: https://beta.heroui.com/docs/guide/introduction/components/tooltip

Lists all available properties for the Tooltip component, including their types, default values, and descriptions.

```APIDOC
[
  {"prop": "children*", "type": "ReactNode[]", "default": null},
  {"prop": "content", "type": "ReactNode", "default": null},
  {"prop": "size", "type": "sm | md | lg", "default": "\"md\""},
  {"prop": "color", "type": "default | primary | secondary | success | warning | danger", "default": "\"default\""},
  {"prop": "radius", "type": "none | sm | md | lg | full", "default": "\"md\""},
  {"prop": "shadow", "type": "none | sm | md | lg", "default": "\"sm\""},
  {"prop": "placement", "type": "TooltipPlacement", "default": "\"top\""},
  {"prop": "delay", "type": "number", "default": "\"0\""},
  {"prop": "closeDelay", "type": "number", "default": "\"500\""},
  {"prop": "isOpen", "type": "boolean", "default": null},
  {"prop": "defaultOpen", "type": "boolean", "default": null},
  {"prop": "offset", "type": "number", "default": "\"7\""},
  {"prop": "containerPadding", "type": "number", "default": "\"12\""},
  {"prop": "crossOffset", "type": "number", "default": "\"0\""},
  {"prop": "showArrow", "type": "boolean", "default": "false"},
  {"prop": "shouldFlip", "type": "boolean", "default": "true"},
  {"prop": "triggerScaleOnOpen", "type": "boolean", "default": "true"},
  {"prop": "isKeyboardDismissDisabled", "type": "boolean", "default": "false"},
  {"prop": "isDismissable", "type": "boolean", "default": "false"},
  {"prop": "shouldCloseOnBlur", "type": "boolean", "default": "true"},
  {"prop": "motionProps", "type": "MotionProps", "default": null},
  {"prop": "portalContainer", "type": "HTMLElement", "default": "\"document.body\""},
  {"prop": "updatePositionDeps", "type": "any[]", "default": "\"[]\""},
  {"prop": "isDisabled", "type": "boolean", "default": "false"},
  {"prop": "disableAnimation", "type": "boolean", "default": "false"},
  {"prop": "classNames", "type": "Partial<Record<\"base\"｜\"content\", string>>", "default": null}
]
```

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

### API: Tooltip Events Reference

Source: https://beta.heroui.com/docs/guide/introduction/components/tooltip

Details the event handlers available for the Tooltip component, including their signatures and purposes.

```APIDOC
[
  {"prop": "onOpenChange", "type": "(isOpen: boolean) => void", "default": null},
  {"prop": "shouldCloseOnInteractOutside", "type": "(e: HTMLElement) => void", "default": null},
  {"prop": "onClose", "type": "() => void", "default": null}
]
```

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

### Run HeroUI CLI Without Global Installation

Source: https://beta.heroui.com/docs/guide/introduction/guide/cli

Executes HeroUI CLI commands without requiring a global installation, useful for one-off tasks or environments where global installs are restricted. This method leverages package manager runners like `npx` or `dlx` to fetch and run the CLI. It also requires Node.js version 18.17.x or later.

```pnpm
pnpm dlx heroui
```

```npm
npx heroui
```

```yarn
yarn dlx heroui
```

```bun
bunx heroui
```

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

### Wrap Root Layout with HeroUIProvider for Next.js App Router

Source: https://beta.heroui.com/docs/guide/introduction/guide/routing

Wrap your root layout page with the `HeroUIProvider` to enable HeroUI components. Skip this step if the provider is already set up in your application.

```APIDOC
Location: root layout page
Action: Wrap content with `<HeroUIProvider>`.
```

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

### Initialize a New HeroUI Project

Source: https://beta.heroui.com/docs/guide/introduction/guide/cli

Sets up a new HeroUI project with necessary configurations, prompting the user for project details. This command is the foundational step for creating a new HeroUI application. It prepares the project structure and initial files.

```Shell
heroui init
```

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

### Pagination Component API Reference

Source: https://beta.heroui.com/docs/guide/introduction/components/pagination

Detailed API reference for the Pagination component, including available props, their types, default values, and events. This section outlines all configurable aspects of the component.

```APIDOC
Pagination Props:
- variant: Type: `flat | bordered | light | faded`, Default: "flat"
- color: Type: `default | primary | secondary | success | warning | danger`, Default: "default"
- size: Type: `sm | md | lg`, Default: "md"
- radius: Type: `none | sm | md | lg | full`, Default: "xl"
- total: Type: `number`, Default: "1"
- dotsJump: Type: `number`, Default: "5"
- initialPage: Type: `number`, Default: "1"
- page: Type: `number`, Default: null
- siblings: Type: `number`, Default: "1"
- boundaries: Type: `number`, Default: "1"
- loop: Type: `boolean`, Default: false
- isCompact: Type: `boolean`, Default: false
- isDisabled: Type: `boolean`, Default: false
- showShadow: Type: `boolean`, Default: false
- showControls: Type: `boolean`, Default: false
- disableCursorAnimation: Type: `boolean`, Default: false
- disableAnimation: Type: `boolean`, Default: false
- renderItem: Type: `PaginationItemProps`, Default: null
- getItemAriaLabel: Type: `(page: string) => string`, Default: null
- classNames: Type: `Partial<Record<'base' | 'wrapper' | 'prev' | 'next' | 'item' | 'cursor' | 'forwardIcon' | 'ellipsis' | 'chevronNext', string>>`, Default: null

Pagination Events:
- onChange: Type: `(page: number) => void`, Default: null
```

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

### Use React Server Actions for Form Submission

Source: https://beta.heroui.com/docs/guide/introduction/guide/forms

Explore React Server Actions for seamless form submission to the server. This example demonstrates using the `useActionState` hook to manage the state and results (including errors) of server actions after form submission.

```React
"use client"; // Or "use server" for the action itself
import { useActionState } from 'react';

async function submitFormAction(prevState, formData) {
  // This function runs on the server if "use server" is at the top of the file
  const email = formData.get('email');
  if (!email || !email.includes('@')) {
    return { error: 'Invalid email address.' };
  }
  // Process data, save to DB, etc.
  return { success: 'Form submitted successfully!' };
}

function MyForm() {
  const [state, formAction] = useActionState(submitFormAction, { success: null, error: null });

return (
    <form action={formAction}>
      <input type="email" name="email" placeholder="Email" />
      <button type="submit">Submit</button>
      {state.error && <p style={{ color: 'red' }}>{state.error}</p>}
      {state.success && <p style={{ color: 'green' }}>{state.success}</p>}
    </form>
  );
}
```

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

### Add HeroUI React Library with CLI

Source: https://beta.heroui.com/docs/guide/introduction/frameworks/remix

This command installs the core @heroui/react library into your project, providing access to all HeroUI components and utilities for manual integration.

```Shell
npx heroui@latest add @heroui/react
```

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

### HeroUI Theme Customization API Reference

Source: https://beta.heroui.com/docs/guide/introduction/customization/layout

Defines attributes for customizing the visual theme of HeroUI components, including opacity, sizing, and styling properties. It also references specific theme unit types.

```APIDOC
{
  "API Reference": {
    "description": "Attributes for customizing the visual theme of HeroUI components.",
    "attributes": [
      {
        "name": "hoverOpacity",
        "type": "string | number",
        "description": "A number between 0 and 1 that is applied as opacity-[value] when the component is hovered."
      },
      {
        "name": "disabledOpacity",
        "type": "string | number",
        "description": "A number between 0 and 1 that is applied as opacity-[value] when the component is disabled."
      },
      {
        "name": "dividerWeight",
        "type": "string",
        "description": "The default height applied to the divider component. We recommend to use `px` units."
      },
      {
        "name": "fontSize",
        "type": "FontThemeUnit",
        "description": "The default font size applied across the components."
      },
      {
        "name": "lineHeight",
        "type": "FontThemeUnit",
        "description": "The default line height applied across the components."
      },
      {
        "name": "radius",
        "type": "BaseThemeUnit",
        "description": "The default radius applied across the components. We recommend to use `rem` units."
      },
      {
        "name": "borderWidth",
        "type": "BaseThemeUnit",
        "description": "The border width applied across the components."
      },
      {
        "name": "boxShadow",
        "type": "BaseThemeUnit",
        "description": "The box shadow applied across the components."
      }
    ]
  },
  "BaseThemeUnit": {
    "description": "A theme unit type for base measurements like radius, border width, and box shadow. Specific definition not provided in this snippet."
  },
  "FontThemeUnit": {
    "description": "A theme unit type for font-related measurements like font size and line height. Specific definition not provided in this snippet."
  }
}
```

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

### Install next-themes for Next.js Theme Management

Source: https://beta.heroui.com/docs/guide/introduction/customization/dark-mode

Provides commands to install the 'next-themes' library using pnpm, npm, or yarn package managers. This library is essential for implementing dynamic theme switching in Next.js applications.

```pnpm
pnpm add next-themes
```

```npm
npm install next-themes
```

```yarn
yarn add next-themes
```

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

### Integrate HeroUI with Remix Router

Source: https://beta.heroui.com/docs/guide/introduction/guide/routing

Remix, built on React Router, supports `useNavigate` and `useHref` for HeroUI integration. Render `HeroUIProvider` at the root of each page or in `app/root.tsx` to apply it globally across your Remix application.

```APIDOC
Hooks: `useNavigate`, `useHref` (from React Router).
Provider Location: Root of each page or `app/root.tsx`.
```

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

### HeroUI Switch Component Slots Reference

Source: https://beta.heroui.com/docs/guide/introduction/components/switch

Details the available slots for the HeroUI Switch component, allowing for targeted styling and content insertion.

```APIDOC
* base: Base slot for the switch. It is the main wrapper.
* wrapper: The wrapper of the start icon, end icon and thumb.
* hiddenInput: The hidden input element that is used to handle the switch state.
* thumb: The thumb element of the switch. It is the circle element.
* label: The label slot of the switch.
* startContent: The icon slot at the start of the switch.
* endContent: The icon slot at the end of the switch.
* thumbIcon: The icon slot inside the thumb.
```

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

### Integrate HeroUI with Tailwind CSS in Remix

Source: https://beta.heroui.com/docs/guide/introduction/frameworks/remix

HeroUI is built on top of Tailwind CSS, requiring you to configure your Tailwind CSS setup. After installing Tailwind CSS, update your tailwind.config.js file with the provided configuration to ensure HeroUI components are styled correctly. For monorepo architectures with pnpm, verify that the content path points to the root node_modules.

```JavaScript
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./node_modules/@heroui/react/**/*.{js,ts,jsx,tsx}"
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};
```

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

### HeroUI Form Component API Reference

Source: https://beta.heroui.com/docs/guide/introduction/components/form

Detailed API reference for the HeroUI Form component, listing all available props, their types, and default values.

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

### DateInput Component Accessibility Features

Source: https://beta.heroui.com/docs/guide/introduction/components/date-input

Outlines the robust accessibility features integrated into the DateInput component, ensuring it is usable and navigable for all users, including those relying on assistive technologies.

```Conceptual
- Built with a native `<input>` element.
- Visual and ARIA labeling support.
- Change, clipboard, composition, selection, and input event support.
- Required and invalid states exposed to assistive technology via ARIA.
- Support for description and error message help text linked to the input via ARIA.
- Each date and time unit is displayed as an individually focusable and editable segment, which allows users an easy way to edit dates using the keyboard, in any date format and locale.
- Date segments are editable using an easy to use numeric keypad, and all interactions are accessible using touch-based screen readers.
```

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

### API: Tooltip Types Definitions

Source: https://beta.heroui.com/docs/guide/introduction/components/tooltip

Defines custom types used within the Tooltip component's API, such as TooltipPlacement and MotionProps.

```APIDOC
{
  "TooltipPlacement": "// Definition of TooltipPlacement type (not provided in source)",
  "MotionProps": "// Definition of MotionProps type (not provided in source)"
}
```

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

### HeroUI Switch Component Props API

Source: https://beta.heroui.com/docs/guide/introduction/components/switch

Defines the properties available for the HeroUI Switch component, including their types, default values, and descriptions.

```APIDOC
| Prop | Type | Default |
| --- | --- | --- |
| `children` | `ReactNode` |  |
| `value` | `string` |  |
| `name` | `string` |  |
| `size` | `sm | md | lg` | "md" |
| `color` | `default | primary | secondary | success | warning | danger` | "primary" |
| `thumbIcon` | `ThumbIconProps` |  |
| `startContent` | `ReactNode` |  |
| `endContent` | `ReactNode` |  |
| `isSelected` | `boolean` |  |
| `defaultSelected` | `boolean` |  |
| `isReadOnly` | `boolean` |  |
| `isDisabled` | `boolean` | `false` |
| `disableAnimation` | `boolean` | `false` |
| `classNames` | `Partial<Record<"base"｜ "wrapper"｜ "thumb"｜ "label" ｜ "startContent" ｜ "endContent" ｜ "thumbIcon" , string>>` |  |
```

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

### Utilize HeroUI Components for Navigation

Source: https://beta.heroui.com/docs/guide/introduction/guide/routing

After setting up `HeroUIProvider`, use the `href` prop in `Tabs`, `Listbox`, and `Dropdown` items for page navigation. The `Link` component also leverages the `navigate` function from `HeroUIProvider` for routing.

```APIDOC
Components: `Tabs`, `Listbox`, `Dropdown`, `Link`.
Prop: `href` for navigation.
Functionality: Uses `navigate` from `HeroUIProvider`.
```

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

### Autocomplete Component Accessibility Features

Source: https://beta.heroui.com/docs/guide/introduction/components/autocomplete

Details the accessibility features implemented in the Autocomplete component, ensuring usability for all users, including those with assistive technologies.

```APIDOC
- Support for filtering a list of options by typing
- Support for selecting a single option
- Support for disabled options
- Support for groups of items in sections
- Support for custom user input values
- Support for controlled and uncontrolled options, selection, input value, and open state
- Support for custom filter functions
- Async loading and infinite scrolling support
- Support for virtualized scrolling for performance with long lists
- Exposed to assistive technology as a combobox with ARIA
- Labeling support for accessibility
- Required and invalid states exposed to assistive technology via ARIA
- Support for mouse, touch, and keyboard interactions
- Keyboard support for opening the combo box list box using the arrow keys, including automatically focusing the first or last item accordingly
- Support for opening the list box when typing, on focus, or manually
- Handles virtual clicks on the input from touch screen readers to toggle the list box
- Virtual focus management for combo box list box option navigation
- Hides elements outside the input and list box from assistive technology while the list box is open in a portal
- Custom localized announcements for option focusing, filtering, and selection using an ARIA live region to work around VoiceOver bugs
- Support for description and error message help text linked to the input via ARIA
```

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

### Autocomplete Component Slots

Source: https://beta.heroui.com/docs/guide/introduction/components/autocomplete

Defines the various customizable slots available within the Autocomplete component, allowing for structural and stylistic modifications.

```APIDOC
base: The main wrapper of the autocomplete. This wraps the input and popover components.
listboxWrapper: The wrapper of the listbox. This wraps the listbox component, this slot is used on top of the scroll shadow component.
listbox: The listbox component. This is the component that wraps the autocomplete items.
popoverContent: The popover content slot. Use this to modify the popover content styles.
endContentWrapper: The wrapper of the end content. This wraps the clear button and selector button.
clearButton: The clear button slot.
selectorButton: The selector button slot.
```

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

### HeroUI Switch Component Events API

Source: https://beta.heroui.com/docs/guide/introduction/components/switch

Details the events emitted by the HeroUI Switch component, including their types and associated callbacks.

```APIDOC
| Prop | Type | Default |
| --- | --- | --- |
| `onChange` | `React.ChangeEvent<HTMLInputElement>` |  |
| `onValueChange` | `(isSelected: boolean) => void` |  |
```

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

### InputOtp Component Accessibility API

Source: https://beta.heroui.com/docs/guide/introduction/components/input-otp

The InputOtp component is built with robust accessibility features, ensuring it is usable by a wide range of users, including those relying on assistive technologies. It leverages ARIA attributes and provides comprehensive keyboard navigation.

```APIDOC
{
  "summary": [
    "Built on top of [input-otp](https://github.com/guilhermerodz/input-otp).",
    "Required and invalid states exposed to assistive technology via ARIA.",
    "Support for description and error message help text linked to the input-otp via ARIA."
  ],
  "keyboard_navigation": {
    "Tab": "Moves focus between input segments",
    "Arrow keys": "Navigate between segments",
    "Backspace": "Clears current segment and moves focus to previous segment"
  },
  "aria_attributes": {
    "aria-invalid": "Indicates validation state",
    "aria-required": "Indicates if the input is required"
  }
}
```

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

### Configure Next.js Base Path with HeroUI

Source: https://beta.heroui.com/docs/guide/introduction/guide/routing

For Next.js `basePath` configuration, set an environment variable to access it. Then, provide a custom `useHref` function to the `HeroUIProvider` to automatically prepend the base path to all link hrefs.

```APIDOC
Requirement: Next.js `basePath` configured.
Action: Configure environment variable for `basePath`.
Integration: Provide custom `useHref` function to `HeroUIProvider`.
```

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

### HeroUI CLI: Upgrade Components

Source: https://beta.heroui.com/docs/guide/introduction/api-references/cli-api

Use this command to upgrade your HeroUI components to their latest versions. It provides options to upgrade all components, write changes to package.json, and include beta components. You can also get help for the command.

```APIDOC
-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
```

```CLI
# Upgrade the Button component to the latest version
heroui upgrade Button
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.