heroui-migration
This skill guides agents through upgrading HeroUI v2 applications to v3, addressing breaking changes like compound components, removed Provider requirements, and event handler renaming. It provides migration workflows for both full and incremental approaches, component-specific guides, and styling updates to keep projects functional during the transition.
heroui-migration helps you upgrade HeroUI v2 apps to v3 with guided component changes and dependency updates.
AI-generated summary based on this skill's SKILL.md
Decision gist · record as of 2026-07-28
heroui-migration helps you upgrade HeroUI v2 apps to v3 with guided component changes and dependency updates. This skill guides agents through upgrading HeroUI v2 applications to v3, addressing breaking changes like compound components, removed Provider requirements, and event handler renaming. It provides migration workflows for both full and incremental approaches, component-specific guides, and styling updates to keep projects functional during the transition.
Use it when
- HeroUI-migration documents key breaking changes including the removal of the Provider requirement.
- HeroUI-migration helps you choose between full and incremental migration strategies.
Verify before relying
Read SKILL.md below before installing (7 files). Open directory: indexed for reading, not audited.
Install
heroui-inc/heroui/heroui-migration · repository language: MDX
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How do I upgrade HeroUI from v2 to v3?
HeroUI-migration guides you through upgrading HeroUI from v2 to v3 with step-by-step instructions. Start by updating your package dependencies, then address breaking changes like removing the Provider wrapper, updating event handlers from onClick to onPress, and migrating to compound components. The skill supports both full migration (all at once) and incremental migration (component by component) strategies based on your project needs.
What are the main breaking changes in HeroUI v3?
HeroUI-migration documents key breaking changes including the removal of the Provider requirement, renaming of event handlers (onClick becomes onPress), adoption of compound components for complex UI patterns, and styling adjustments for Tailwind v4 compatibility. Each change is explained with migration examples to help you understand the impact on your existing v2 code and how to adapt components accordingly.
Should I do a full or incremental migration to HeroUI v3?
HeroUI-migration helps you choose between full and incremental migration strategies. Full migration updates your entire application at once, ideal for smaller projects or when you want a clean break. Incremental migration updates components gradually, reducing risk and allowing parallel testing. The skill provides guidance for both approaches, including how to manage dependencies and maintain stability during the transition.
What styling and hooks need updating for HeroUI v3?
HeroUI-migration covers styling updates required for v3, including className/classNames changes and Tailwind v4 compatibility adjustments. For hooks, the skill provides migration documentation showing which hooks changed, were removed, or require new parameters. Component-specific examples demonstrate how to update your custom styling and hook usage to work with v3's new architecture.
Does HeroUI v3 still require a Provider wrapper?
HeroUI-migration clarifies that v3 removes the Provider requirement that was mandatory in v2. This simplifies setup and reduces boilerplate code. The skill explains how to remove Provider wrappers from your application structure and what configuration changes are needed to ensure your components function correctly without this wrapper in the v3 architecture.
How do I migrate HeroUI components from v2 to v3?
HeroUI-migration provides component-specific migration documentation and examples for each HeroUI component. It shows how compound components work in v3, demonstrates event handler renaming (onClick to onPress), and explains prop changes. The skill includes practical code examples for common components, helping you understand the exact changes needed for your application's component usage.
SKILL.md
Rendered from the published skill. Quoted content, verbatim.
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
| Feature | v2 (Migrate From) | v3 (Migrate To) |
|---|---|---|
| Provider | <HeroUIProvider> required |
No Provider needed |
| Component API | Flat props: <Card title="x"> |
Compound: <Card><Card.Header> |
| Event handlers |
(truncated - see the full file via the links below)
File tree — 7 files
skills/heroui-migration/LICENSE.txt
skills/heroui-migration/SKILL.md
skills/heroui-migration/scripts/get_component_migration_guides.mjs
skills/heroui-migration/scripts/get_hooks_migration_guide.mjs
skills/heroui-migration/scripts/get_migration_guide.mjs
skills/heroui-migration/scripts/get_styling_migration_guide.mjs
skills/heroui-migration/scripts/list_migration_guides.mjs
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Migrate HeroUI v2 application to v3 with step-by-step guidance”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
HeroUI v3 is a React component library built on Tailwind CSS v4 and React Aria, offering accessible, composable UI elements like Buttons, Modals, Forms, and Cards. It uses compound components (dot-notation subcomponents), semantic variants for intent-driven styling, and CSS variable theming with oklch color space—no provider required. Always fetch component docs before implementing to access complete examples and API references.
HeroUI Native is a component library for React Native built on Uniwind (Tailwind CSS adapted for mobile) and React Native, delivering accessible, customizable UI components for iOS and Android. Use compound component patterns to compose Buttons, Cards, TextFields, Dialogs, and more with semantic variants and HSL-based theming. Always fetch component documentation before implementing to access complete examples, props, and API references.
HeroUI v3 provides a component library for React built on Tailwind CSS v4 and React Aria, emphasizing accessibility and semantic design. Set up in Next.js or Vite, use compound components without a provider, and customize with CSS variables and design tokens. Access component docs, source code, and theme utilities via included scripts.
HeroUI v3 is a React component library combining Tailwind CSS v4 and React Aria to deliver accessible, customizable UI elements. Build with compound components like Card.Header and Card.Content, semantic variants, and CSS variable theming in oklch color space—no provider needed.
This skill guides you through upgrading @anthropic-ai/sdk and @anthropic-ai/claude-agent-sdk packages in the vscode-copilot-chat project. It walks you through reviewing release notes, consolidating changes by category, identifying breaking changes, updating dependencies, detecting API surface shifts via type definition diffs, fixing compilation errors, and running tests to validate the upgrade.
Vue Router v5 skill covers API changes from v4, including new exports like `vue-router/vite`, `vue-router/auto-routes`, and experimental data loaders. Get guidance on migration paths, typed routes, navigation guards, and routing best practices.
More skills Migrate I18next To Lingui (unlicensed) · migrate-xml-views-to-jetpack-compose (Apache-2.0)