@base-ui-components/react
Advanced tools
Base UI is a library of headless ('unstyled') React components and low-level hooks. You gain complete control over your app's CSS and accessibility features.
Base UI is a library of unstyled React components. You gain complete control over your app's CSS and accessibility features.
Install the package in your project directory with:
npm install @base-ui-components/react
Visit base-ui.com to view the full documentation.
For how-to questions that don't involve making changes to the code base, please use Stack Overflow instead of GitHub issues. Use the "base-ui" tag on Stack Overflow to make it easier for the community to find your question.
Read the contributing guide to learn about our development process, how to propose bug fixes and improvements, and how to build and test your changes.
Contributing to Base UI is about more than just issues and pull requests! There are many other ways to support Base UI beyond contributing to the code base.
The changelog is regularly updated to reflect what's changed in each new release.
Future plans and high-priority features and enhancements can be found in the roadmap.
This project is licensed under the terms of the MIT license.
For details of supported versions and contact details for reporting security issues, please refer to the security policy.
v1.0.0-beta.3
Sep 3, 2025
onOpenChange(open, event, reason) becomes onOpenChange(open, eventDetails), where eventDetails contains event and reason properties.
-onOpenChange: (open, event, reason) => {
+onOpenChange: (open, eventDetails) => {
- if (reason === 'escape-key') {
+ if (eventDetails.reason === 'escape-key') {
// ...
}
}
initialFocus and finalFocus functions.
The initialFocus and finalFocus props can be functions that return DOM elements to focus.
This is a new feature for finalFocus and a breaking change for initialFocus as the element must be returned directly (not as a ref).
(#2536) by @atomiksField (#2572) by @Copilotalign="center" or side differs (#2601) by @atomiksinitialFocus and finalFocus functions.
The initialFocus and finalFocus props can be functions that return DOM elements to focus.
This is a new feature for finalFocus and a breaking change for initialFocus as the element must be returned directly (not as a ref).
(#2536) by @atomiksonValueChange to fire when defaultValue/value are not set (#2600) by @atomiksonValueChange to fire when defaultValue/value are not set (#2600) by @atomikscloseParentOnEsc default value.
The default value of closeParentOnEsc in Menu.SubmenuRoot is now false.
When the <kbd>Esc</kbd> key is pressed in a Submenu, the Submenu closes, and the focus correctly moves to the SubmenuTrigger.
(#2493) by @seongminninitialFocus and finalFocus functions.
The initialFocus and finalFocus props can be functions that return DOM elements to focus.
This is a new feature for finalFocus and a breaking change for initialFocus as the element must be returned directly (not as a ref).
(#2536) by @atomikstransform-origin variable calculation when Positioner sideOffset is a function (#2511) by @atomikslimitShift offset based on arrow size (#2571) by @atomiksactive page prop.
NavigationMenu.List renders <ul> and NavigationMenu.Item renders <li> by default.
(#2526) by @atomiksAbortController instance (#2441) by @tomokinatonValueChange calls (#2591) by @atomiksinitialFocus and finalFocus functions.
The initialFocus and finalFocus props can be functions that return DOM elements to focus.
This is a new feature for finalFocus and a breaking change for initialFocus as the element must be returned directly (not as a ref).
(#2536) by @atomikstransform-origin variable calculation when Positioner sideOffset is a function (#2511) by @atomikslimitShift offset based on arrow size (#2571) by @atomikstransform-origin variable calculation when Positioner sideOffset is a function (#2511) by @atomikslimitShift offset based on arrow size (#2571) by @atomiksitems prop (#2397) by @atomiksonValueChange type inference (#2372) by @atomikstransform-origin variable calculation when Positioner sideOffset is a function (#2511) by @atomiksdata-highlighted and DOM focus item desync (#2569) by @atomiksdefaultOpen prop (#2570) by @atomikslimitShift offset based on arrow size (#2571) by @atomiksinput type="range" element receives focus. Focus styles that were targeting the thumb, should be updated.
For example .Thumb:focus-visible should be replaced with .Thumb:has(:focus-visible).
The tabIndex prop is moved from Root to Thumb where it gets forwarded to the input.
The thumb's render prop no longer contains the third inputProps argument; the input element is instead merged with children.
(#2578) by @mj12albert:focus-visible with mixed keyboard and pointer modality (#2584) by @mj12albertindex prop to Slider.Thumb (#2593) by @mj12alberttransform-origin variable calculation when Positioner sideOffset is a function (#2511) by @atomikslimitShift offset based on arrow size (#2571) by @atomiksdefaultTagName parameter (#2527) by @atomiksAll contributors of this release in alphabetical order: @atomiks, @baptisteArno, @brijeshb42, @Copilot, @ingokpp, @Janpot, @KenanYusuf, @LukasTy, @michaldudak, @mirka, @mj12albert, @mnajdova, @oliviertassinari, @Powerplex, @Raghuboi, @seongminn, @tomokinat
FAQs
Base UI is a library of headless ('unstyled') React components and low-level hooks. You gain complete control over your app's CSS and accessibility features.
The npm package @base-ui-components/react receives a total of 144,938 weekly downloads. As such, @base-ui-components/react popularity was classified as popular.
We found that @base-ui-components/react demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 7 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
/Security News
Socket identified 80 fake candidates targeting engineering roles, including suspected North Korean operators, exposing the new reality of hiring as a security function.
Application Security
/Research
/Security News
Socket detected multiple compromised CrowdStrike npm packages, continuing the "Shai-Hulud" supply chain attack that has now impacted nearly 500 packages.
Research
/Security News
Malicious update to @ctrl/tinycolor on npm is part of a supply-chain attack hitting 40+ packages across maintainers