Next.js

Requirements:

To use HeroUI in your Next.js project, you need to follow the steps below, depending on your project structure.

App Directory Setup

Next.js 13 的 app/ 目录默认使用 Server Components。HeroUI 组件可以直接在 Server Components 中导入，因为我们在构建时添加了 use client。

HeroUI CLI (recommended)

If you are starting a new project, you can use the HeroUI CLI to create a new project with HeroUI pre-configured:

create-next-app

If you are starting a new project, you can run one of the following commands to create a Next.js project pre-configured with HeroUI:

Automatic Installation

You can add individual components using the CLI. For example, to add a button component:

This command adds the Button component to your project and manages all related dependencies.

You can also add multiple components at once:

Or you can add the main library @heroui/react by running the following command:

If you leave out the component name, the CLI will prompt you to select the components you want to add.

You still need to add the provider to your app manually (we are working on automating this step).

Manual Installation

Add dependencies

In your Next.js project, run one of the following commands to install HeroUI:

Hoisted Dependencies Setup

注意: 这一步仅适用于使用 pnpm 安装的人。如果使用其他包管理器安装 HeroUI，可以跳过此步骤。

If you are using pnpm, you need to add the following line to your .npmrc file to hoist our packages to the root node_modules.

After modifying the .npmrc file, you need to run pnpm install again to ensure that the dependencies are installed correctly.

Tailwind CSS Setup

HeroUI 是基于 Tailwind CSS 构建的，因此您需要先安装 Tailwind CSS。您可以按照官方安装指南来安装 Tailwind CSS。

注意: 如果您使用 pnpm 并采用 monorepo 架构，请确保指向根级 node_modules。

然后您需要创建 hero.ts 文件：

并在主 CSS 文件中添加以下代码：

Setup Provider

Go to your app/providers.tsx or app/providers.jsx (create it if it doesn’t exist) and wrap the component with the HeroUIProvider:

Add Provider to Root

Now, go to your root layout page and wrap it with the Providers:

注意: HeroUI 自动为您的应用添加了两个主题，light 和 dark。您可以通过在 html 标签上添加 dark/light 类来使用其中任何一个。更多详情请参阅主题文档。

Use HeroUI Components

Now you can import any HeroUI component directly in your Server Components without needing to use the use client; directive:

重要 🚨: 请注意，您需要从单独的包中导入组件，而不是从 @heroui/react。

Pages Directory Setup