migrate-radix-to-base

Migrates React components and shadcn projects from Radix UI to Base UI.

Updated Sep 5, 2026
One-click install
npx skills add https://github.com/pohlai88/afenda-xforge-v5 --skill migrate-radix-to-base-pohlai88
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: migrate-radix-to-base
Source: https://github.com/pohlai88/afenda-xforge-v5/tree/main/.agents/skills/migrate-radix-to-base
Command: npx skills add https://github.com/pohlai88/afenda-xforge-v5 --skill migrate-radix-to-base-pohlai88

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @base-ui/react, and includes references (resource) components.

What problem does it solve? Moving a React project from Radix UI to Base UI involves hundreds of prop renames, part restructures, and behavior differences that are easy to get wrong by hand. This Skill performs the migration systematically, keeping the project buildable at every step and documenting every change. ## Core Features & Use Cases - Golden-pair migration via the shadcn CLI: Fetches official base-style registry variants and replays your customizations onto them with three-way merges, so customized wrappers survive intact. - Verified prop mapping references: Ships per-family tables (overlays, menus, form controls, disclosure, display) cross-checked against @base-ui/react type definitions, covering asChild-to-render conversions, callback signature changes, and data-attribute rewrites. - Progressive or whole-project modes: Migrate a single component strangler-fig style ("migrate accordion") or the entire project in dependency order, with per-component reports written to a .migration/ directory. - Use Case: Ask to "migrate the dropdown-menu to base-ui" and the Skill classifies the wrapper, fetches or transforms the base variant, repoints consumers one at a time, typechecks each step, and writes a report flagging behavior deltas like menu close-on-click changes. ## Quick Start Migrate the accordion component in this project from Radix UI to Base UI and report what changed.

Frequently Asked Questions about migrate-radix-to-base

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I migrate a shadcn component from Radix UI to Base UI?

Run the shadcn CLI info command to detect the project style, then fetch the matching base-style registry variant and replay your customizations onto it with a three-way merge. Repoint consumers one at a time and typecheck after each file.

What replaces asChild when moving from Radix UI to Base UI?

Base UI replaces the boolean asChild prop with a render prop that accepts a React element or a function of props and state. For example, <Trigger asChild><Button/></Trigger> becomes <Trigger render={<Button/>}>.

Can Radix UI and Base UI coexist in the same project during migration?

Yes, both libraries coexist without conflicts. Install @base-ui/react alongside Radix, migrate components one at a time, and remove the Radix dependencies only after the last component is migrated.

Which shadcn components are not migrated because they are not Radix?

Components built on cmdk (command), vaul (drawer), sonner, input-otp, react-day-picker (calendar), and recharts (chart) are intentionally left untouched since they are not Radix primitives.

What happens to Radix components with no Base UI equivalent?

AspectRatio becomes a CSS aspect-ratio div, Label becomes a native label element, VisuallyHidden becomes the sr-only Tailwind class, and Direction uses a DirectionProvider with a direction prop. Popover Anchor and NavigationMenu Indicator are passed through inertly and flagged.

Why does my Base UI tabs component behave differently after migration?

Base UI defaults tabs to manual activation while Radix defaulted to automatic. The migration flags this behavior delta rather than silently patching it; opt into the old behavior with activateOnFocus on Tabs.List if desired.