安装

要求:

自动安装

使用 CLI 现在是启动 HeroUI 项目的最简单方式。您可以通过 CLI 初始化项目并直接添加组件：

安装

在终端中执行以下任一命令：

初始化和启动应用

使用 init 命令初始化项目。

您将被提示配置项目：

安装依赖以启动本地服务器：

启动本地服务器：

添加组件

一旦您的 HeroUI 项目准备好开发，您可以使用 CLI 添加单个组件。例如，添加按钮组件：

此命令会将按钮组件添加到项目中，并管理所有相关依赖。

您也可以一次性添加多个组件：

或者通过运行以下命令添加主库 @heroui/react：

如果省略组件名称，CLI 将提示您选择要添加的组件。

手动安装

如果您不想使用 CLI，可以尝试全局安装或单独安装来在项目中设置 HeroUI：

全局安装

使用全局安装是快速开始 HeroUI 的最简单方式，即所有组件均从单一包中导入。

以下步骤帮助您安装所有 HeroUI 组件：

安装包

要安装 HeroUI，请在终端中执行以下任一命令：

提升依赖设置

注意：此步骤仅适用于使用 pnpm 安装的情况。若您使用其他包管理器安装 HeroUI，则可跳过此步骤。

如果您使用 pnpm，需要在 .npmrc 文件中添加以下行，将我们的包提升到根 node_modules。

修改 .npmrc 后，请再次运行 pnpm install 以确保依赖正确安装。

Tailwind CSS 设置

HeroUI 基于 Tailwind CSS 构建，因此首先需要安装 Tailwind CSS。您可按照官方
安装指南 进行安装。

注意：若您使用 pnpm 与 monorepo 架构，请确保指向 ROOT node_modules。

随后需要创建 hero.ts 文件：

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

Provider 设置

在应用根部添加 HeroUIProvider 非常重要。

单独安装

HeroUI 也以单独包形式提供。您可以分别安装每个包。这在您想减少 CSS 包大小时非常有用，因为只会包含您实际使用的组件样式。

注意：由于 HeroUI 支持 tree shaking，JavaScript 包大小不会改变。

以下步骤帮助您分别安装每个包：

安装核心包

虽然您可以分别安装每个包，但请先安装核心包以确保所有组件正常工作。

在终端中执行以下任一命令安装核心包：

安装组件

现在，安装您想要使用的组件。例如，要使用
Button 组件，请在终端中执行以下任一命令：

提升依赖设置

注意：此步骤仅适用于使用 pnpm 安装的情况。若您使用其他包管理器安装 HeroUI，则可跳过此步骤。

若您使用 pnpm，需要在 .npmrc 文件中添加以下行，将我们的包提升到根 node_modules。

修改 .npmrc 后，请再次运行 pnpm install 以确保依赖正确安装。

Tailwind CSS 设置

使用单独包时，Tailwind CSS 设置略有不同。您只需将使用的组件样式添加到 tailwind.config.js 文件中。例如，要使用
Button 组件，请在 tailwind.config.js 文件中添加以下代码：

Provider 设置

在应用根部添加 HeroUIProvider 非常重要。

使用组件

现在，您可以在应用中使用已安装的组件：

框架指南

HeroUI 与您所喜爱的框架兼容。我们已经为以下框架编写了全面的、逐步的教程：

设计原则CLI 命令行工具