[docs] Migrate @mui/base to Base UI

Ayusht323 · Ayusht323 · commit a3471d340902 · 2026-04-04T13:18:48.000+05:30
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/modules/components/Demo.js b/docs/src/modules/components/Demo.js
@@ -549,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) => (
@@ -624,7 +624,7 @@ export default function Demo(props) {
                 </Tabs.Panel>
               ))}
             </Collapse>
-          </Tabs>
+          </Tabs.Root>
           {/* AI Suggestion Hero UI */}
           {demoOptions.aiSuggestion ? (
             <DemoAiSuggestionHero
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';
diff --git a/packages-internal/core-docs/src/HighlightedCodeWithTabs/HighlightedCodeWithTabs.tsx b/packages-internal/core-docs/src/HighlightedCodeWithTabs/HighlightedCodeWithTabs.tsx
diff --git a/packages-internal/core-docs/src/NextNProgressBar/NProgressBar.js b/packages-internal/core-docs/src/NextNProgressBar/NProgressBar.js
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import { NoSsr } from '@mui/base/NoSsr';`
	`1`	`+import NoSsr from '@mui/material/NoSsr';`
`2`	`2`	`import Slider from '@mui/material/Slider';`
`3`	`3`
`4`	`4`	`const data = {`