Moving from Radix UI to Base UI
Radix UI and Base UI are both premier "headless" libraries, but they differ in architecture. Base UI (the foundation for the latest Shadcn components) offers a more modern approach to component rendering and layout management.
1. Dependency Setup
To start the migration, you need to add the Base UI core package. Unlike Radix, which uses individual packages (e.g., @radix-ui/react-dialog), Base UI is a unified library.
2. Key Technical Shifts
Render Props vs. asChild
In Radix, you used asChild to merge component logic with your custom tags. Base UI uses a render prop, which is more explicit and prevents common "Slot" component bugs.
Why it's better: The render prop allows Base UI to inject props directly without needing the Slot component wrapper.
The "Positioner" Layer
Radix handled positioning (like "top" or "bottom") directly on the Content component. Base UI separates Logic from Positioning by introducing a dedicated Positioner component.
Accessibility & Labels
Base UI enforces better screen-reader standards. If you include a Labelinside a popup, you must wrap the content in a Group component to ensure the relationship is announced correctly.
The "Prop Rename" Checklist
Base UI has unified many prop names. For example, common triggers now use consistent naming patterns across different components. While most logic remains similar, you should check individual component guides for specific attribute changes like openvs defaultOpen.