migrate-radix-to-base

Migrate React components from Radix UI to @base-ui/react.

Updated Jul 4, 2026

Search Tags:#refactoring #react #migration #shadcn #radix-ui #base-ui

Ready to run

npx skills add https://github.com/levinbaenninger/website --skill migrate-radix-to-base

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: migrate-radix-to-base
Source: https://github.com/levinbaenninger/website/tree/main/.agents/skills/migrate-radix-to-base
Command: npx skills add https://github.com/levinbaenninger/website --skill migrate-radix-to-base

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill automates the complex, error-prone process of migrating React components from Radix UI to Base UI, ensuring build stability and idiomatic code structure throughout the transition.

Core Features & Use Cases

Golden Pair Migration: Leverages shadcn CLI and three-way merges to preserve custom component logic while updating to Base UI primitives.
Transformation Engine: Provides mechanical rewrites for class strings, data attributes, and consumer-side prop changes.
Use Case: Use this when you need to switch a large-scale shadcn project from Radix to Base UI without breaking existing functionality or losing custom styling.

Quick Start

Use the migrate-radix-to-base skill to perform a whole-project migration from Radix UI to Base UI.

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?▼

To migrate a shadcn project from Radix UI to Base UI, this Skill automates component refactoring and full-project dependency swaps while maintaining build integrity. It leverages shadcn CLI and three-way merges to preserve custom component logic during the transition.

What is the best way to automate class-string rewriting when switching from Radix UI primitives?▼

Automating class-string rewriting when switching from Radix UI primitives is handled by the transformation engine, which mechanically rewrites class strings, data attributes, and consumer-side prop changes to match Base UI requirements.

Can I migrate individual React components instead of a full project from Radix to Base UI?▼

Yes, you can migrate individual React components from Radix to Base UI. The Skill handles both individual component refactoring and full-project dependency swaps, allowing for flexible migration scopes depending on project needs.

How does the Golden Pair migration method preserve custom shadcn styling?▼

The Golden Pair migration method preserves custom shadcn styling by leveraging the shadcn CLI alongside three-way merges. This updates components to Base UI primitives while retaining existing custom component logic and styling configurations.

What are the limitations of automated refactoring for Radix UI components?▼

A limitation of automated refactoring for Radix UI components is the potential for behavior deltas. The Skill addresses this by generating behavior delta reports to track differences, though manual review of complex custom logic may still be required.