heroui-inc
@heroui/codemod
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@latestGlobal Installation
npm install -g @heroui/codemodUsage
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 herouiCodemod Arguments
import-heroui
Updates all import statements from @nextui-org/* packages to their @heroui/* equivalents.
heroui-codemod import-herouiExample:
import { Button } from "@nextui-org/button"toimport { 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-nameExample:
@nextui-org/button: x.xx.xxxto@heroui/button: x.xx.xxx
heroui-provider
Migrate NextUIProvider to HeroProvider.
heroui-codemod heroui-providerExample:
import { NextUIProvider } from "@nextui-org/react"toimport { 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-herouiExample:
const {nextui} = require('@nextui-org/theme')toconst {heroui} = require('@heroui/theme')plugins: [nextui({...})]toplugins: [heroui({...})]content: ['./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}']tocontent: ['./node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}']var(--nextui-primary-500)tovar(--heroui-primary-500)
css-variables
Migrate all the css variables in the file starting with --nextui- to --heroui-.
heroui-codemod css-variablesExample:
className="text-[var(--nextui-primary-500)]"toclassName="text-[var(--heroui-primary-500)]"
npmrc (Pnpm only)
Migrate the .npmrc file to use the @heroui package.
heroui-codemod npmrcExample:
public-hoist-pattern[]=*@nextui-org/theme*topublic-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-appOutput:
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!
Contributing
Contributions are always welcome!
See CONTRIBUTING.md for ways to get started.
Please adhere to this project's CODE_OF_CONDUCT.