Base UI, an unstyled React component library from the creators of Radix, Floating UI, and Material UI, has released version 1, marking the project's transition to production-ready stability after two years of development. The release ships with 35 accessible components, breaking changes for package naming, and a commitment to long-term maintenance from a dedicated team.
The 1.x release introduces several refinements to the developer experience compared to earlier versions, including a package rename, improved component APIs based on lessons learned from Radix UI, and enhanced accessibility features across all components. The release also includes performance optimizations and better integration with popular styling solutions like Tailwind CSS, CSS Modules, and CSS-in-JS libraries.
The package rename in the release went from @base-ui-components/react to @base-ui/react. This breaking change requires developers to update their import statements and package.json dependencies. The syntax for importing components remains largely unchanged, making the transition smooth for existing users. An example of the updated import syntax is shown below:
import { Popover } from '@base-ui/react';
Developers building with Base UI benefit from the library's headless architecture, which provides full control over styling while maintaining robust accessibility features. Unlike traditional component libraries that bundle opinionated styles, Base UI components come completely unstyled, allowing teams to implement their own design systems without fighting against default CSS. The components handle complex interaction patterns, keyboard navigation, focus management, and ARIA attributes, ensuring WCAG compliance out of the box while giving developers the freedom to style components however they choose.
The project distinguishes itself from competitors like Radix UI and Headless UI through its backing and long-term commitment. While Radix UI faced uncertainty after its acquisition, Base UI is supported by MUI, a company with engineers, designers, and managers dedicated to the project. This has generated confidence in the React community, with developers on Hacker News praising the stability and expressing enthusiasm for adoption.
On Reddit, a user asked why the release is being branded as a successor to Radix:
Curious as to why you are branding it as a successor to Radix? Specifically what was wrong with Radix that needed a whole new UI lib?
To which a reply explained the reasoning:
It's to communicate that it's easy to migrate from Radix to Base UI due to the API similarity.
For developers considering using BaseUI, a question from a user comparing to Ariakit or React Aria was asked on the same reddit announcement thread:
Why would I use this instead of Ariakit or React Aria? What does it provide that the others don't?
A Base UI maintainer (_doodack) replied:
React Aria has quite a different API. Some devs love it, some don't. It renders a large number of context providers in the React tree and can be challenging to mix and match with other component libraries. Our API is much more similar to Radix and Ariakit.
They go onto say:
We also have some features not found anywhere else, like "detached triggers" - useful for example for reusing the same popup element across different triggers
Base UI 1.0 also brings numerous component-specific improvements that address edge cases and enhance reliability. The Combobox component now properly respects the itemToStringValue for form submissions and accepts null as an option for the value prop. The Menu component fixes issues where submenus would open with zero delay and ensures focus correctly returns to the trigger when pressing Escape. The Select component received similar improvements for form handling and null value support. Performance enhancements were also implemented across the board, with particular attention paid to reducing unnecessary re-renders and improving runtime efficiency.
Base UI is an open-source React component library maintained by MUI and core contributors from the Radix and Floating UI projects. It focuses on accessibility, composability, and developer experience, providing low-level hooks and unstyled components that work seamlessly with any styling solution. Base UI is designed for teams building custom design systems and applications where visual control and accessibility are equally important.