Socket
Book a DemoInstallSign in
Socket

@heroui/codemod

Package Overview
Dependencies
Maintainers
1
Versions
11
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@heroui/codemod

HeroUI Codemod provides transformations to help migrate your codebase from NextUI to HeroUI

latest
Source
npmnpm
Version
1.3.0
Version published
Weekly downloads
313
19.92%
Maintainers
1
Weekly downloads
 
Created
Source

nextui

@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@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!

Contributing

Contributions are always welcome!

See CONTRIBUTING.md for ways to get started.

Please adhere to this project's CODE_OF_CONDUCT.

License

MIT

Keywords

UI

FAQs

Package last updated on 18 Jan 2025

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts