Ship faster with beautiful components
HeroUI Pro

NextUI to HeroUI

HeroUI is the new identity for NextUI, bringing the same powerful components and features you love under a new name. This guide will help you migrate your existing NextUI project to HeroUI.

Automatic Migration

The easiest way to migrate your NextUI project to HeroUI is using our official codemod:

Run Migration

Execute the codemod in your project directory:

This will automatically:

  • Update all package names from @nextui-org/* to @heroui/*
  • Rename component imports and references
  • Update TailwindCSS configuration
  • Transform provider components
  • Adjust any NextUI-specific utilities or hooks
  • Update .npmrc file pnpm only

Install Dependencies

After running the codemod, install the new dependencies:

Manual Migration

If you prefer to migrate manually, follow these steps:

Update Dependencies

Replace NextUI packages with their HeroUI equivalents:

Update TailwindCSS Configuration

Update your tailwind.config.js:

Update Provider Component

Replace the NextUI provider with HeroUI's provider:

Update Imports

Update all component imports to use the new package name:

Individual Packages

If you're using individual packages, update each package name:

Npmrc Pnpm Only

If you are using pnpm, you need to update your .npmrc file to use the new package name:

Verification

After migration, verify that:

  1. All components render correctly
  2. Theme customizations are preserved
  3. No NextUI imports remain in your codebase
  4. Your application builds without errors

The functionality and API of all components remain the same - only the package names and imports have changed.

If you encounter any issues during migration, please open an issue on our GitHub repository.

FormsFigma