skills.rest
Kiyozz
KiyozzCOMMUNITY
Explore all skills by this author →
GitHub

migrate-radix-to-base

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

21|1|Updated Feb 17, 2019
Search Tags:#React#migration#component library#tailwind#ShadCN#Radix UI#base ui
One-click install
npx skills add https://github.com/Kiyozz/papyrus-compiler-app --skill migrate-radix-to-base-kiyozz
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: migrate-radix-to-base
Source: https://github.com/Kiyozz/papyrus-compiler-app/tree/main/.agents/skills/migrate-radix-to-base
Command: npx skills add https://github.com/Kiyozz/papyrus-compiler-app --skill migrate-radix-to-base-kiyozz

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 requires rewriting primitives, props, data attributes, and CSS variables across wrappers and every consumer call site, which is error-prone when done by hand. This Skill performs the migration systematically while keeping the project buildable at every step. ## Core Features & Use Cases - Component-level and whole-project migration: Migrate a single component ("migrate accordion") via a strangler-fig workflow, or convert an entire shadcn project in dependency order. - Golden-pair and transformation strategies: Uses the shadcn CLI registry variants for pristine wrappers, three-way merges for customized wrappers, and detailed prop-mapping reference tables for hand-rolled Radix code. - Consumer call-site sweeps: Rewrites asChild to render, renames changed props, and flags behavior deltas (tabs activation, menu close-on-click) instead of silently patching them. - Use Case: A team wants to switch their shadcn project's base library from Radix to Base UI; the Skill migrates each ui wrapper, sweeps app code for changed props, removes Radix dependencies, and writes per-component reports in a .migration/ directory. ## 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 a shadcn project from Radix UI to Base UI?▼

Run the shadcn info command to detect the current style, install @base-ui/react alongside Radix, then migrate wrappers one at a time using registry golden pairs or prop-mapping transforms. After the last component, flip components.json to the base style and remove Radix dependencies.

How to convert Radix asChild to Base UI render prop?▼

Replace <Trigger asChild><Button/></Trigger> with <Trigger render={<Button/>}> in Base UI. The render prop accepts a ReactElement or a function receiving props and state, and Base UI merges props onto the rendered element.

Does Base UI support all Radix UI primitives?▼

No. 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 passed through inertly with a flag in the report.

What happens to cmdk, vaul, and sonner during the migration?▼

They are intentionally left untouched because they are not Radix libraries. Command (cmdk), drawer (vaul), sonner, input-otp, react-day-picker, and recharts wrappers are reported as untouched rather than migrated.

Why does my Select onValueChange break after migrating to Base UI?▼

Base UI widens the signature to (value: Value | null, eventDetails), so passing a useState<string> setter directly fails typechecking. Widen the state to string | null or wrap the setter to match the new signature.

Can I migrate only one component instead of the whole project?▼

Yes, progressive mode is the default. The migrated version is written to <component>-base.tsx while the original stays intact, consumers are repointed one at a time, and the original is deleted only when no consumer imports it.

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
dicarsmtzdicarsmtz
1

ui-ux-excellence

Design, audit, and refactor frontend UI surfaces with token discipline and accessibility standards.

Community
Advanced
TOBIASpuchitoTOBIASpuchito

tailwind-design-system

Build component libraries and design tokens with Tailwind CSS v4 CSS-first configuration.

Community
Intermediate
sncollectivesncollective

ark-ui-v5

Reference headless React UI components from Ark UI v5.

Official
Intermediate