base-ui-react

Base UI provides unstyled, accessible components with render props as drop-in replacements for Radix UI. This Skill covers migrating Dialog, Select, Popover, Tooltip, Accordion, and NumberField by handling render-props patterns, Positioner usage, Portal/Backdrop/Popup renaming, and TypeScript typings with automated scripts and migration references.

Render props give you maximum control by passing functions that return JSX, letting you customize every aspect of styling and behavior. Base UI uses this pattern across 27+ accessible components, unlike styled-first libraries, enabling design system flexibility without fighting predefined styles.

Yes, Base UI integrates Floating UI for positioning popups, popovers, tooltips, and dropdowns. The Skill covers Positioner usage and floating component setup as part of the migration path, ensuring proper dropdown and overlay positioning out of the box.

Base UI's 27+ components ship with full accessibility built in—ARIA attributes, keyboard navigation, and semantic HTML are included. This Skill addresses accessibility concerns during migration from Radix UI, ensuring your components remain compliant throughout the transition.

Install @base-ui-components/react to access unstyled, accessible UI building blocks. This Skill includes setup guides and automated migration scripts to integrate Base UI into your existing React project alongside Radix UI equivalents.

Base UI is in beta, so check compatibility with your TypeScript version and review the full migration references this Skill provides. The trade-off is complete styling control and flexibility—you manage all CSS rather than inheriting component styles.