skills.rest
eubyt
eubytCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

migrate-radix-to-base

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

Updated Sep 19, 2026
Search Tags:#React#migration#component library#ShadCN#codemod#Radix UI#base ui
One-click install
npx skills add https://github.com/eubyt/tools.eubyt.dev --skill migrate-radix-to-base-eubyt
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: migrate-radix-to-base
Source: https://github.com/eubyt/tools.eubyt.dev/tree/main/.agents/skills/migrate-radix-to-base
Command: npx skills add https://github.com/eubyt/tools.eubyt.dev --skill migrate-radix-to-base-eubyt

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, data-attribute changes, and behavior deltas that are easy to get wrong by hand. This Skill performs the migration systematically, keeping the project buildable at every step and reporting every change and behavior difference. ## Core Features & Use Cases - Golden-pair migration via the shadcn CLI: Fetches stock radix and base registry variants and replays user customizations with three-way merges, preserving project styling. - Transformation engine fallback: Hand-migrates non-shadcn or hand-rolled Radix code using verified prop-mapping reference tables for overlays, menus, form controls, disclosure, and display components. - Progressive or whole-project modes: Migrate a single component strangler-fig style (e.g. "migrate accordion") or the entire project in dependency order, with per-component reports in a .migration/ directory. - Use Case: A team wants to switch their shadcn/ui project from Radix to Base UI. The Skill classifies each wrapper, migrates components one at a time with typechecks, sweeps consumer call sites for prop changes like asChild to render, and flags behavior deltas such as tabs manual activation. ## Quick Start Ask the AI to migrate the accordion component from Radix UI to Base UI in this project.

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

Migrate component by component: fetch the base registry variant for each wrapper, replay your customizations onto it, then repoint consumers one at a time with typechecks between each step. Radix dependencies are removed only after the last component is migrated.

What replaces asChild when migrating Radix to Base UI?▼

The asChild prop becomes the render prop in Base UI. Instead of wrapping a child element, pass the element directly: `<Trigger asChild><Button/></Trigger>` becomes `<Trigger render={<Button/>}>`. Button-rendering parts also accept nativeButton.

Can Radix UI and Base UI coexist in the same project?▼

Yes, both libraries coexist fine during a progressive migration. Install @base-ui/react alongside Radix, migrate components one at a time using a -base.tsx suffix, and remove Radix packages only after the final component is migrated.

Which Radix components have no Base UI equivalent?▼

AspectRatio maps to a CSS aspect-ratio div, Label to a native label element, and VisuallyHidden to sr-only. Popover Anchor and NavigationMenu Indicator have no equivalent and are flagged as inert passthroughs.

What behavior changes should I expect after migrating to Base UI?▼

Notable deltas include tabs defaulting to manual activation, menu CheckboxItem and RadioItem not closing on click by default, and NavigationMenu hover delay changing from 200ms to 50ms. These are flagged in reports, never silently patched.

Does the migration touch libraries like cmdk, vaul, or sonner?▼

No. Non-Radix libraries such as cmdk (command), vaul (drawer), sonner, input-otp, react-day-picker, and recharts are intentionally left untouched and listed as such in the migration report.

Related Skills

Explore More Software Engineering Skills→
shadcn-uishadcn-ui
122.7k

migrate-radix-to-base

Migrate React projects from Radix UI to Base UI primitives.

Official
Advanced
lucaszhhlucaszhh

component-migrator

Migrates legacy frontend components into a MUI-based design system monorepo with theme augmentation and Storybook stories.

Community
Intermediate
MARUCIEMARUCIE
1

accessibility

Build and audit UI components for WCAG AA conformance with semantic HTML, ARIA, and keyboard support.

Community
Intermediate
duanbiao2000duanbiao2000
3

react-modernization

Migrate React class components to hooks and adopt React 18 features.

Community
Advanced