Quick Start

hpsetup is an npm package that replaces the official npx heroui-pro install flow. The official installer requires GitHub OAuth or a CI token; hpsetup only needs a key and works in local development, CI/CD, and team workflows.

The installed result is the same as the official CLI: component code, style files, and dependencies are written into your project.

Prepare your project first. The examples below assume an existing Next.js, Vite, or Pages Router app.

Install dependencies

pnpm dlx hpsetup@latest <your_hp_key>

bunx hpsetup@latest <your_hp_key>

npx -y hpsetup@latest <your_hp_key>

Verify the app

Run your normal dev command before changing UI code:

pnpm dev

Fix existing project errors first. This makes it easier to tell whether later issues came from the Pro installation.

Commit a baseline

This step is optional but recommended before installing generated component files.

git add .
git commit -m "chore: baseline before HeroUI Pro"

git add .
git commit -m "chore: baseline before HeroUI Pro"

git add .
git commit -m "chore: baseline before HeroUI Pro"

Import styles

Add the generated Pro styles to your global CSS.

  @import "tailwindcss";
+ @import "./components/heroui-pro/styles.css";

  @import "tailwindcss";
+ @import "./components/heroui-pro/styles.css";

  @tailwind base;
  @tailwind components;
  @tailwind utilities;
+ @import "../components/heroui-pro/styles.css";

Use a component

Import a Pro component from the generated files and render it in a page.

import { Button } from '@/components/heroui-pro/button';

export default function Page() {
  return <Button>HeroUI Pro</Button>;
}

Start preview

pnpm dev

Open the local URL shown by Next.js or Vite and verify the component renders with the expected styles.