hpsetup

一条命令安装 HeroUI Pro 全部组件,无需 GitHub 登录,支持所有包管理器。

这是什么?

hpsetup 是一个 npm 包,用于替代官方的 npx heroui-pro install 安装流程。

官方安装需要 GitHub OAuth 登录 + 交互式 CLI。hpsetup 只需要一个 Key,即可在任何环境(本地开发、CI/CD、团队协作)中一键完成安装。

安装结果与官方完全一致——你拿到的组件代码、样式文件、依赖关系和通过官方 CLI 安装的没有任何区别。

快速开始

创建项目

如果你还没有 HeroUI 项目,先创建一个:

npx heroui-cli@latest init my-heroui-app
cd my-heroui-app

用你喜欢的包管理器安装依赖:

pnpm install

npm / yarn / bun 均可,hpsetup 会自动检测。

安装 HeroUI Pro

运行 hpsetup,将 <YOUR_HP_KEY> 替换为你收到的 Key:

npx -y hpsetup@latest <YOUR_HP_KEY>

你会看到类似输出:

Querying latest version from npm...
Adding @heroui-pro/react v1.0.0-beta.2 via pnpm...
Downloading @heroui-pro/react v1.0.0-beta.2...
Installing 8 peer dependencies...
Resolving transitive dependencies...
Done ✓
原理:hpsetup 先安装 @heroui-pro/react 的空壳包,然后从 CDN 下载真正的组件代码覆盖到 node_modules 中,最后补装所有依赖。最终结果与官方安装完全一致。

引入样式

在你的全局 CSS 文件末尾新增一行:

使用组件

创建组件文件 src/components/area-chart-demo.tsx

在页面中引入组件:

启动开发服务器:

pnpm dev

打开浏览器访问 http://localhost:5173 即可看到效果。更多组件示例请参考 网站镜像(需要授权)。

常见问题

pnpm + Vite 报错 "does not provide an export named 'jsx'"

这是 pnpm 严格模块解析与 Vite 预构建机制的兼容性问题,与安装方式无关。在 vite.config.ts 中添加:

export default defineConfig({
  optimizeDeps: {
    include: ["react", "react/jsx-runtime", "@heroui-pro/react"],
  },
});
支持哪些包管理器?

npm、pnpm、yarn、bun 均支持。hpsetup 会自动检测你项目使用的包管理器。

支持哪些操作系统?

macOS、Linux、Windows(PowerShell / cmd / Git Bash)。

如何指定安装版本?
npx -y hpsetup@latest <YOUR_HP_KEY> 1.0.0-beta.2
Key 可以用在 CI/CD 中吗?

可以。设置环境变量即可:

HEROUI_KEY=hp_xxx npx -y hpsetup@latest
hpsetup 和官方安装有什么区别?

安装结果完全一致。 官方 CLI 通过 GitHub OAuth 登录后从 CDN 下载组件,hpsetup 通过代理完成同样的下载过程。最终写入 node_modules/@heroui-pro/react/ 的文件完全相同——组件代码、样式、类型定义没有任何区别。