Now liveThe Skillselion MCP - thousands of ranked skills, loaded into your agent mid-task. No install.Get it →
heroui-inc avatar

Heroui Migration

  • 2.8k installs
  • 30.3k repo stars
  • Updated August 4, 2026
  • heroui-inc/heroui

heroui-migration is a HeroUI skill for upgrading v2 React apps to v3 using fetched agent migration guides.

About

The heroui-migration skill guides agents upgrading HeroUI v2 applications to v3 with breaking API changes. v3 removes HeroUIProvider, adopts compound components like Card.Header instead of flat props, switches onClick to onPress, replaces classNames with className, and consolidates packages to @heroui/react and @heroui/styles with Tailwind v4. Agents must fetch migration docs before applying changes via node scripts such as get_migration_guide.mjs, get_component_migration_guides.mjs, get_styling_migration_guide.mjs, and get_hooks_migration_guide.mjs. Full migration rewrites all components before switching dependencies, while incremental migration uses pnpm aliases so v2 and v3 coexist during gradual rollout. The workflow runs analyze imports, migrate component batches with per-component guides, switch dependencies, then apply styling updates. Preview docs live on a Vercel staging base URL overridable with HEROUI_MIGRATION_DOCS_BASE; an MCP server at migration-mcp.heroui.com offers tool-based access in Cursor.

  • Always fetch migration guides before assuming v2 patterns work in v3.
  • v3 uses compound components; HeroUIProvider is no longer required.
  • Interactive components use onPress instead of onClick handlers.
  • Full and incremental migration strategies with coexistence options.
  • Scripts list guides; MCP server available for Cursor clients.

Heroui Migration by the numbers

  • 2,764 all-time installs (skills.sh)
  • +156 installs in the week ending Aug 5, 2026 (Skillselion tracking)
  • Ranked #191 of 2,245 Frontend Development skills by installs in the Skillselion catalog
  • Security screen: MEDIUM risk (skills.sh audit)
  • Data as of Aug 5, 2026 (Skillselion catalog sync)
At a glance

heroui-migration capabilities & compatibility

Capabilities
script driven migration guide fetching workflow · full versus incremental upgrade strategy selecti · per component migration guide lookup · hooks to compound component migration routing · mcp and url based documentation access patterns
Use cases
frontend · refactoring · ui design
npx skills add https://github.com/heroui-inc/heroui --skill heroui-migration

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

Listed on Skillselion
Installs2.8k
repo stars30.3k
Security audit2 / 3 scanners passed
Last updatedAugust 4, 2026
Repositoryheroui-inc/heroui

How do I migrate a HeroUI v2 app to v3 without missing breaking component API changes?

Migrate HeroUI v2 React apps to v3 using fetched migration guides, compound components, and full or incremental upgrade strategies.

Who is it for?

React apps on HeroUI v2 preparing for v3 compound components and Tailwind v4.

Skip if: Skip for greenfield HeroUI v3 installs without legacy v2 code to migrate.

When should I use this skill?

User mentions HeroUI migration, v2 to v3 upgrade, or HeroUIProvider removal.

What you get

Components, dependencies, and styling updated per fetched full or incremental migration guides.

  • Migrated HeroUI v3 components
  • Updated Tailwind v4 config
  • Removed Provider and deprecated hooks

By the numbers

  • Skill metadata version 2.0.0 with preview status
  • HeroUI v3 removes Provider, drops v2 hooks, and requires Tailwind v4

Files

SKILL.mdMarkdownGitHub ↗

HeroUI v2 to v3 Migration Guide

This skill helps agents migrate HeroUI v2 applications to v3. HeroUI v3 introduces breaking changes: compound components, no Provider, Tailwind v4, and removed hooks.

---

Installation

curl -fsSL https://heroui.com/install | bash -s heroui-migration

---

CRITICAL: Always Fetch Migration Docs Before Applying

Do NOT assume v2 patterns work in v3. Always fetch migration guides before implementing changes.

Key v2 → v3 Changes

Featurev2 (Migrate From)v3 (Migrate To)
Provider<HeroUIProvider> requiredNo Provider needed
Component APIFlat props: <Card title="x">Compound: <Card><Card.Header>
Event handlersonClickonPress
StylingclassNames propclassName prop
HooksuseSwitch, useDisclosure, etc.Compound components, useOverlayState
Packages@heroui/system, @heroui/theme@heroui/react, @heroui/styles

---

Accessing Migration Documentation

For migration details, examples, and step-by-step guides, always fetch documentation:

Using Scripts

# List all available component migration guides
node scripts/list_migration_guides.mjs

# Get main migration workflow (full or incremental)
node scripts/get_migration_guide.mjs full
node scripts/get_migration_guide.mjs incremental

# Get component-specific migration guides
node scripts/get_component_migration_guides.mjs button
node scripts/get_component_migration_guides.mjs button card modal

# Get styling migration guide
node scripts/get_styling_migration_guide.mjs

# Get hooks migration guide
node scripts/get_hooks_migration_guide.mjs

Direct URLs

Migration docs (preview): https://heroui-git-docs-migration-heroui.vercel.app/docs/react/migration/{filename}

Examples:

  • Full migration: .../agent-guide-full.mdx
  • Incremental: .../agent-guide-incremental.mdx
  • Button: .../button.mdx
  • Styling: .../styling.mdx
  • Hooks: .../hooks.mdx

Override base URL with HEROUI_MIGRATION_DOCS_BASE when docs are merged to production.

MCP Alternative

When using Cursor or other MCP clients, configure the Migration MCP server for tool-based access:

{
  "mcpServers": {
    "heroui-migration": {
      "url": "https://migration-mcp.heroui.com"
    }
  }
}

---

Migration Strategies

Full Migration

  • Best for: Projects that can dedicate focused time; teams comfortable with temporarily broken code
  • Migrate all component code first (project broken during migration)
  • Switch dependencies to v3
  • Complete styling migration

Incremental Migration

  • Best for: Projects that must stay functional; large codebases migrating gradually
  • Set up coexistence (pnpm aliases or component packages)
  • Migrate components one-by-one
  • Both v2 and v3 coexist during migration

Always fetch the agent guide before starting: node scripts/get_migration_guide.mjs full or incremental

---

Core Principles

1. Fetch first: Use scripts to get migration guides before applying changes 2. Compound components: v3 uses Card.Header, Card.Title, Button with children—not flat props 3. No Provider: Remove HeroUIProvider when migrating 4. onPress not onClick: All interactive components use onPress 5. Workflow: Analyze → Migrate components → Switch deps → Styling migration

---

Migration Workflow Summary

1. Create migration branch 2. Analyze project (HeroUI imports, component usage) 3. Fetch main guide: node scripts/get_migration_guide.mjs full 4. Migrate components in batches (fetch component guides per batch) 5. Switch dependencies to v3 6. Fetch styling guide: node scripts/get_styling_migration_guide.mjs 7. Apply styling updates

---

Preview Mode

This skill targets the staging deployment of the docs/migration branch. Once docs are merged to main and live on heroui.com, set HEROUI_MIGRATION_DOCS_BASE=https://heroui.com/docs/react/migration or update the default in scripts.

Related skills

How it compares

Pick heroui-migration for version-specific HeroUI v2→v3 breaking changes rather than generic React component renames.

FAQ

What is the biggest v3 API change?

Flat props become compound components like Card.Header, and HeroUIProvider is removed.

How do I fetch component-specific guides?

Run node scripts/get_component_migration_guides.mjs with component names such as button or modal.

When should I choose incremental migration?

When the app must stay functional during rollout; use pnpm aliases so v2 and v3 coexist.

Is Heroui Migration safe to install?

skills.sh reports 2 of 3 security scanners passed. Review the Security Audits panel on this page before installing in production.

This week in AI coding

Five minutes, every Monday - the tools, releases and tactics for developers.

unsubscribe anytime.