Migrate Radix To Base
This is a full migration engine for taking React projects from Radix UI to Base UI, either component by component or all at once. It knows how to handle shadcn projects by fetching golden pairs from the registry and replaying your customizations onto the Base UI variants using three-way merges, while hand-rolled Radix code gets transformed using prop tables and pattern matching. The strangler-fig approach is smart: writes migrated components to separate files, moves consumers over one at a time, keeps everything buildable. It's opinionated about git hygiene (clean tree, feature branch, one commit per component) and won't silently patch behavior differences. If you're stuck on Radix because migration sounds painful, this actually automates the tedious parts.
- skills.sh installs
- 4.9K
- GitHub stars
- 119.1K
- last updated
- Jul 14, 2026
Install
$ npx -y skills add shadcn/ui --skill migrate-radix-to-base --agent claude-codeInstalls into .claude/skills of the current project.
Files
Radix UI -> Base UI migration
You migrate shadcn wrappers, hand-rolled radix compositions, and their
consumers to @base-ui/react, keeping the project buildable at every step.
Be precise; never guess a mapping. When a prop or part is not in these
reference files, check node_modules/@base-ui/react/**/*.d.ts before
transforming, and record gaps in the report.
Preflight (always)
npx shadcn@latest info --json(or the project's runner): gives the current base, STYLE (e.g.radix-lyra), tailwind version, aliases, installed components, and package manager. Trust it over inference.- Detect the package manager (packageManager field / lockfile: pnpm-lock.yaml, bun.lock, yarn.lock, package-lock.json) and use IT for every install. Never leave a stale lockfile.
- Require a clean git tree; work on a branch; one commit per component.
- Baseline check BEFORE touching dependencies: run the project's typecheck/build so pre-existing failures are never attributed to you.
- Install
@base-ui/reactalongside radix. Radix packages are removed only after the LAST component is migrated (both coexist fine).
Sponsors
Agent CaffeineSponsoredClose your lid, come back to finished work
SnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthly
WaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthly
knobsSponsoredSee your site on any phone, any day, in any languageDetails
- Repository
- github.com/shadcn/ui
- Category
- Frontend Development
- First seen
- Jul 14, 2026
More from shadcn/ui
All 2Recommended
More Frontend Development
syncfusion-react-commonsyncfusion/react-ui-components-skillsCommon utilities and features for Syncfusion React components. Use this skill when the user needs to implement animations, drag-and-drop, state persistence, RTL758skills.sh installssyncfusion-react-accumulation-chartsyncfusion/react-ui-components-skillsImplement Syncfusion React Accumulation Charts including Pie, Doughnut, Funnel, and Pyramid chart types. Use this skill when users need circular data visualizat736skills.sh installs
react-router-declarative-moderemix-run/agent-skillsreact router declarative mode698skills.sh installssyncfusion-react-progress-barsyncfusion/react-ui-components-skillsImplement Syncfusion React Progress Bar for visual feedback. Use this skill whenever users need to display progress indicators, loading states, file uploads, da679skills.sh installssyncfusion-angular-commonsyncfusion/angular-ui-components-skillsCommon utilities and features for Syncfusion Angular components. Use this skill when the user needs to implement animations, drag-and-drop, state persistence, R338skills.sh installs