mui · Ayusht323 · Apr 1, 2026 · Apr 1, 2026
diff --git a/docs/data/material/components/autocomplete/autocomplete.md b/docs/data/material/components/autocomplete/autocomplete.md
@@ -180,7 +180,7 @@ related to the rendering of JSX.
 The Autocomplete component is built on this hook.
 
 ```tsx
-import { useAutocomplete } from '@mui/base/useAutocomplete';
+import { Autocomplete } from '@base-ui/react/autocomplete';
 ```
 
 The `useAutocomplete` hook is also reexported from @mui/material for convenience and backward compatibility.

diff --git a/docs/package.json b/docs/package.json
@@ -28,8 +28,8 @@
     "@fortawesome/fontawesome-svg-core": "^6.7.2",
     "@fortawesome/free-solid-svg-icons": "^6.7.2",
     "@fortawesome/react-fontawesome": "^0.2.6",
-    "@mui/base": "5.0.0-beta.70",
     "@mui/internal-core-docs": "workspace:*",
+    "@base-ui-components/react": "1.0.0-rc.0",
     "@mui/icons-material": "workspace:*",
     "@mui/internal-markdown": "workspace:^",
     "@mui/lab": "workspace:*",

diff --git a/docs/pages/performance/slider-emotion.js b/docs/pages/performance/slider-emotion.js
@@ -1,4 +1,4 @@
-import { NoSsr } from '@mui/base/NoSsr';
+import NoSsr from '@mui/material/NoSsr';
 import Slider from '@mui/material/Slider';
 
 const data = {

diff --git a/docs/pages/performance/slider-jss.js b/docs/pages/performance/slider-jss.js
@@ -1,4 +1,4 @@
-import { NoSsr } from '@mui/base/NoSsr';
+import NoSsr from '@mui/material/NoSsr';
 import Slider from '@mui/material/Slider';
 
 const data = {

diff --git a/docs/pages/performance/system.js b/docs/pages/performance/system.js
@@ -1,4 +1,4 @@
-import { NoSsr } from '@mui/base/NoSsr';
+import NoSsr from '@mui/material/NoSsr';
 import Box from '@mui/material/Box';
 
 export default function SxPropBoxMaterialUI() {

diff --git a/docs/pages/performance/table-component.js b/docs/pages/performance/table-component.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { NoSsr } from '@mui/base/NoSsr';
+import NoSsr from '@mui/material/NoSsr';
 
 const createComponent = (defaultComponent) => {
   const MyComponent = React.forwardRef(function MyComponent(props, ref) {

diff --git a/docs/pages/performance/table-emotion.js b/docs/pages/performance/table-emotion.js
@@ -2,7 +2,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
 // import { styled } from '@mui/material/styles';
-import { NoSsr } from '@mui/base/NoSsr';
+import NoSsr from '@mui/material/NoSsr';
 
 const createComponent = (defaultComponent) => {
   const Root = styled('div')`

diff --git a/docs/pages/performance/table-mui.js b/docs/pages/performance/table-mui.js
@@ -1,4 +1,4 @@
-import { NoSsr } from '@mui/base/NoSsr';
+import NoSsr from '@mui/material/NoSsr';
 import Table from '@mui/material/Table';
 import TableBody from '@mui/material/TableBody';
 import TableCell from '@mui/material/TableCell';

diff --git a/docs/pages/performance/table-raw.js b/docs/pages/performance/table-raw.js
@@ -1,4 +1,4 @@
-import { NoSsr } from '@mui/base/NoSsr';
+import NoSsr from '@mui/material/NoSsr';
 
 const data = { name: 'Frozen yoghurt', calories: 159, fat: 6.0, carbs: 24, protein: 4.0 };
 const rows = Array.from(new Array(100)).map(() => data);

diff --git a/docs/pages/performance/table-styled-components.js b/docs/pages/performance/table-styled-components.js
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import { NoSsr } from '@mui/base/NoSsr';
+import NoSsr from '@mui/material/NoSsr';
 
 const createComponent = (defaultComponent) => {
   const MyComponent = React.forwardRef(function MyComponent(props, ref) {

diff --git a/docs/src/components/action/LogoWithCopyMenu.tsx b/docs/src/components/action/LogoWithCopyMenu.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react';
 import copy from 'clipboard-copy';
 import { Link } from '@mui/internal-core-docs/Link';
-import { Portal } from '@mui/base/Portal';
 import Box from '@mui/material/Box';
 import Snackbar from '@mui/material/Snackbar';
 import Menu from '@mui/material/Menu';
@@ -105,20 +104,18 @@ export default function LogoWithCopyMenu({
           Copy wordmark as SVG
         </MenuItem>
       </Menu>
-      <Portal container={() => document.body}>
-        <Snackbar
-          open={copied}
-          onClose={handleClose}
-          anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
-          slots={{ transition: Slide }}
-          message={
-            <Box sx={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
-              <CheckCircleRoundedIcon sx={{ fontSize: '18px', color: 'success.main' }} />
-              Logo SVG copied to clipboard!
-            </Box>
-          }
-        />
-      </Portal>
+      <Snackbar
+        open={copied}
+        onClose={handleClose}
+        anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
+        slots={{ transition: Slide }}
+        message={
+          <Box sx={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
+            <CheckCircleRoundedIcon sx={{ fontSize: '18px', color: 'success.main' }} />
+            Logo SVG copied to clipboard!
+          </Box>
+        }
+      />
     </React.Fragment>
   );
 }
diff --git a/docs/src/components/header/HeaderNavDropdown.tsx b/docs/src/components/header/HeaderNavDropdown.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { styled } from '@mui/material/styles';
 import Box from '@mui/material/Box';
 import Collapse from '@mui/material/Collapse';
-import { ClickAwayListener } from '@mui/base/ClickAwayListener';
+import ClickAwayListener from '@mui/material/ClickAwayListener';
 import IconButton from '@mui/material/IconButton';
 import Typography from '@mui/material/Typography';
 import KeyboardArrowDownRounded from '@mui/icons-material/KeyboardArrowDownRounded';

diff --git a/docs/src/modules/components/Demo.js b/docs/src/modules/components/Demo.js
@@ -3,8 +3,7 @@ import PropTypes from 'prop-types';
 import copy from 'clipboard-copy';
 import { debounce } from '@mui/material/utils';
 import { alpha, styled } from '@mui/material/styles';
-import { Tabs } from '@mui/base/Tabs';
-import { TabPanel } from '@mui/base/TabPanel';
+import { Tabs } from '@base-ui/react/tabs';
 import { unstable_useId as useId } from '@mui/utils';
 import IconButton from '@mui/material/IconButton';
 import Box from '@mui/material/Box';
@@ -550,7 +549,7 @@ export default function Demo(props) {
               </React.Suspense>
             </NoSsr>
           </DemoToolbarRoot>
-          <Tabs value={activeTab} onChange={handleTabChange}>
+          <Tabs.Root value={activeTab} onValueChange={handleTabChange}>
             {demoData.relativeModules && openDemoSource && !editorCode.isPreview ? (
               <CodeTabList ownerState={ownerState}>
                 {tabs.map((tab, index) => (
@@ -569,7 +568,7 @@ export default function Demo(props) {
               {/* A limitation from https://github.com/nihgwu/react-runner,
                 we can't inject the `window` of the iframe so we need a disableLiveEdit option. */}
               {tabs.map((tab, index) => (
-                <TabPanel value={index} index={index} key={index}>
+                <Tabs.Panel value={index} index={index} key={index}>
                   {demoOptions.disableLiveEdit || index > 0 ? (
                     <DemoCodeViewer
                       key={index}
@@ -622,10 +621,10 @@ export default function Demo(props) {
                       <DemoEditorError>{debouncedError}</DemoEditorError>
                     </DemoEditor>
                   )}
-                </TabPanel>
+                </Tabs.Panel>
               ))}
             </Collapse>
-          </Tabs>
+          </Tabs.Root>
           {/* AI Suggestion Hero UI */}
           {demoOptions.aiSuggestion ? (
             <DemoAiSuggestionHero

diff --git a/docs/src/modules/components/DemoEditor.tsx b/docs/src/modules/components/DemoEditor.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react';
 import SimpleCodeEditor from 'react-simple-code-editor';
 import Box from '@mui/material/Box';
-import { NoSsr } from '@mui/base/NoSsr';
 import { styled, alpha, useTheme } from '@mui/material/styles';
 import { visuallyHidden } from '@mui/utils';
 import prism from '@mui/internal-markdown/prism';
@@ -112,9 +111,7 @@ export default function DemoEditor(props: DemoEditorProps) {
     >
       <div className="MuiCode-root" {...handlers}>
         <div className="scrollContainer">
-          <NoSsr>
-            <CodeCopyButton {...copyButtonProps} code={value} />
-          </NoSsr>
+          <CodeCopyButton {...copyButtonProps} code={value} />
           <label htmlFor={`${id}-textarea`} style={visuallyHidden}>
             Edit code
           </label>

diff --git a/docs/src/modules/components/Notifications.tsx b/docs/src/modules/components/Notifications.tsx
@@ -9,7 +9,7 @@ import Typography from '@mui/material/Typography';
 import Popper from '@mui/material/Popper';
 import Grow from '@mui/material/Grow';
 import MuiPaper from '@mui/material/Paper';
-import { ClickAwayListener } from '@mui/base/ClickAwayListener';
+import ClickAwayListener from '@mui/material/ClickAwayListener';
 import MuiList from '@mui/material/List';
 import MuiListItem from '@mui/material/ListItem';
 import MuiDivider from '@mui/material/Divider';

diff --git a/docs/src/modules/sandbox/Dependencies.test.js b/docs/src/modules/sandbox/Dependencies.test.js
@@ -19,7 +19,7 @@ import InputLabel from '@mui/material/InputLabel';
 import FormControl from '@mui/material/FormControl';
 import FormHelperText from '@mui/material/FormHelperText';
 import Select from '@mui/material/Select';
-import { SliderUnstyled } from '@mui/base/SliderUnstyled';
+import { Slider } from '@base-ui/react/slider';
 import FooBar, { Qux } from '@foo-bar/bip';
 const styles = theme => ({
   container: {
@@ -42,7 +42,7 @@ const styles = theme => ({
       '@foo-bar/bip': 'latest',
       // #npm-tag-reference
       '@mui/material': 'next',
-      '@mui/base': 'latest',
+      '@base-ui/react': 'latest',
       'prop-types': 'latest',
     });
   });
@@ -152,7 +152,7 @@ import 'exceljs';
       '@foo-bar/bip': 'latest',
       // #npm-tag-reference
       '@mui/material': 'next',
-      '@mui/base': 'latest',
+      '@base-ui/react': 'latest',
       typescript: 'latest',
     });
 
@@ -235,7 +235,7 @@ import lab from '@mui/lab';
   it('can use codesandbox deploys if a commit is given', () => {
     const source = `
 import * as Material from '@mui/material';
-import * as Base from '@mui/base';
+import * as Base from '@base-ui/react';
 import * as IconsMaterial from '@mui/icons-material';
 import * as Lab from '@mui/lab';
 import * as System from '@mui/system';
@@ -265,8 +265,7 @@ import * as Utils from '@mui/utils';
         'https://pkg.pr.new/mui/material-ui/@mui/system@2d0e8b4daf20b7494c818b6f8c4cc8423bc99d6f',
       '@mui/utils':
         'https://pkg.pr.new/mui/material-ui/@mui/utils@2d0e8b4daf20b7494c818b6f8c4cc8423bc99d6f',
-      '@mui/base':
-        'https://pkg.pr.new/mui/material-ui/@mui/base@2d0e8b4daf20b7494c818b6f8c4cc8423bc99d6f',
+      '@base-ui/react': 'latest',
     });
   });
 

diff --git a/packages-internal/core-docs/package.json b/packages-internal/core-docs/package.json
@@ -56,7 +56,7 @@
     "@emotion/cache": "catalog:docs",
     "@emotion/react": "catalog:docs",
     "@emotion/styled": "catalog:docs",
-    "@mui/base": "^5.0.0 || ^5.0.0-beta || ^7.0.0 || ^7.0.0-beta",
+    "@base-ui/react": "^1.3.0",
     "@mui/icons-material": "^5.0.0 || ^6.0.0 || ^7.0.0 || ^9.0.0 || ^9.0.0-alpha || ^9.0.0-beta",
     "@mui/material": "^5.0.0 || ^6.0.0 || ^7.0.0 || ^9.0.0 || ^9.0.0-alpha || ^9.0.0-beta",
     "@mui/material-nextjs": "^5.0.0 || ^6.0.0 || ^7.0.0 || ^9.0.0 || ^9.0.0-alpha || ^9.0.0-beta",

diff --git a/packages-internal/core-docs/src/CodeCopy/CodeCopyButton.tsx b/packages-internal/core-docs/src/CodeCopy/CodeCopyButton.tsx
@@ -8,7 +8,8 @@ export function CodeCopyButton(props: CodeCopyButtonProps) {
   const { code, ...other } = props;
   const { copy, isCopied } = useClipboardCopy();
   // This component is designed to be wrapped in NoSsr
-  const macOS = window.navigator.platform.toUpperCase().includes('MAC');
+  const macOS =
+    typeof window !== 'undefined' && window.navigator.platform.toUpperCase().includes('MAC');
   const key = macOS ? '⌘' : 'Ctrl + ';
 
   return (

diff --git a/packages-internal/core-docs/src/HighlightedCode/HighlightedCode.tsx b/packages-internal/core-docs/src/HighlightedCode/HighlightedCode.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import prism from '@mui/internal-markdown/prism';
-import { NoSsr } from '@mui/base/NoSsr';
+import NoSsr from '@mui/material/NoSsr';
 import { ButtonProps } from '@mui/material/Button';
 import { SxProps, styled } from '@mui/material/styles';
 import { useCodeCopy, CodeCopyButton } from '../CodeCopy';