migrate-radix-to-base

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

Updated May 26, 2026
One-click install
npx skills add https://github.com/rmethodm/resumegen --skill migrate-radix-to-base-rmethodm
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: migrate-radix-to-base
Source: https://github.com/rmethodm/resumegen/tree/main/.agents/skills/migrate-radix-to-base
Command: npx skills add https://github.com/rmethodm/resumegen --skill migrate-radix-to-base-rmethodm

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve? Moving a React codebase 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 reporting every behavior change instead of silently patching it. ## Core Features & Use Cases - Golden-pair migration via the shadcn CLI: Fetches stock radix and base registry variants, classifies wrappers as pristine or customized, and replays user customizations with three-way merges. - Transformation engine with verified prop tables: Hand-migrates non-shadcn or legacy-style code using per-family reference files covering overlays, menus, form controls, disclosure, and display components. - Progressive and whole-project modes: Migrates a single component strangler-fig style or an entire project in dependency order, with per-component reports written to a .migration/ directory. - Use Case: Ask to "migrate the accordion component" and the Skill writes a -base variant, repoints consumers one at a time, typechecks each step, and finalizes with a report listing changed files and behavior deltas. ## Quick Start Migrate the dialog component in this project from Radix UI to Base UI and report any behavior changes.

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 project from Radix UI to Base UI?▼

Run the shadcn CLI info command to detect the current style, then migrate component by component using golden-pair registry variants or hand transformation. Flip components.json from radix-<style> to base-<style> only after the last component is migrated, then remove radix dependencies.

How do I migrate a single component like accordion from Radix to Base UI?▼

Use progressive mode: write the migrated version to accordion-base.tsx, repoint consumers one at a time with typechecking after each, then delete the original and rename. The Skill detects in-progress state and resumes rather than restarting.

What replaces asChild when migrating Radix UI to Base UI?▼

Base UI replaces asChild with the render prop, which accepts a ReactElement or a function of props and state. For example, <Trigger asChild><Button/></Trigger> becomes <Trigger render={<Button/>}>, with nativeButton set to false for non-button elements.

Does Base UI have equivalents for every Radix UI primitive?▼

No. AspectRatio maps to CSS aspect-ratio, Label to a native label element, VisuallyHidden to the sr-only class, and Direction to a DirectionProvider with a direction prop. Popover Anchor and NavigationMenu Indicator have no equivalent and are flagged as inert passthroughs.

Which libraries are not migrated during a Radix to Base UI migration?▼

Non-radix libraries are intentionally untouched: cmdk (command), vaul (drawer), sonner, input-otp, react-day-picker (calendar), and recharts (chart). They are reported as intentionally left alone in the migration report.

Why does my merged component still contain radix imports after migration?▼

Three-way merges can report zero conflicts while leaving stale radix hunks because the registry reorders functions between variants. A mandatory grep sweep for radix-ui and @radix-ui on every migrated file catches these leftovers.