Remix
要求:
- React 18 或更高版本
- Tailwind CSS v4
- 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。
注意:如果你使用 pnpm 和 monorepo 架构,请确保指向 ROOT
node_modules
然后你需要创建 hero.ts 文件
并将以下代码添加到你的主 css 文件中:
Provider 设置
安装 HeroUI 后,你需要在应用程序的 root 处设置 HeroUIProvider。
转到 src 目录,在 root.tsx 中,用 HeroUIProvider 包裹 App:

