Astro

安装 React

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

安装 HeroUI

在您的 Astro 项目中，执行以下命令之一来安装 HeroUI：

提升依赖设置

提示: 此步骤仅针对使用 pnpm 安装的用户。如果您使用其他包管理器安装 HeroUI，则可跳过此步骤。

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

在修改 .npmrc 文件后，需要再次运行 pnpm install 以确保依赖项正确安装。

Tailwind CSS 设置

HeroUI 基于 Tailwind CSS 构建，因此您需要先安装 Tailwind CSS。您可以按照官方的安装指南来安装 Tailwind CSS。然后，您需要将以下代码添加到您的 tailwind.config.cjs 文件中：

提示：如果您使用 pnpm 并采用 monorepo 架构，请确保指向 ROOT node_modules。

用法

现在您可以导入 HeroUI 组件并在 Astro 项目中使用它们：

请注意，您必须在组件中添加 client:visible，以使其仅在客户端显示。否则，HeroUI 组件的一些功能可能无法正常工作。