Remix
要求
- React 18 或更高版本
- Tailwind CSS 3.4 或更高版本
- Framer Motion 11.9 或更高版本
要在您的 Remix 项目中使用 HeroUI,您需要遵循以下步骤
使用 HeroUI + Remix 模板
如果您要开始一个新项目,您可以运行以下命令之一来创建一个预配置 HeroUI 的 Remix 项目
自动安装
您可以使用 CLI 添加单个组件。例如,要添加按钮组件
此命令会将 Button 组件添加到您的项目并管理所有相关的依赖项。
您也可以一次添加多个组件
或者您可以通过运行以下命令来添加主库 @heroui/react
如果您省略组件名称,CLI 将提示您选择要添加的组件。
您仍然需要手动将 provider 添加到您的应用程序(我们正在努力自动化此步骤)。
手动安装
添加依赖项
在您的 Remix 项目中,运行以下命令之一来安装 HeroUI
提升依赖项设置
注意:此步骤仅适用于使用
pnpm
安装的用户。如果您使用其他包管理器安装 HeroUI,则可以跳过此步骤。
如果您使用 pnpm,您需要在您的 .npmrc
文件中添加以下行,以将我们的包提升到根目录 node_modules
。
修改 .npmrc
文件后,您需要再次运行 pnpm install
以确保依赖项已正确安装。
Tailwind CSS 设置
HeroUI 构建于 Tailwind CSS 之上,因此您需要先安装 Tailwind CSS。您可以按照官方安装指南安装 Tailwind CSS。然后,您需要将以下代码添加到您的 tailwind.config.js
文件中
注意:如果您使用 pnpm 和 monorepo 架构,请确保您指向 ROOT
node_modules
Provider 设置
安装 HeroUI 后,您需要在应用程序的 root
处设置 HeroUIProvider
。
转到 src 目录,并在 root.tsx
中,将 HeroUIProvider
包裹在 App 周围