@heroui/codemod NPM

The CLI provides a comprehensive suite of tools to migrate your codebase from NextUI to HeroUI.

Quick Start

Note: The heroui CLI requires Node.js 18.17.x or later
Note: If running in monorepo, you need to run the command in the root of your monorepo

You can start using @heroui/codemod in one of the following ways:

Npx

npx @heroui/codemod@latest

Global Installation

npm install -g @heroui/codemod

Usage

Usage: @heroui/codemod [command]

A CLI tool for migrating your codebase to heroui

Arguments:
  codemod                Specify which codemod to run
                         Codemods: import-heroui, package-json-package-name, heroui-provider, tailwindcss-heroui, css-variables, npmrc

Options:
  -v, --version          Output the current version
  -d, --debug            Enable debug mode
  -h, --help             Display help for command
  -f, --format           Format the affected files with Prettier

Commands:
  migrate [projectPath] Migrate your codebase to use heroui

Codemod Arguments

import-heroui

Updates all import statements from @nextui-org/* packages to their @heroui/* equivalents.

heroui-codemod import-heroui

Example:

import { Button } from "@nextui-org/button" to import { Button } from "@heroui/button"

package-json-package-name

Updates all package names in package.json from @nextui-org/* to @heroui/*.

heroui-codemod package-json-package-name

Example:

@nextui-org/button: x.xx.xxx to @heroui/button: x.xx.xxx

heroui-provider

Migrate NextUIProvider to HeroProvider.

heroui-codemod heroui-provider

Example:

import { NextUIProvider } from "@nextui-org/react" to import { HeroProvider } from "@heroui/react"
<NextUIProvider>...</NextUIProvider> to <HeroProvider>...</HeroProvider>

tailwindcss-heroui

Migrate all the tailwind.config.(j|t)s file to use the @heroui package.

heroui-codemod tailwindcss-heroui

Example:

const {nextui} = require('@nextui-org/theme') to const {heroui} = require('@heroui/theme')
plugins: [nextui({...})] to plugins: [heroui({...})]
content: ['./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}'] to content: ['./node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}']
var(--nextui-primary-500) to var(--heroui-primary-500)

css-variables

Migrate all the css variables in the file starting with --nextui- to --heroui-.

heroui-codemod css-variables

Example:

className="text-[var(--nextui-primary-500)]" to className="text-[var(--heroui-primary-500)]"

npmrc (Pnpm only)

Migrate the .npmrc file to use the @heroui package.

heroui-codemod npmrc

Example:

public-hoist-pattern[]=*@nextui-org/theme* to public-hoist-pattern[]=*@heroui/theme*

Migrate Command

Migrate your entire codebase from NextUI to heroui. You can choose which codemods to run during the migration process.

heroui-codemod migrate [projectPath] [--format]

Example:

heroui-codemod migrate ./my-nextui-app

Output:

heroui Codemod v0.0.1

┌   Starting to migrate nextui to heroui
│
◇  1. Migrating "package.json"
│
◇  Do you want to migrate package.json?
│  Yes
│
◇  Migrated package.json
│
◇  2. Migrating import "nextui" to "heroui"
│
◇  Do you want to migrate import nextui to heroui?
│  Yes
│
◇  Migrated import nextui to heroui
│
◇  3. Migrating "NextUIProvider" to "HeroUIProvider"
│
◇  Do you want to migrate NextUIProvider to HeroUIProvider?
│  Yes
│
◇  Migrated NextUIProvider to HeroUIProvider
│
◇  4. Migrating "tailwindcss"
│
◇  Do you want to migrate tailwindcss?
│  Yes
│
◇  Migrated tailwindcss
│
◇  5. Migrating "css variables"
│
◇  Do you want to migrate css variables?
│  Yes
│
◇  Migrated css variables
│
◇  6. Migrating "npmrc" (Pnpm only)
│
◇  Do you want to migrate npmrc (Pnpm only) ?
│  Yes
│
◇  Migrated npmrc
│
└  ✅ Migration completed!

Community

We're excited to see the community adopt NextUI CLI, raise issues, and provide feedback. Whether it's a feature request, bug report, or a project to showcase, please get involved!