About Base UI

From the creators of Radix, Material UI, and Floating UI, Base UI is an unstyled React component library for building accessible user interfaces. Our focus is on accessibility, performance, and developer experience. Our goal is to provide a complete set of open-source UI components, with a delightful developer experience, in a sustainable way.

Features

Headless

Base UI components are unstyled, don’t bundle CSS, and don’t prescribe a styling solution. You retain complete control over your application’s CSS layer. Base UI is compatible with Tailwind, CSS Modules, plain CSS, CSS-in-JS, or any other styling engine you prefer.

Accessible

Poor accessibility can make your application difficult to navigate for all users, not just for users with disabilities. Accessibility is our primary focus. Base UI components adhere to WAI-ARIA design patterns and are tested on a wide range of platforms, devices, browsers, screen readers, and other environments.

Composable

Component APIs are fully open, so you have direct access to each node, you can easily add or remove parts, and you can wrap them however you prefer.

Team

• Colm Tuite (Radix) @colmtuite
• James Nelson (Floating UI) @atomiksdev
• Michał Dudak (Material UI) @michaldudak
• Marija Najdova (Material UI + Fluent UI) @marijanajdova
• Albert Yu (Material UI) @mj12albert
• Lukas Tyla (Material UI) @LukasTy
• Aarón García @aarongarciah

Browser support

Base UI supports all modern browsers that implement features marked as Baseline Widely Available at the time of the last major version release. This means the features we use have been supported across major browsers for at least 30 months, ensuring broad compatibility and stability.

For the full list of supported browsers, refer to our .browserslistrc.

React versions

Base UI supports React 17 and newer versions.

Bundler support

Base UI uses the imports field in its package.json to keep internal helpers out of client bundles—most notably the prehydration scripts used by Tabs.Indicator and Slider.Thumb. This is supported by Node.js and every actively maintained bundler, including Vite, Rspack, esbuild, Parcel, Rollup, and webpack 5 and newer.

Webpack 4 does not recognize the imports field and fails to resolve specifiers such as #prehydration/tabs/indicator. Because these scripts are imported by the components themselves, a project that uses Tabs.Indicator or Slider.Thumb won’t build under webpack 4 without help. If your toolchain still relies on webpack 4 (for example, Create React App 4), alias each Base UI prehydration import to its browser stub:

module.exports = {
  resolve: {
    alias: {
      '#prehydration/tabs/indicator': '@base-ui/react/tabs/indicator/prehydrationScript.stub.js',
      '#prehydration/slider/thumb': '@base-ui/react/slider/thumb/prehydrationScript.stub.js',
    },
  },
};

The stub files are empty, so the prehydration scripts are excluded from the bundle—the same outcome modern bundlers get from the browser condition.

Community

Visit the Community page to learn more about ecosystem projects, support channels, and how to stay up to date and contribute.