skills.rest
zzafergok
zzafergokCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

migrate-radix-to-base

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

Updated Jul 5, 2026
Search Tags:#React#migration#component library#tailwind#ShadCN#Radix UI#base ui
One-click install
npx skills add https://github.com/zzafergok/tulpar --skill migrate-radix-to-base-zzafergok
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: migrate-radix-to-base
Source: https://github.com/zzafergok/tulpar/tree/main/.agent/skills/migrate-radix-to-base
Command: npx skills add https://github.com/zzafergok/tulpar --skill migrate-radix-to-base-zzafergok

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 documenting every change. ## Core Features & Use Cases - Component-level and whole-project migration: Migrate a single shadcn wrapper ("migrate accordion") via a strangler-fig workflow, or convert an entire project in dependency order. - Verified prop and class mappings: Uses detailed reference tables covering overlays, menus, form controls, disclosure, and display components, including data-attribute, CSS variable, and Tailwind class rewrites. - Golden-pair strategy via the shadcn CLI: Fetches official base-style registry variants and replays user customizations with three-way merges, preserving existing styling. - Honest per-component reporting: Writes structured reports to .migration/<component>.md listing changed files, intentional skips, and flagged behavior deltas. - Use Case: A team wants to switch their shadcn project's base library 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 removes Radix dependencies only after the last component is done. ## 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 project from Radix UI to Base UI?▼

Run the shadcn CLI info command to detect the current style, then migrate components one at a time in dependency order. Pristine wrappers can be re-fetched as base-style registry variants, while customized wrappers need a three-way merge to preserve user changes.

How to convert Radix asChild prop to Base UI?▼

Radix's asChild boolean becomes Base UI's render prop, which accepts a ReactElement or a function. For example, `<Trigger asChild><Button/></Trigger>` becomes `<Trigger render={<Button/>}>`, and button-rendering parts may also need nativeButton set to false.

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 packages, migrate components one at a time using a -base.tsx suffix, and remove Radix dependencies only after the last component is finalized.

What Radix components have no Base UI equivalent?▼

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

Why does my Base UI migration have behavior differences from Radix?▼

Some behaviors differ by design: Base UI tabs default to manual activation, menu checkbox and radio items do not close on click by default, and NavigationMenu hover delay changes from 200ms to 50ms. These deltas are flagged in the migration report rather than silently patched.

Does the migration touch non-Radix libraries like cmdk or vaul?▼

No, wrappers around cmdk (command), vaul (drawer), sonner, input-otp, react-day-picker, and recharts are intentionally left untouched. They are listed in the report as deliberately skipped since they are not Radix primitives.

Related Skills

Explore More Software Engineering Skills→
pohlai88pohlai88

migrate-radix-to-base

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

Community
Advanced
RonHoubenRonHouben
2

playwright-mcp-ui-testing

Automate visual UI testing of Wavecraft's web UI with Playwright MCP.

Community
Intermediate
Owl-ListenerOwl-Listener
2.5k

navigation-patterns

Select and design navigation patterns matched to product structure and user tasks.

Community
Intermediate
sncollectivesncollective

ark-ui-v5

Reference headless React UI components from Ark UI v5.

Official
Intermediate