migrate-radix-to-base

Run the shadcn info command to detect your style, then migrate component by component: fetch the base-style registry variant, replay your customizations onto it, repoint consumers one at a time, and typecheck each step. Radix dependencies are removed only after the last component is migrated.

Base UI replaces asChild with the render prop, which accepts a ReactElement or a function of props and state. For example, <Trigger asChild><Button/></Trigger> becomes <Trigger render={<Button/>}>. Button-rendering parts also accept nativeButton when the render target is not a native button.

Yes, both libraries coexist without conflicts, which enables progressive migration. Install @base-ui/react alongside your Radix packages, migrate components one at a time using a -base.tsx suffix, and remove Radix dependencies only after the final component is converted.

AspectRatio maps to the CSS aspect-ratio property, Label to a native label element, VisuallyHidden to the sr-only Tailwind class, and AccessibleIcon to aria-label plus sr-only text. Popover Anchor and NavigationMenu Indicator also lack equivalents and are flagged as inert passthroughs.

Base UI replaces Radix's data-state enum attributes with presence attributes like data-open, data-closed, data-checked, and data-pressed. Class strings must be rewritten, and animate-in/animate-out utilities should be restated using data-starting-style and data-ending-style transitions.

Known deltas include tabs defaulting to manual activation, menu checkbox and radio items not closing on click by default, and NavigationMenu hover delay changing from 200ms to 50ms. These are flagged in the migration report rather than silently patched.