diff --git a/.circleci/config.yml b/.circleci/config.yml
index 386fdfbe7ea6b2..cb64678a5a755a 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -136,7 +136,7 @@ jobs:
           steps:
             - run:
                 name: Should not have any git not staged
-                command: git diff --exit-code
+                command: git add -A && git diff --exit-code --staged
             - run:
                 name: Check for duplicated packages
                 command: yarn deduplicate
@@ -222,35 +222,35 @@ jobs:
           command: yarn proptypes
       - run:
           name: '`yarn proptypes` changes committed?'
-          command: git diff --exit-code
+          command: git add -A && git diff --exit-code --staged
       - run:
           name: 'Write "use client" directive'
           command: yarn rsc:build
       - run:
           name: '`yarn rsc:build` changes detected, "use client" missing from exports'
-          command: git diff --exit-code
+          command: git add -A && git diff --exit-code --staged
       - run:
           name: Generate the documentation
           command: yarn docs:api
       - run:
           name: '`yarn docs:api` changes committed?'
-          command: git diff --exit-code
+          command: git add -A && git diff --exit-code --staged
       - run:
           name: Update the navigation translations
           command: yarn docs:i18n
       - run:
           name: '`yarn docs:i18n` changes committed?'
-          command: git diff --exit-code
+          command: git add -A && git diff --exit-code --staged
       - run:
           name: '`yarn extract-error-codes` changes committed?'
           command: |
             yarn extract-error-codes
-            git diff --exit-code
+            git add -A && git diff --exit-code --staged
       - run:
           name: '`yarn docs:link-check` changes committed?'
           command: |
             yarn docs:link-check
-            git diff --exit-code
+            git add -A && git diff --exit-code --staged
   test_types:
     <<: *defaults
     resource_class: 'medium+'
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 89eb047708406b..b593fa53be9b15 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -16,7 +16,6 @@ If you're reading this, you're awesome! Thank you for helping us make this proje
   - [Coding style](#coding-style)
 - [How to add a new demo in the documentation](#how-to-add-a-new-demo-in-the-documentation)
 - [How can I use a change that wasn't released yet?](#how-can-i-use-a-change-that-wasnt-released-yet)
-- [Translations](#translations)
 - [Roadmap](#roadmap)
 - [License](#license)
 
@@ -345,13 +344,6 @@ $test-project> npm i ./path-to-file/mui-material-x.x.x.tar.gz
 > If you have already installed this package, your changes will not be reflected when you reinstall it.
 > As a quick fix, you can temporarily bump the version number in your `package.json` before running `yarn build`.
 
-## Translations
-
-Translations are handled via [Crowdin](https://translate.mui.com).
-You don't need to apply any changes to localized versions of our markdown files
-i.e. files having a `-locale` suffix. Crowdin automatically takes care of syncing
-these changes across the localized versions.
-
 ## Roadmap
 
 To get a sense of where MUI is heading, or for ideas on where you could contribute, take a look at the [roadmap](https://mui.com/material-ui/discover-more/roadmap/).
diff --git a/README.md b/README.md
index aefd6baf51bed7..084fae1a0054ad 100644
--- a/README.md
+++ b/README.md
@@ -131,7 +131,7 @@ Diamond Sponsors are those who have pledged \$1,500/month or more to MUI.
 via [OpenCollective](https://opencollective.com/mui) or via [Patreon](https://www.patreon.com/oliviertassinari)
 
 <p>
-  <a href="https://tidelift.com/subscription/pkg/npm-material-ui?utm_source=npm-material-ui&utm_medium=referral&utm_campaign=homepage" rel="noopener sponsored" target="_blank"><img height="96" width="96" src="https://avatars.githubusercontent.com/u/30204434?s=192" alt="tidelift.com" title="Enterprise-ready open-source software" loading="lazy" /></a>
+  <a href="https://www.tidelift.com/subscription/pkg/npm-material-ui?utm_source=npm-material-ui&utm_medium=referral&utm_campaign=homepage" rel="noopener sponsored" target="_blank"><img height="96" width="96" src="https://avatars.githubusercontent.com/u/30204434?s=192" alt="tidelift.com" title="Enterprise-ready open-source software" loading="lazy" /></a>
   <a href="https://www.text-em-all.com/?utm_source=MUI&utm_medium=referral&utm_content=readme" rel="noopener sponsored" target="_blank"><img src="https://avatars.githubusercontent.com/u/1262264?s=192" alt="text-em-all.com" title="Mass Text Messaging & Automated Calling" height="96" width="96" loading="lazy"></a>
   <a href="https://open.spotify.com/?utm_source=MUI&utm_medium=referral&utm_content=readme" rel="noopener sponsored" target="_blank"><img height="96" width="96" src="https://images.opencollective.com/spotify/f37ea28/logo/192.png" alt="Spotify" title="Music service to access to millions of songs" loading="lazy" /></a>
   <a href="https://megafamous.com/?utm_source=MUI&utm_medium=referral&utm_content=readme" rel="noopener sponsored" target="_blank"><img height="96" width="96" src="https://mui.com/static/sponsors/megafamous.png" alt="megafamous.com" title="The best place to buy Instagram followers & likes." loading="lazy" /></a>
diff --git a/docs/data/base/components/button/UnstyledButtonsSimple/tailwind/index.js b/docs/data/base/components/button/UnstyledButtonsSimple/tailwind/index.js
index fdcc06f3e72fa7..236a3664dddcef 100644
--- a/docs/data/base/components/button/UnstyledButtonsSimple/tailwind/index.js
+++ b/docs/data/base/components/button/UnstyledButtonsSimple/tailwind/index.js
@@ -9,7 +9,7 @@ export default function UnstyledButtonsSimple() {
         Button
       </Button>
       <Button
-        className="cursor-pointer disabled:cursor-not-allowed text-sm bg-violet-500 text-white rounded-md font-semibold px-6 py-2 border-none disabled:opacity-50"
+        className="cursor-pointer disabled:cursor-not-allowed text-sm bg-violet-500 text-white rounded-md font-semibold px-4 py-2 border-none disabled:opacity-50"
         disabled
       >
         Disabled
diff --git a/docs/data/base/components/button/UnstyledButtonsSimple/tailwind/index.tsx b/docs/data/base/components/button/UnstyledButtonsSimple/tailwind/index.tsx
index fdcc06f3e72fa7..236a3664dddcef 100644
--- a/docs/data/base/components/button/UnstyledButtonsSimple/tailwind/index.tsx
+++ b/docs/data/base/components/button/UnstyledButtonsSimple/tailwind/index.tsx
@@ -9,7 +9,7 @@ export default function UnstyledButtonsSimple() {
         Button
       </Button>
       <Button
-        className="cursor-pointer disabled:cursor-not-allowed text-sm bg-violet-500 text-white rounded-md font-semibold px-6 py-2 border-none disabled:opacity-50"
+        className="cursor-pointer disabled:cursor-not-allowed text-sm bg-violet-500 text-white rounded-md font-semibold px-4 py-2 border-none disabled:opacity-50"
         disabled
       >
         Disabled
diff --git a/docs/data/base/components/button/UnstyledButtonsSimple/tailwind/index.tsx.preview b/docs/data/base/components/button/UnstyledButtonsSimple/tailwind/index.tsx.preview
index 544c50bb7e88b0..b45ed341d8ae54 100644
--- a/docs/data/base/components/button/UnstyledButtonsSimple/tailwind/index.tsx.preview
+++ b/docs/data/base/components/button/UnstyledButtonsSimple/tailwind/index.tsx.preview
@@ -2,7 +2,7 @@
   Button
 </Button>
 <Button
-  className="cursor-pointer disabled:cursor-not-allowed text-sm bg-violet-500 text-white rounded-md font-semibold px-6 py-2 border-none disabled:opacity-50"
+  className="cursor-pointer disabled:cursor-not-allowed text-sm bg-violet-500 text-white rounded-md font-semibold px-4 py-2 border-none disabled:opacity-50"
   disabled
 >
   Disabled
diff --git a/docs/data/base/components/tabs/UnstyledTabsCustomized/css/index.js b/docs/data/base/components/tabs/UnstyledTabsCustomized/css/index.js
new file mode 100644
index 00000000000000..2cc84eb66fdcc3
--- /dev/null
+++ b/docs/data/base/components/tabs/UnstyledTabsCustomized/css/index.js
@@ -0,0 +1,121 @@
+import * as React from 'react';
+import { useTheme } from '@mui/system';
+import Tabs from '@mui/base/Tabs';
+import TabsList from '@mui/base/TabsList';
+import TabPanel from '@mui/base/TabPanel';
+import { buttonClasses } from '@mui/base/Button';
+import Tab, { tabClasses } from '@mui/base/Tab';
+
+export default function UnstyledTabsCustomized() {
+  return (
+    <React.Fragment>
+      <Tabs defaultValue={1}>
+        <TabsList className="CustomTabsList">
+          <Tab className="CustomTab" value={1}>
+            One
+          </Tab>
+          <Tab className="CustomTab" value={2}>
+            Two
+          </Tab>
+          <Tab className="CustomTab" value={3}>
+            Three
+          </Tab>
+        </TabsList>
+        <TabPanel className="CustomTabPanel" value={1}>
+          First page
+        </TabPanel>
+        <TabPanel className="CustomTabPanel" value={2}>
+          Second page
+        </TabPanel>
+        <TabPanel className="CustomTabPanel" value={3}>
+          Third page
+        </TabPanel>
+      </Tabs>
+      <Styles />
+    </React.Fragment>
+  );
+}
+
+const cyan = {
+  50: '#E9F8FC',
+  100: '#BDEBF4',
+  200: '#99D8E5',
+  300: '#66BACC',
+  400: '#1F94AD',
+  500: '#0D5463',
+  600: '#094855',
+  700: '#063C47',
+  800: '#043039',
+  900: '#022127',
+};
+
+function useIsDarkMode() {
+  const theme = useTheme();
+  return theme.palette.mode === 'dark';
+}
+
+function Styles() {
+  // Replace this with your app logic for determining dark mode
+  const isDarkMode = useIsDarkMode();
+  return (
+    <style>
+      {`
+      .CustomTabsList {
+        min-width: 400px;
+        background-color: ${cyan[500]};
+        border-radius: 12px;
+        margin-bottom: 16px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        align-content: space-between;
+        box-shadow: 0px 4px 6px ${
+          isDarkMode ? 'rgba(0,0,0, 0.4)' : 'rgba(0,0,0, 0.2)'
+        };
+      }
+
+      .CustomTab {
+        font-family: 'IBM Plex Sans', sans-serif;
+        color: white;
+        cursor: pointer;
+        font-size: 0.875rem;
+        font-weight: bold;
+        background-color: transparent;
+        width: 100%;
+        line-height: 1.5;
+        padding: 8px 12px;
+        margin: 6px;
+        border: none;
+        border-radius: 8px;
+        display: flex;
+        justify-content: center;
+      }
+
+      .CustomTab:hover {
+        background-color: ${cyan[400]};
+      }
+
+      .CustomTab:focus {
+        color: #fff;
+        outline: 3px solid ${cyan[200]};
+      }
+
+      .CustomTab.${tabClasses.selected} {
+        background-color: #fff;
+        color: ${cyan[600]};
+      }
+
+      .CustomTab.${buttonClasses.disabled} {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+
+      .CustomTabPanel {
+        width: 100%;
+        font-family: 'IBM Plex Sans', sans-serif;
+        font-size: 0.875rem;
+      }
+      `}
+    </style>
+  );
+}
diff --git a/docs/data/base/components/tabs/UnstyledTabsCustomized/css/index.tsx b/docs/data/base/components/tabs/UnstyledTabsCustomized/css/index.tsx
new file mode 100644
index 00000000000000..2cc84eb66fdcc3
--- /dev/null
+++ b/docs/data/base/components/tabs/UnstyledTabsCustomized/css/index.tsx
@@ -0,0 +1,121 @@
+import * as React from 'react';
+import { useTheme } from '@mui/system';
+import Tabs from '@mui/base/Tabs';
+import TabsList from '@mui/base/TabsList';
+import TabPanel from '@mui/base/TabPanel';
+import { buttonClasses } from '@mui/base/Button';
+import Tab, { tabClasses } from '@mui/base/Tab';
+
+export default function UnstyledTabsCustomized() {
+  return (
+    <React.Fragment>
+      <Tabs defaultValue={1}>
+        <TabsList className="CustomTabsList">
+          <Tab className="CustomTab" value={1}>
+            One
+          </Tab>
+          <Tab className="CustomTab" value={2}>
+            Two
+          </Tab>
+          <Tab className="CustomTab" value={3}>
+            Three
+          </Tab>
+        </TabsList>
+        <TabPanel className="CustomTabPanel" value={1}>
+          First page
+        </TabPanel>
+        <TabPanel className="CustomTabPanel" value={2}>
+          Second page
+        </TabPanel>
+        <TabPanel className="CustomTabPanel" value={3}>
+          Third page
+        </TabPanel>
+      </Tabs>
+      <Styles />
+    </React.Fragment>
+  );
+}
+
+const cyan = {
+  50: '#E9F8FC',
+  100: '#BDEBF4',
+  200: '#99D8E5',
+  300: '#66BACC',
+  400: '#1F94AD',
+  500: '#0D5463',
+  600: '#094855',
+  700: '#063C47',
+  800: '#043039',
+  900: '#022127',
+};
+
+function useIsDarkMode() {
+  const theme = useTheme();
+  return theme.palette.mode === 'dark';
+}
+
+function Styles() {
+  // Replace this with your app logic for determining dark mode
+  const isDarkMode = useIsDarkMode();
+  return (
+    <style>
+      {`
+      .CustomTabsList {
+        min-width: 400px;
+        background-color: ${cyan[500]};
+        border-radius: 12px;
+        margin-bottom: 16px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        align-content: space-between;
+        box-shadow: 0px 4px 6px ${
+          isDarkMode ? 'rgba(0,0,0, 0.4)' : 'rgba(0,0,0, 0.2)'
+        };
+      }
+
+      .CustomTab {
+        font-family: 'IBM Plex Sans', sans-serif;
+        color: white;
+        cursor: pointer;
+        font-size: 0.875rem;
+        font-weight: bold;
+        background-color: transparent;
+        width: 100%;
+        line-height: 1.5;
+        padding: 8px 12px;
+        margin: 6px;
+        border: none;
+        border-radius: 8px;
+        display: flex;
+        justify-content: center;
+      }
+
+      .CustomTab:hover {
+        background-color: ${cyan[400]};
+      }
+
+      .CustomTab:focus {
+        color: #fff;
+        outline: 3px solid ${cyan[200]};
+      }
+
+      .CustomTab.${tabClasses.selected} {
+        background-color: #fff;
+        color: ${cyan[600]};
+      }
+
+      .CustomTab.${buttonClasses.disabled} {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+
+      .CustomTabPanel {
+        width: 100%;
+        font-family: 'IBM Plex Sans', sans-serif;
+        font-size: 0.875rem;
+      }
+      `}
+    </style>
+  );
+}
diff --git a/docs/data/base/components/tabs/UnstyledTabsCustomized.js b/docs/data/base/components/tabs/UnstyledTabsCustomized/system/index.js
similarity index 85%
rename from docs/data/base/components/tabs/UnstyledTabsCustomized.js
rename to docs/data/base/components/tabs/UnstyledTabsCustomized/system/index.js
index 0c69d127ebb942..e7e1a46e3ec724 100644
--- a/docs/data/base/components/tabs/UnstyledTabsCustomized.js
+++ b/docs/data/base/components/tabs/UnstyledTabsCustomized/system/index.js
@@ -34,19 +34,6 @@ const blue = {
   900: '#003A75',
 };
 
-const grey = {
-  50: '#f6f8fa',
-  100: '#eaeef2',
-  200: '#d0d7de',
-  300: '#afb8c1',
-  400: '#8c959f',
-  500: '#6e7781',
-  600: '#57606a',
-  700: '#424a53',
-  800: '#32383f',
-  900: '#24292f',
-};
-
 const StyledTab = styled(Tab)`
   font-family: 'IBM Plex Sans', sans-serif;
   color: white;
@@ -55,10 +42,11 @@ const StyledTab = styled(Tab)`
   font-weight: bold;
   background-color: transparent;
   width: 100%;
-  padding: 12px;
+  line-height: 1.5;
+  padding: 8px 12px;
   margin: 6px;
   border: none;
-  border-radius: 7px;
+  border-radius: 8px;
   display: flex;
   justify-content: center;
 
@@ -98,6 +86,8 @@ const StyledTabsList = styled(TabsList)(
   align-items: center;
   justify-content: center;
   align-content: space-between;
-  box-shadow: 0px 4px 8px ${theme.palette.mode === 'dark' ? grey[900] : grey[200]};
+  box-shadow: 0px 4px 6px ${
+    theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.4)' : 'rgba(0,0,0, 0.2)'
+  };
   `,
 );
diff --git a/docs/data/base/components/tabs/UnstyledTabsCustomized.tsx b/docs/data/base/components/tabs/UnstyledTabsCustomized/system/index.tsx
similarity index 85%
rename from docs/data/base/components/tabs/UnstyledTabsCustomized.tsx
rename to docs/data/base/components/tabs/UnstyledTabsCustomized/system/index.tsx
index 0c69d127ebb942..e7e1a46e3ec724 100644
--- a/docs/data/base/components/tabs/UnstyledTabsCustomized.tsx
+++ b/docs/data/base/components/tabs/UnstyledTabsCustomized/system/index.tsx
@@ -34,19 +34,6 @@ const blue = {
   900: '#003A75',
 };
 
-const grey = {
-  50: '#f6f8fa',
-  100: '#eaeef2',
-  200: '#d0d7de',
-  300: '#afb8c1',
-  400: '#8c959f',
-  500: '#6e7781',
-  600: '#57606a',
-  700: '#424a53',
-  800: '#32383f',
-  900: '#24292f',
-};
-
 const StyledTab = styled(Tab)`
   font-family: 'IBM Plex Sans', sans-serif;
   color: white;
@@ -55,10 +42,11 @@ const StyledTab = styled(Tab)`
   font-weight: bold;
   background-color: transparent;
   width: 100%;
-  padding: 12px;
+  line-height: 1.5;
+  padding: 8px 12px;
   margin: 6px;
   border: none;
-  border-radius: 7px;
+  border-radius: 8px;
   display: flex;
   justify-content: center;
 
@@ -98,6 +86,8 @@ const StyledTabsList = styled(TabsList)(
   align-items: center;
   justify-content: center;
   align-content: space-between;
-  box-shadow: 0px 4px 8px ${theme.palette.mode === 'dark' ? grey[900] : grey[200]};
+  box-shadow: 0px 4px 6px ${
+    theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.4)' : 'rgba(0,0,0, 0.2)'
+  };
   `,
 );
diff --git a/docs/data/base/components/tabs/UnstyledTabsCustomized.tsx.preview b/docs/data/base/components/tabs/UnstyledTabsCustomized/system/index.tsx.preview
similarity index 100%
rename from docs/data/base/components/tabs/UnstyledTabsCustomized.tsx.preview
rename to docs/data/base/components/tabs/UnstyledTabsCustomized/system/index.tsx.preview
diff --git a/docs/data/base/components/tabs/UnstyledTabsCustomized/tailwind/index.js b/docs/data/base/components/tabs/UnstyledTabsCustomized/tailwind/index.js
new file mode 100644
index 00000000000000..8225fc8abf7eef
--- /dev/null
+++ b/docs/data/base/components/tabs/UnstyledTabsCustomized/tailwind/index.js
@@ -0,0 +1,71 @@
+import * as React from 'react';
+import Tabs from '@mui/base/Tabs';
+import TabsList from '@mui/base/TabsList';
+import TabPanel from '@mui/base/TabPanel';
+import Tab from '@mui/base/Tab';
+
+export default function UnstyledTabsCustomized() {
+  return (
+    <Tabs defaultValue={1}>
+      <TabsList className="mb-4 rounded-xl bg-purple-500 flex items-center justify-center content-between min-w-tabs-list shadow-lg">
+        <Tab
+          slotProps={{
+            root: ({ selected, disabled }) => ({
+              className: `${
+                selected
+                  ? 'text-purple-500 bg-white'
+                  : 'text-white bg-transparent focus:text-white hover:bg-purple-400'
+              } ${
+                disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'
+              } text-sm font-bold w-full p-2 m-1.5 border-0 rounded-lg flex justify-center focus:outline-0 focus:shadow-outline-purple-light`,
+            }),
+          }}
+          value={1}
+        >
+          One
+        </Tab>
+        <Tab
+          slotProps={{
+            root: ({ selected, disabled }) => ({
+              className: `${
+                selected
+                  ? 'text-purple-500 bg-white'
+                  : 'text-white bg-transparent focus:text-white hover:bg-purple-400'
+              } ${
+                disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'
+              } text-sm font-bold w-full p-2 m-1.5 border-0 rounded-md flex justify-center focus:outline-0 focus:shadow-outline-purple-light`,
+            }),
+          }}
+          value={2}
+        >
+          Two
+        </Tab>
+        <Tab
+          slotProps={{
+            root: ({ selected, disabled }) => ({
+              className: `${
+                selected
+                  ? 'text-purple-500 bg-white'
+                  : 'text-white bg-transparent focus:text-white hover:bg-purple-400'
+              } ${
+                disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'
+              } text-sm font-bold w-full p-2 m-1.5 border-0 rounded-md flex justify-center focus:outline-0 focus:shadow-outline-purple-light`,
+            }),
+          }}
+          value={3}
+        >
+          Three
+        </Tab>
+      </TabsList>
+      <TabPanel className="w-full text-sm" value={1}>
+        First page
+      </TabPanel>
+      <TabPanel className="w-full text-sm" value={2}>
+        Second page
+      </TabPanel>
+      <TabPanel className="w-full text-sm" value={3}>
+        Third page
+      </TabPanel>
+    </Tabs>
+  );
+}
diff --git a/docs/data/base/components/tabs/UnstyledTabsCustomized/tailwind/index.tsx b/docs/data/base/components/tabs/UnstyledTabsCustomized/tailwind/index.tsx
new file mode 100644
index 00000000000000..8225fc8abf7eef
--- /dev/null
+++ b/docs/data/base/components/tabs/UnstyledTabsCustomized/tailwind/index.tsx
@@ -0,0 +1,71 @@
+import * as React from 'react';
+import Tabs from '@mui/base/Tabs';
+import TabsList from '@mui/base/TabsList';
+import TabPanel from '@mui/base/TabPanel';
+import Tab from '@mui/base/Tab';
+
+export default function UnstyledTabsCustomized() {
+  return (
+    <Tabs defaultValue={1}>
+      <TabsList className="mb-4 rounded-xl bg-purple-500 flex items-center justify-center content-between min-w-tabs-list shadow-lg">
+        <Tab
+          slotProps={{
+            root: ({ selected, disabled }) => ({
+              className: `${
+                selected
+                  ? 'text-purple-500 bg-white'
+                  : 'text-white bg-transparent focus:text-white hover:bg-purple-400'
+              } ${
+                disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'
+              } text-sm font-bold w-full p-2 m-1.5 border-0 rounded-lg flex justify-center focus:outline-0 focus:shadow-outline-purple-light`,
+            }),
+          }}
+          value={1}
+        >
+          One
+        </Tab>
+        <Tab
+          slotProps={{
+            root: ({ selected, disabled }) => ({
+              className: `${
+                selected
+                  ? 'text-purple-500 bg-white'
+                  : 'text-white bg-transparent focus:text-white hover:bg-purple-400'
+              } ${
+                disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'
+              } text-sm font-bold w-full p-2 m-1.5 border-0 rounded-md flex justify-center focus:outline-0 focus:shadow-outline-purple-light`,
+            }),
+          }}
+          value={2}
+        >
+          Two
+        </Tab>
+        <Tab
+          slotProps={{
+            root: ({ selected, disabled }) => ({
+              className: `${
+                selected
+                  ? 'text-purple-500 bg-white'
+                  : 'text-white bg-transparent focus:text-white hover:bg-purple-400'
+              } ${
+                disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'
+              } text-sm font-bold w-full p-2 m-1.5 border-0 rounded-md flex justify-center focus:outline-0 focus:shadow-outline-purple-light`,
+            }),
+          }}
+          value={3}
+        >
+          Three
+        </Tab>
+      </TabsList>
+      <TabPanel className="w-full text-sm" value={1}>
+        First page
+      </TabPanel>
+      <TabPanel className="w-full text-sm" value={2}>
+        Second page
+      </TabPanel>
+      <TabPanel className="w-full text-sm" value={3}>
+        Third page
+      </TabPanel>
+    </Tabs>
+  );
+}
diff --git a/docs/data/base/components/tabs/tabs.md b/docs/data/base/components/tabs/tabs.md
index 00015eaa339be5..33c4d498852975 100644
--- a/docs/data/base/components/tabs/tabs.md
+++ b/docs/data/base/components/tabs/tabs.md
@@ -65,7 +65,7 @@ The following demo omits the `value` prop from the Tab components, and also defi
 
 The next demo shows how to apply custom styles to a set of tabs:
 
-{{"demo": "UnstyledTabsCustomized.js"}}
+{{"demo": "UnstyledTabsCustomized"}}
 
 ### Anatomy
 
diff --git a/docs/data/base/components/textarea-autosize/UnstyledTextarea/css/index.js b/docs/data/base/components/textarea-autosize/UnstyledTextarea/css/index.js
new file mode 100644
index 00000000000000..ed76607a455f89
--- /dev/null
+++ b/docs/data/base/components/textarea-autosize/UnstyledTextarea/css/index.js
@@ -0,0 +1,86 @@
+import * as React from 'react';
+import TextareaAutosize from '@mui/base/TextareaAutosize';
+import { useTheme } from '@mui/system';
+
+export default function UnstyledTextareaAutosize() {
+  return (
+    <React.Fragment>
+      <TextareaAutosize
+        className="CustomTextarea"
+        aria-label="empty textarea"
+        placeholder="Empty"
+      />
+      <Styles />
+    </React.Fragment>
+  );
+}
+const cyan = {
+  50: '#E9F8FC',
+  100: '#BDEBF4',
+  200: '#99D8E5',
+  300: '#66BACC',
+  400: '#1F94AD',
+  500: '#0D5463',
+  600: '#094855',
+  700: '#063C47',
+  800: '#043039',
+  900: '#022127',
+};
+
+const grey = {
+  50: '#f6f8fa',
+  100: '#eaeef2',
+  200: '#d0d7de',
+  300: '#afb8c1',
+  400: '#8c959f',
+  500: '#6e7781',
+  600: '#57606a',
+  700: '#424a53',
+  800: '#32383f',
+  900: '#24292f',
+};
+
+function useIsDarkMode() {
+  const theme = useTheme();
+  return theme.palette.mode === 'dark';
+}
+
+function Styles() {
+  // Replace this with your app logic for determining dark mode
+  const isDarkMode = useIsDarkMode();
+
+  return (
+    <style>
+      {`
+      .CustomTextarea {
+        width: 320px;
+        font-family: IBM Plex Sans, sans-serif;
+        font-size: 0.875rem;
+        font-weight: 400;
+        line-height: 1.5;
+        padding: 12px;
+        border-radius: 12px 12px 0 12px;
+        color: ${isDarkMode ? grey[300] : grey[900]};
+        background: ${isDarkMode ? grey[900] : '#fff'};
+        border: 1px solid ${isDarkMode ? grey[700] : grey[200]};
+        box-shadow: 0px 2px 2px ${isDarkMode ? grey[900] : grey[50]};
+      }
+
+     .CustomTextarea:hover {
+        border-color: ${cyan[400]};
+      }
+
+     .CustomTextarea:focus {
+        border-color: ${cyan[400]};
+        box-shadow: 0 0 0 3px ${isDarkMode ? cyan[500] : cyan[200]};
+        outline: none;
+      }
+      
+      // firefox
+      .CustomTextarea:focus-visible {
+      outline: 0;
+      }
+    `}
+    </style>
+  );
+}
diff --git a/docs/data/base/components/textarea-autosize/UnstyledTextarea/css/index.tsx b/docs/data/base/components/textarea-autosize/UnstyledTextarea/css/index.tsx
new file mode 100644
index 00000000000000..ed76607a455f89
--- /dev/null
+++ b/docs/data/base/components/textarea-autosize/UnstyledTextarea/css/index.tsx
@@ -0,0 +1,86 @@
+import * as React from 'react';
+import TextareaAutosize from '@mui/base/TextareaAutosize';
+import { useTheme } from '@mui/system';
+
+export default function UnstyledTextareaAutosize() {
+  return (
+    <React.Fragment>
+      <TextareaAutosize
+        className="CustomTextarea"
+        aria-label="empty textarea"
+        placeholder="Empty"
+      />
+      <Styles />
+    </React.Fragment>
+  );
+}
+const cyan = {
+  50: '#E9F8FC',
+  100: '#BDEBF4',
+  200: '#99D8E5',
+  300: '#66BACC',
+  400: '#1F94AD',
+  500: '#0D5463',
+  600: '#094855',
+  700: '#063C47',
+  800: '#043039',
+  900: '#022127',
+};
+
+const grey = {
+  50: '#f6f8fa',
+  100: '#eaeef2',
+  200: '#d0d7de',
+  300: '#afb8c1',
+  400: '#8c959f',
+  500: '#6e7781',
+  600: '#57606a',
+  700: '#424a53',
+  800: '#32383f',
+  900: '#24292f',
+};
+
+function useIsDarkMode() {
+  const theme = useTheme();
+  return theme.palette.mode === 'dark';
+}
+
+function Styles() {
+  // Replace this with your app logic for determining dark mode
+  const isDarkMode = useIsDarkMode();
+
+  return (
+    <style>
+      {`
+      .CustomTextarea {
+        width: 320px;
+        font-family: IBM Plex Sans, sans-serif;
+        font-size: 0.875rem;
+        font-weight: 400;
+        line-height: 1.5;
+        padding: 12px;
+        border-radius: 12px 12px 0 12px;
+        color: ${isDarkMode ? grey[300] : grey[900]};
+        background: ${isDarkMode ? grey[900] : '#fff'};
+        border: 1px solid ${isDarkMode ? grey[700] : grey[200]};
+        box-shadow: 0px 2px 2px ${isDarkMode ? grey[900] : grey[50]};
+      }
+
+     .CustomTextarea:hover {
+        border-color: ${cyan[400]};
+      }
+
+     .CustomTextarea:focus {
+        border-color: ${cyan[400]};
+        box-shadow: 0 0 0 3px ${isDarkMode ? cyan[500] : cyan[200]};
+        outline: none;
+      }
+      
+      // firefox
+      .CustomTextarea:focus-visible {
+      outline: 0;
+      }
+    `}
+    </style>
+  );
+}
diff --git a/docs/data/base/components/textarea-autosize/UnstyledTextarea/css/index.tsx.preview b/docs/data/base/components/textarea-autosize/UnstyledTextarea/css/index.tsx.preview
new file mode 100644
index 00000000000000..d95c94780134f6
--- /dev/null
+++ b/docs/data/base/components/textarea-autosize/UnstyledTextarea/css/index.tsx.preview
@@ -0,0 +1,8 @@
+<React.Fragment>
+  <TextareaAutosize
+    className="CustomTextarea"
+    aria-label="empty textarea"
+    placeholder="Empty"
+  />
+  <Styles />
+</React.Fragment>
\ No newline at end of file
diff --git a/docs/data/base/components/textarea-autosize/UnstyledTextarea/system/index.js b/docs/data/base/components/textarea-autosize/UnstyledTextarea/system/index.js
new file mode 100644
index 00000000000000..0f129b66d3bec0
--- /dev/null
+++ b/docs/data/base/components/textarea-autosize/UnstyledTextarea/system/index.js
@@ -0,0 +1,59 @@
+import * as React from 'react';
+import TextareaAutosize from '@mui/base/TextareaAutosize';
+import { styled } from '@mui/system';
+
+export default function EmptyTextarea() {
+  const blue = {
+    100: '#DAECFF',
+    200: '#b6daff',
+    400: '#3399FF',
+    500: '#007FFF',
+    600: '#0072E5',
+    900: '#003A75',
+  };
+
+  const grey = {
+    50: '#f6f8fa',
+    100: '#eaeef2',
+    200: '#d0d7de',
+    300: '#afb8c1',
+    400: '#8c959f',
+    500: '#6e7781',
+    600: '#57606a',
+    700: '#424a53',
+    800: '#32383f',
+    900: '#24292f',
+  };
+
+  const StyledTextarea = styled(TextareaAutosize)(
+    ({ theme }) => `
+    width: 320px;
+    font-family: IBM Plex Sans, sans-serif;
+    font-size: 0.875rem;
+    font-weight: 400;
+    line-height: 1.5;
+    padding: 12px;
+    border-radius: 12px 12px 0 12px;
+    color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
+    background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
+    border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
+    box-shadow: 0px 2px 2px ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
+  
+    &:hover {
+      border-color: ${blue[400]};
+    }
+  
+    &:focus {
+      border-color: ${blue[400]};
+      box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
+    }
+  
+    // firefox
+    &:focus-visible {
+      outline: 0;
+    }
+  `,
+  );
+
+  return <StyledTextarea aria-label="empty textarea" placeholder="Empty" />;
+}
diff --git a/docs/data/base/components/textarea-autosize/UnstyledTextarea/system/index.tsx b/docs/data/base/components/textarea-autosize/UnstyledTextarea/system/index.tsx
new file mode 100644
index 00000000000000..0f129b66d3bec0
--- /dev/null
+++ b/docs/data/base/components/textarea-autosize/UnstyledTextarea/system/index.tsx
@@ -0,0 +1,59 @@
+import * as React from 'react';
+import TextareaAutosize from '@mui/base/TextareaAutosize';
+import { styled } from '@mui/system';
+
+export default function EmptyTextarea() {
+  const blue = {
+    100: '#DAECFF',
+    200: '#b6daff',
+    400: '#3399FF',
+    500: '#007FFF',
+    600: '#0072E5',
+    900: '#003A75',
+  };
+
+  const grey = {
+    50: '#f6f8fa',
+    100: '#eaeef2',
+    200: '#d0d7de',
+    300: '#afb8c1',
+    400: '#8c959f',
+    500: '#6e7781',
+    600: '#57606a',
+    700: '#424a53',
+    800: '#32383f',
+    900: '#24292f',
+  };
+
+  const StyledTextarea = styled(TextareaAutosize)(
+    ({ theme }) => `
+    width: 320px;
+    font-family: IBM Plex Sans, sans-serif;
+    font-size: 0.875rem;
+    font-weight: 400;
+    line-height: 1.5;
+    padding: 12px;
+    border-radius: 12px 12px 0 12px;
+    color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
+    background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
+    border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
+    box-shadow: 0px 2px 2px ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
+  
+    &:hover {
+      border-color: ${blue[400]};
+    }
+  
+    &:focus {
+      border-color: ${blue[400]};
+      box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
+    }
+  
+    // firefox
+    &:focus-visible {
+      outline: 0;
+    }
+  `,
+  );
+
+  return <StyledTextarea aria-label="empty textarea" placeholder="Empty" />;
+}
diff --git a/docs/data/base/components/textarea-autosize/UnstyledTextarea/system/index.tsx.preview b/docs/data/base/components/textarea-autosize/UnstyledTextarea/system/index.tsx.preview
new file mode 100644
index 00000000000000..eda12bcc18a053
--- /dev/null
+++ b/docs/data/base/components/textarea-autosize/UnstyledTextarea/system/index.tsx.preview
@@ -0,0 +1 @@
+<StyledTextarea aria-label="empty textarea" placeholder="Empty" />
\ No newline at end of file
diff --git a/docs/data/base/components/textarea-autosize/UnstyledTextarea/tailwind/index.js b/docs/data/base/components/textarea-autosize/UnstyledTextarea/tailwind/index.js
new file mode 100644
index 00000000000000..b8c3086e530359
--- /dev/null
+++ b/docs/data/base/components/textarea-autosize/UnstyledTextarea/tailwind/index.js
@@ -0,0 +1,23 @@
+import * as React from 'react';
+import TextareaAutosize from '@mui/base/TextareaAutosize';
+import { useTheme } from '@mui/system';
+
+function useIsDarkMode() {
+  const theme = useTheme();
+  return theme.palette.mode === 'dark';
+}
+
+export default function UnstyledTextareaAutosize() {
+  // Replace this with your app logic for determining dark modes
+  const isDarkMode = useIsDarkMode();
+
+  return (
+    <div className={isDarkMode ? 'dark' : ''}>
+      <TextareaAutosize
+        className="w-80 text-sm font-normal font-sans leading-5 p-3 rounded-xl rounded-br-none shadow-md shadow-slate-100 dark:shadow-slate-900 focus:shadow-outline-purple dark:focus:shadow-outline-purple focus:shadow-lg border border-solid border-slate-300 hover:border-purple-500 dark:hover:border-purple-500 focus:border-purple-500 dark:focus:border-purple-500 dark:border-slate-600 bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-300 focus-visible:outline-0"
+        aria-label="Demo input"
+        placeholder="Empty"
+      />
+    </div>
+  );
+}
diff --git a/docs/data/base/components/textarea-autosize/UnstyledTextarea/tailwind/index.tsx b/docs/data/base/components/textarea-autosize/UnstyledTextarea/tailwind/index.tsx
new file mode 100644
index 00000000000000..b8c3086e530359
--- /dev/null
+++ b/docs/data/base/components/textarea-autosize/UnstyledTextarea/tailwind/index.tsx
@@ -0,0 +1,23 @@
+import * as React from 'react';
+import TextareaAutosize from '@mui/base/TextareaAutosize';
+import { useTheme } from '@mui/system';
+
+function useIsDarkMode() {
+  const theme = useTheme();
+  return theme.palette.mode === 'dark';
+}
+
+export default function UnstyledTextareaAutosize() {
+  // Replace this with your app logic for determining dark modes
+  const isDarkMode = useIsDarkMode();
+
+  return (
+    <div className={isDarkMode ? 'dark' : ''}>
+      <TextareaAutosize
+        className="w-80 text-sm font-normal font-sans leading-5 p-3 rounded-xl rounded-br-none shadow-md shadow-slate-100 dark:shadow-slate-900 focus:shadow-outline-purple dark:focus:shadow-outline-purple focus:shadow-lg border border-solid border-slate-300 hover:border-purple-500 dark:hover:border-purple-500 focus:border-purple-500 dark:focus:border-purple-500 dark:border-slate-600 bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-300 focus-visible:outline-0"
+        aria-label="Demo input"
+        placeholder="Empty"
+      />
+    </div>
+  );
+}
diff --git a/docs/data/base/components/textarea-autosize/UnstyledTextarea/tailwind/index.tsx.preview b/docs/data/base/components/textarea-autosize/UnstyledTextarea/tailwind/index.tsx.preview
new file mode 100644
index 00000000000000..f9fe223952f199
--- /dev/null
+++ b/docs/data/base/components/textarea-autosize/UnstyledTextarea/tailwind/index.tsx.preview
@@ -0,0 +1,5 @@
+<TextareaAutosize
+  className="w-80 text-sm font-normal font-sans leading-5 p-3 rounded-xl rounded-br-none shadow-md shadow-slate-100 dark:shadow-slate-900 focus:shadow-outline-purple dark:focus:shadow-outline-purple focus:shadow-lg border border-solid border-slate-300 hover:border-purple-500 dark:hover:border-purple-500 focus:border-purple-500 dark:focus:border-purple-500 dark:border-slate-600 bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-300 focus-visible:outline-0"
+  aria-label="Demo input"
+  placeholder="Empty"
+/>
\ No newline at end of file
diff --git a/docs/data/base/components/textarea-autosize/textarea-autosize.md b/docs/data/base/components/textarea-autosize/textarea-autosize.md
index c79a435b96a314..62b534329fd52c 100644
--- a/docs/data/base/components/textarea-autosize/textarea-autosize.md
+++ b/docs/data/base/components/textarea-autosize/textarea-autosize.md
@@ -41,7 +41,7 @@ Textarea Autosize behaves similarly to the native HTML`<textarea>`.
 
 By default, an empty Textarea Autosize component renders as a single row, as shown in the following demo:
 
-{{"demo": "EmptyTextarea.js"}}
+{{"demo": "UnstyledTextarea", "defaultCodeOpen": false}}
 
 ## Customization
 
diff --git a/docs/data/base/guides/next-js-app-router/next-js-app-router.md b/docs/data/base/guides/next-js-app-router/next-js-app-router.md
index 12ad3bb4790114..de22ccc7e916c7 100644
--- a/docs/data/base/guides/next-js-app-router/next-js-app-router.md
+++ b/docs/data/base/guides/next-js-app-router/next-js-app-router.md
@@ -47,7 +47,7 @@ module.exports = {
 };
 ```
 
-Refer to this [example repo](https://github.com/mui/material-ui/blob/master/examples/base-next-app-router-tailwind-ts) for a full working demo of a Next.js 13 app using Base UI and Tailwind CSS.
+Refer to this [example repo](https://github.com/mui/material-ui/tree/master/examples/base-next-app-router-tailwind-ts) for a full working demo of a Next.js 13 app using Base UI and Tailwind CSS.
 
 ### Emotion
 
diff --git a/docs/data/joy/components/card/CardUsage.js b/docs/data/joy/components/card/CardUsage.js
new file mode 100644
index 00000000000000..08cfb0ee1de3a0
--- /dev/null
+++ b/docs/data/joy/components/card/CardUsage.js
@@ -0,0 +1,68 @@
+import * as React from 'react';
+import AspectRatio from '@mui/joy/AspectRatio';
+import Button from '@mui/joy/Button';
+import Card from '@mui/joy/Card';
+import Typography from '@mui/joy/Typography';
+import JoyUsageDemo from 'docs/src/modules/components/JoyUsageDemo';
+import { CardActions, CardContent } from '@mui/joy';
+
+export default function CardUsage() {
+  return (
+    <JoyUsageDemo
+      componentName="Card"
+      data={[
+        {
+          propName: 'variant',
+          knob: 'select',
+          defaultValue: 'plain',
+          options: ['plain', 'outlined', 'soft', 'solid'],
+        },
+        {
+          propName: 'color',
+          knob: 'color',
+          defaultValue: 'neutral',
+        },
+        {
+          propName: 'size',
+          knob: 'radio',
+          options: ['sm', 'md', 'lg'],
+          defaultValue: 'md',
+        },
+        {
+          propName: 'orientation',
+          knob: 'radio',
+          defaultValue: 'vertical',
+          options: ['vertical', 'horizontal'],
+        },
+        { propName: 'invertedColors', knob: 'switch' },
+      ]}
+      renderDemo={(props) => (
+        <Card
+          {...props}
+          sx={{
+            m: 1,
+            mb: 4,
+          }}
+        >
+          <AspectRatio ratio="16/9" sx={{ width: 160 }}>
+            <img
+              src="https://images.unsplash.com/photo-1527549993586-dff825b37782?auto=format&fit=crop&w=286"
+              srcSet="https://images.unsplash.com/photo-1527549993586-dff825b37782?auto=format&fit=crop&w=286&dpr=2 2x"
+              loading="lazy"
+              alt=""
+            />
+          </AspectRatio>
+          <CardContent>
+            <Typography fontWeight="lg" textColor="inherit">
+              Yosemite
+            </Typography>
+            <Typography level="body2">April 24 to May 02, 2021</Typography>
+            <CardActions>
+              <Button size="sm">Explore</Button>
+            </CardActions>
+          </CardContent>
+        </Card>
+      )}
+    />
+  );
+}
diff --git a/docs/data/joy/components/card/card.md b/docs/data/joy/components/card/card.md
index 2f896d37acea9f..4fbb0010a21091 100644
--- a/docs/data/joy/components/card/card.md
+++ b/docs/data/joy/components/card/card.md
@@ -19,6 +19,8 @@ The Joy UI Card component includes several complementary utility components to h
 - [Card Content](#card-layers): an optional wrapper that brings content to the front (commonly but not always used with the Card Cover).
 - [Card Actions](#actions): an optional wrapper that groups a set of buttons.
 
+{{"demo": "CardUsage.js", "hideToolbar": true, "bg": "gradient"}}
+
 ## Basics
 
 ```jsx
diff --git a/docs/data/joy/components/link/BasicsLink.js b/docs/data/joy/components/link/BasicsLink.js
new file mode 100644
index 00000000000000..ba70b122e07658
--- /dev/null
+++ b/docs/data/joy/components/link/BasicsLink.js
@@ -0,0 +1,14 @@
+import * as React from 'react';
+import Link from '@mui/joy/Link';
+import Box from '@mui/joy/Box';
+
+export default function BasicsLink() {
+  return (
+    <Box sx={{ display: 'flex', gap: 2, flexWrap: 'wrap' }}>
+      <Link href="#basics">Link</Link>
+      <Link href="#basics" disabled>
+        Disabled
+      </Link>
+    </Box>
+  );
+}
diff --git a/docs/data/joy/components/link/BasicsLink.tsx b/docs/data/joy/components/link/BasicsLink.tsx
new file mode 100644
index 00000000000000..ba70b122e07658
--- /dev/null
+++ b/docs/data/joy/components/link/BasicsLink.tsx
@@ -0,0 +1,14 @@
+import * as React from 'react';
+import Link from '@mui/joy/Link';
+import Box from '@mui/joy/Box';
+
+export default function BasicsLink() {
+  return (
+    <Box sx={{ display: 'flex', gap: 2, flexWrap: 'wrap' }}>
+      <Link href="#basics">Link</Link>
+      <Link href="#basics" disabled>
+        Disabled
+      </Link>
+    </Box>
+  );
+}
diff --git a/docs/data/joy/components/link/BasicsLink.tsx.preview b/docs/data/joy/components/link/BasicsLink.tsx.preview
new file mode 100644
index 00000000000000..dca15a6835c120
--- /dev/null
+++ b/docs/data/joy/components/link/BasicsLink.tsx.preview
@@ -0,0 +1,4 @@
+<Link href="#basics">Link</Link>
+<Link href="#basics" disabled>
+  Disabled
+</Link>
\ No newline at end of file
diff --git a/docs/data/joy/components/link/LinkColors.js b/docs/data/joy/components/link/LinkColors.js
new file mode 100644
index 00000000000000..2d4e6a73fd8b01
--- /dev/null
+++ b/docs/data/joy/components/link/LinkColors.js
@@ -0,0 +1,77 @@
+import * as React from 'react';
+import Box from '@mui/joy/Box';
+import Sheet from '@mui/joy/Sheet';
+import Link from '@mui/joy/Link';
+import RadioGroup from '@mui/joy/RadioGroup';
+import Radio from '@mui/joy/Radio';
+import Typography from '@mui/joy/Typography';
+
+export default function LinkColors() {
+  const [variant, setVariant] = React.useState('solid');
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: 3,
+      }}
+    >
+      <Box
+        sx={{
+          display: 'grid',
+          gridTemplateColumns: 'repeat(2, minmax(0, 1fr))',
+          gap: 2,
+        }}
+      >
+        <Link href="#colors" variant={variant} color="primary">
+          Primary
+        </Link>
+        <Link href="#colors" variant={variant} color="neutral">
+          Neutral
+        </Link>
+        <Link href="#colors" variant={variant} color="danger">
+          Danger
+        </Link>
+        <Link href="#colors" variant={variant} color="info">
+          Info
+        </Link>
+        <Link href="#colors" variant={variant} color="success">
+          Success
+        </Link>
+        <Link href="#colors" variant={variant} color="warning">
+          Warning
+        </Link>
+      </Box>
+      <Sheet
+        sx={{
+          background: 'transparent',
+          pl: 4,
+          borderLeft: '1px solid',
+          borderColor: 'divider',
+        }}
+      >
+        <Typography
+          level="body2"
+          fontWeight="xl"
+          id="variant-label"
+          textColor="text.primary"
+          mb={1}
+        >
+          Variant:
+        </Typography>
+        <RadioGroup
+          size="sm"
+          aria-labelledby="variant-label"
+          name="variant"
+          value={variant}
+          onChange={(event) => setVariant(event.target.value)}
+        >
+          <Radio label="Solid" value="solid" />
+          <Radio label="Soft" value="soft" />
+          <Radio label="Outlined" value="outlined" />
+          <Radio label="Plain" value="plain" />
+        </RadioGroup>
+      </Sheet>
+    </Box>
+  );
+}
diff --git a/docs/data/joy/components/link/LinkColors.tsx b/docs/data/joy/components/link/LinkColors.tsx
new file mode 100644
index 00000000000000..19d5979c8d88e5
--- /dev/null
+++ b/docs/data/joy/components/link/LinkColors.tsx
@@ -0,0 +1,78 @@
+import * as React from 'react';
+import Box from '@mui/joy/Box';
+import Sheet from '@mui/joy/Sheet';
+import Link from '@mui/joy/Link';
+import RadioGroup from '@mui/joy/RadioGroup';
+import Radio from '@mui/joy/Radio';
+import Typography from '@mui/joy/Typography';
+import { VariantProp } from '@mui/joy/styles';
+
+export default function LinkColors() {
+  const [variant, setVariant] = React.useState<VariantProp>('solid');
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: 3,
+      }}
+    >
+      <Box
+        sx={{
+          display: 'grid',
+          gridTemplateColumns: 'repeat(2, minmax(0, 1fr))',
+          gap: 2,
+        }}
+      >
+        <Link href="#colors" variant={variant} color="primary">
+          Primary
+        </Link>
+        <Link href="#colors" variant={variant} color="neutral">
+          Neutral
+        </Link>
+        <Link href="#colors" variant={variant} color="danger">
+          Danger
+        </Link>
+        <Link href="#colors" variant={variant} color="info">
+          Info
+        </Link>
+        <Link href="#colors" variant={variant} color="success">
+          Success
+        </Link>
+        <Link href="#colors" variant={variant} color="warning">
+          Warning
+        </Link>
+      </Box>
+      <Sheet
+        sx={{
+          background: 'transparent',
+          pl: 4,
+          borderLeft: '1px solid',
+          borderColor: 'divider',
+        }}
+      >
+        <Typography
+          level="body2"
+          fontWeight="xl"
+          id="variant-label"
+          textColor="text.primary"
+          mb={1}
+        >
+          Variant:
+        </Typography>
+        <RadioGroup
+          size="sm"
+          aria-labelledby="variant-label"
+          name="variant"
+          value={variant}
+          onChange={(event) => setVariant(event.target.value as VariantProp)}
+        >
+          <Radio label="Solid" value="solid" />
+          <Radio label="Soft" value="soft" />
+          <Radio label="Outlined" value="outlined" />
+          <Radio label="Plain" value="plain" />
+        </RadioGroup>
+      </Sheet>
+    </Box>
+  );
+}
diff --git a/docs/data/joy/components/link/LinkDisabled.js b/docs/data/joy/components/link/LinkDisabled.js
new file mode 100644
index 00000000000000..136c8670974fda
--- /dev/null
+++ b/docs/data/joy/components/link/LinkDisabled.js
@@ -0,0 +1,22 @@
+import * as React from 'react';
+import Box from '@mui/joy/Box';
+import Link from '@mui/joy/Link';
+
+export default function LinkDisabled() {
+  return (
+    <Box sx={{ display: 'flex', gap: 2, flexWrap: 'wrap' }}>
+      <Link href="#disabled" disabled variant="solid">
+        Solid
+      </Link>
+      <Link href="#disabled" disabled variant="soft">
+        Soft
+      </Link>
+      <Link href="#disabled" disabled variant="outlined">
+        Outlined
+      </Link>
+      <Link href="#disabled" disabled variant="plain">
+        Plain
+      </Link>
+    </Box>
+  );
+}
diff --git a/docs/data/joy/components/link/LinkDisabled.tsx b/docs/data/joy/components/link/LinkDisabled.tsx
new file mode 100644
index 00000000000000..136c8670974fda
--- /dev/null
+++ b/docs/data/joy/components/link/LinkDisabled.tsx
@@ -0,0 +1,22 @@
+import * as React from 'react';
+import Box from '@mui/joy/Box';
+import Link from '@mui/joy/Link';
+
+export default function LinkDisabled() {
+  return (
+    <Box sx={{ display: 'flex', gap: 2, flexWrap: 'wrap' }}>
+      <Link href="#disabled" disabled variant="solid">
+        Solid
+      </Link>
+      <Link href="#disabled" disabled variant="soft">
+        Soft
+      </Link>
+      <Link href="#disabled" disabled variant="outlined">
+        Outlined
+      </Link>
+      <Link href="#disabled" disabled variant="plain">
+        Plain
+      </Link>
+    </Box>
+  );
+}
diff --git a/docs/data/joy/components/link/LinkDisabled.tsx.preview b/docs/data/joy/components/link/LinkDisabled.tsx.preview
new file mode 100644
index 00000000000000..273040aa46a355
--- /dev/null
+++ b/docs/data/joy/components/link/LinkDisabled.tsx.preview
@@ -0,0 +1,12 @@
+<Link href="#disabled" disabled variant="solid">
+  Solid
+</Link>
+<Link href="#disabled" disabled variant="soft">
+  Soft
+</Link>
+<Link href="#disabled" disabled variant="outlined">
+  Outlined
+</Link>
+<Link href="#disabled" disabled variant="plain">
+  Plain
+</Link>
\ No newline at end of file
diff --git a/docs/data/joy/components/link/LinkLevels.js b/docs/data/joy/components/link/LinkLevels.js
new file mode 100644
index 00000000000000..c31c45e0b291b3
--- /dev/null
+++ b/docs/data/joy/components/link/LinkLevels.js
@@ -0,0 +1,37 @@
+import * as React from 'react';
+import Box from '@mui/joy/Box';
+import Link from '@mui/joy/Link';
+
+export default function LinkLevels() {
+  return (
+    <Box sx={{ display: 'flex', gap: 2, alignItems: 'center', flexWrap: 'wrap' }}>
+      <Link href="#levels" level="h1">
+        H1
+      </Link>
+      <Link href="#levels" level="h2">
+        H2
+      </Link>
+      <Link href="#levels" level="h3">
+        H3
+      </Link>
+      <Link href="#levels" level="h4">
+        H4
+      </Link>
+      <Link href="#levels" level="h5">
+        H5
+      </Link>
+      <Link href="#levels" level="h6">
+        H6
+      </Link>
+      <Link href="#levels" level="body1">
+        Body 1
+      </Link>
+      <Link href="#levels" level="body2">
+        Body 2
+      </Link>
+      <Link href="#levels" level="body3">
+        Body 3
+      </Link>
+    </Box>
+  );
+}
diff --git a/docs/data/joy/components/link/LinkLevels.tsx b/docs/data/joy/components/link/LinkLevels.tsx
new file mode 100644
index 00000000000000..c31c45e0b291b3
--- /dev/null
+++ b/docs/data/joy/components/link/LinkLevels.tsx
@@ -0,0 +1,37 @@
+import * as React from 'react';
+import Box from '@mui/joy/Box';
+import Link from '@mui/joy/Link';
+
+export default function LinkLevels() {
+  return (
+    <Box sx={{ display: 'flex', gap: 2, alignItems: 'center', flexWrap: 'wrap' }}>
+      <Link href="#levels" level="h1">
+        H1
+      </Link>
+      <Link href="#levels" level="h2">
+        H2
+      </Link>
+      <Link href="#levels" level="h3">
+        H3
+      </Link>
+      <Link href="#levels" level="h4">
+        H4
+      </Link>
+      <Link href="#levels" level="h5">
+        H5
+      </Link>
+      <Link href="#levels" level="h6">
+        H6
+      </Link>
+      <Link href="#levels" level="body1">
+        Body 1
+      </Link>
+      <Link href="#levels" level="body2">
+        Body 2
+      </Link>
+      <Link href="#levels" level="body3">
+        Body 3
+      </Link>
+    </Box>
+  );
+}
diff --git a/docs/data/joy/components/link/LinkUnderline.js b/docs/data/joy/components/link/LinkUnderline.js
new file mode 100644
index 00000000000000..b53ac852bd4d5c
--- /dev/null
+++ b/docs/data/joy/components/link/LinkUnderline.js
@@ -0,0 +1,19 @@
+import * as React from 'react';
+import Box from '@mui/joy/Box';
+import Link from '@mui/joy/Link';
+
+export default function LinkUnderline() {
+  return (
+    <Box sx={{ display: 'flex', gap: 2, flexWrap: 'wrap' }}>
+      <Link href="#underline" underline="always">
+        Always
+      </Link>
+      <Link href="#underline" underline="hover">
+        Hover
+      </Link>
+      <Link href="#underline" underline="none">
+        None
+      </Link>
+    </Box>
+  );
+}
diff --git a/docs/data/joy/components/link/LinkUnderline.tsx b/docs/data/joy/components/link/LinkUnderline.tsx
new file mode 100644
index 00000000000000..b53ac852bd4d5c
--- /dev/null
+++ b/docs/data/joy/components/link/LinkUnderline.tsx
@@ -0,0 +1,19 @@
+import * as React from 'react';
+import Box from '@mui/joy/Box';
+import Link from '@mui/joy/Link';
+
+export default function LinkUnderline() {
+  return (
+    <Box sx={{ display: 'flex', gap: 2, flexWrap: 'wrap' }}>
+      <Link href="#underline" underline="always">
+        Always
+      </Link>
+      <Link href="#underline" underline="hover">
+        Hover
+      </Link>
+      <Link href="#underline" underline="none">
+        None
+      </Link>
+    </Box>
+  );
+}
diff --git a/docs/data/joy/components/link/LinkUnderline.tsx.preview b/docs/data/joy/components/link/LinkUnderline.tsx.preview
new file mode 100644
index 00000000000000..01e8b8c99dab8c
--- /dev/null
+++ b/docs/data/joy/components/link/LinkUnderline.tsx.preview
@@ -0,0 +1,9 @@
+<Link href="#underline" underline="always">
+  Always
+</Link>
+<Link href="#underline" underline="hover">
+  Hover
+</Link>
+<Link href="#underline" underline="none">
+  None
+</Link>
\ No newline at end of file
diff --git a/docs/data/joy/components/link/LinkVariants.js b/docs/data/joy/components/link/LinkVariants.js
new file mode 100644
index 00000000000000..025768ad5ffe3a
--- /dev/null
+++ b/docs/data/joy/components/link/LinkVariants.js
@@ -0,0 +1,23 @@
+import * as React from 'react';
+import Link from '@mui/joy/Link';
+import Box from '@mui/joy/Box';
+
+export default function LinkVariants() {
+  return (
+    <Box sx={{ display: 'flex', gap: 3, flexWrap: 'wrap' }}>
+      <Link href="#variants">Link</Link>
+      <Link href="#variants" variant="plain">
+        Link
+      </Link>
+      <Link href="#variants" variant="soft">
+        Link
+      </Link>
+      <Link href="#variants" variant="outlined">
+        Link
+      </Link>
+      <Link href="#variants" variant="solid">
+        Link
+      </Link>
+    </Box>
+  );
+}
diff --git a/docs/data/joy/components/link/LinkVariants.tsx b/docs/data/joy/components/link/LinkVariants.tsx
new file mode 100644
index 00000000000000..025768ad5ffe3a
--- /dev/null
+++ b/docs/data/joy/components/link/LinkVariants.tsx
@@ -0,0 +1,23 @@
+import * as React from 'react';
+import Link from '@mui/joy/Link';
+import Box from '@mui/joy/Box';
+
+export default function LinkVariants() {
+  return (
+    <Box sx={{ display: 'flex', gap: 3, flexWrap: 'wrap' }}>
+      <Link href="#variants">Link</Link>
+      <Link href="#variants" variant="plain">
+        Link
+      </Link>
+      <Link href="#variants" variant="soft">
+        Link
+      </Link>
+      <Link href="#variants" variant="outlined">
+        Link
+      </Link>
+      <Link href="#variants" variant="solid">
+        Link
+      </Link>
+    </Box>
+  );
+}
diff --git a/docs/data/joy/components/link/LinkVariants.tsx.preview b/docs/data/joy/components/link/LinkVariants.tsx.preview
new file mode 100644
index 00000000000000..06f122c763f9f9
--- /dev/null
+++ b/docs/data/joy/components/link/LinkVariants.tsx.preview
@@ -0,0 +1,13 @@
+<Link href="#variants">Link</Link>
+<Link href="#variants" variant="plain">
+  Link
+</Link>
+<Link href="#variants" variant="soft">
+  Link
+</Link>
+<Link href="#variants" variant="outlined">
+  Link
+</Link>
+<Link href="#variants" variant="solid">
+  Link
+</Link>
\ No newline at end of file
diff --git a/docs/data/joy/components/link/link.md b/docs/data/joy/components/link/link.md
index 318ca21f0da70b..cf3122eb9fbd2d 100644
--- a/docs/data/joy/components/link/link.md
+++ b/docs/data/joy/components/link/link.md
@@ -8,36 +8,87 @@ waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/link/
 
 # Link
 
-<p class="description">The <code>Link</code> component allows you to customize anchor tags with theme colors and typography styles.</p>
+<p class="description">The Link component lets you customize anchor tags with theme colors and typography styles.</p>
 
 {{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
 
 ## Introduction
 
-The `Link` component represents the HTML `<a>` element.
-It accepts the same props as the [`Typography`](/joy-ui/react-typography/) component, as well as the system props.
+The Joy UI Link component replaces the native HTML `<a>` element, and accepts the same props as the [Typography](/joy-ui/react-typography/) component, as well as MUI System props.
 
 {{"demo": "LinkUsage.js", "hideToolbar": true, "bg": "gradient"}}
 
-## Component
-
-After [installation](/joy-ui/getting-started/installation/), you can start building with this component using the following basic elements:
+## Basics
 
 ```jsx
 import Link from '@mui/joy/Link';
-
-export default function MyApp() {
-  return <Link>Hello world!</Link>;
-}
 ```
 
+The Joy UI Link behaves similar to the native HTML `<a>`, so it renders with an underline by default and has no background color on hover.
+
+The demo below shows the two basic states available to the Link: default and disabled.
+Don't forget to always assign an `href` value:
+
+{{"demo": "BasicsLink.js"}}
+
+## Customization
+
+### Variants
+
+The Link component supports Joy UI's four global variants: `plain` (default), `soft`, `outlined`, and `solid`.
+
+:::warning
+Although the component is technically set to `plain` by default, it will actually render without any variant if you don't customize it.
+This is so that it adheres to the standard visual design of links on the web (no background color on hover).
+:::
+
+{{"demo": "LinkVariants.js"}}
+
+:::info
+To learn how to add your own variants, check out [Themed components—Extend variants](/joy-ui/customization/themed-components/#extend-variants).
+Note that you lose the global variants when you add custom variants.
+:::
+
+### Levels
+
+The Link component comes with all the Typography levels to choose from.
+
+{{"demo": "LinkLevels.js"}}
+
+### Colors
+
+Every palette included in the theme is available via the `color` prop.
+Play around combining different colors with different variants.
+
+{{"demo": "LinkColors.js"}}
+
+### Underline
+
+Use the `underline` prop to control how the underline behaves on the Link component.
+It comes with three values: `hover`, `always`, and `none`.
+
+{{"demo": "LinkUnderline.js"}}
+
+### Disabled
+
+Use the `disabled` prop to disable interaction and focus:
+
+{{"demo": "LinkDisabled.js"}}
+
+### Overlay prop
+
+Use the `overlay` prop to make an entire component clickable as a link.
+The demo below shows how to use that with the Card component, ensuring proper accessibility.
+
+{{"demo": "LinkCard.js"}}
+
 ### As a button
 
-To use the `Link` as a button, assign the `button` value to the `component` prop.
-It's useful doing it in two main situations:
+To use the Link component as a button, assign the `button` value to the `component` prop.
+This can be useful in two situations:
 
 1. The link doesn't have a meaningful href.
-2. The design looks more a link rather than a button.
+2. The design looks more like a button than a link.
 
 ```js
 <Link
@@ -50,41 +101,16 @@ It's useful doing it in two main situations:
 </Link>
 ```
 
-### With a typography
+### Usage with Typography
 
-`Link` can be used as a child of the [`Typography`](/joy-ui/react-typography/) component.
-In that case, the link component will inherit the typographic level scale from its typography parent, unless a value for the `level` prop is specified.
+The Link component can be used as a child of the [Typography](/joy-ui/react-typography/) component.
+In this situation, the Link will inherit the typographic level scale from its Typography parent, unless you specify a value for the `level` prop on the Link itself.
 
 {{"demo": "LinkAndTypography.js"}}
 
-### With a card
-
-Using the `Link` component as a card title, with the `overlay` prop, ensures proper accessibility when the whole card is clickable.
-
-{{"demo": "LinkCard.js"}}
-
-## Security
-
-When using `target="_blank"` with links, it's [recommended](https://developers.google.com/web/tools/lighthouse/audits/noopener) to always set `rel="noopener"` or `rel="noreferrer"` when linking to a third-party content.
-
-- `rel="noopener"` prevents the new page from being able to access the `window.opener` property and ensures it runs in a separate process.
-  Without this, the target page can potentially redirect your page to a malicious URL.
-- `rel="noreferrer"` has the same effect, but also prevents the _Referer_ header from being sent to a new page.
-  ⚠️ Removing the referrer header will affect analytics.
-
-## Accessibility
-
-Here are a few tips for ensuring an accessible link component, based on [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/link/).
-
-- **Copywriting**: Avoid generic words as call to action, such as "click here" or "go to".
-  Instead, use [descriptive texts](https://developers.google.com/web/tools/lighthouse/audits/descriptive-link-text).
-- **Design:** For a good user experience, links should stand out from the text on the page.
-  Keeping the default `underline="always"` behavior is a safe bet.
-- **Href:** If a link doesn't have a meaningful href, [it should be rendered using a `<button>` element](#as-button).
-
 ## Third-party routing library
 
-Here's how you can use the link component with libraries that also provide their version of it.
+The sections below explain how to integrate the Link component with third-party tools that have their own comparable component.
 
 ### Next.js
 
@@ -112,8 +138,27 @@ import Link from '@mui/joy/Link';
 </Link>;
 ```
 
+## Security
+
+When using `target="_blank"` with links to pages on another site, the [Google Chrome Developers documentation](https://developers.google.com/web/tools/lighthouse/audits/noopener) recommends adding `rel="noopener"` or `rel="noreferrer"` to avoid potential security issues.
+
+- `rel="noopener"` prevents the new page from being able to access the `window.opener` property and ensures it runs in a separate process.
+  Without this, the target page can potentially redirect your page to a malicious URL.
+- `rel="noreferrer"` has the same effect, but also prevents the _Referer_ header from being sent to a new page.
+  Note that removing the referrer header will affect analytics.
+
+## Accessibility
+
+Here are a few tips for ensuring an accessible link component, based on [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/link/).
+
+- **Copywriting:** Avoid generic words as calls to action, such as "click here" or "go to".
+  Instead, use [descriptive text](https://developers.google.com/web/tools/lighthouse/audits/descriptive-link-text) to inform the user about what they'll find when they click the link.
+- **Design:** For a good user experience, links should stand out from the text on the page.
+  Keeping the default `underline="always"` behavior is a safe bet.
+- **Href:** If a link doesn't have a meaningful href, [it should be rendered using a `<button>` element](#as-button).
+
 ## Common examples
 
-Examples showcasing how to compose designs with the `Link` component and others as decorators.
+Examples showcasing how to compose designs with the Link component and others as decorators.
 
 {{"demo": "DecoratorExamples.js"}}
diff --git a/docs/data/joy/components/menu/MenuIconSideNavExample.js b/docs/data/joy/components/menu/MenuIconSideNavExample.js
index 22ed34be4d9086..0139b78dd0b932 100644
--- a/docs/data/joy/components/menu/MenuIconSideNavExample.js
+++ b/docs/data/joy/components/menu/MenuIconSideNavExample.js
@@ -72,7 +72,7 @@ function MenuButton({ children, menu, open, onOpen, onLeaveMenu, label, ...props
         onKeyDown={handleButtonKeyDown}
         sx={{
           bgcolor: open ? 'neutral.plainHoverBg' : undefined,
-          '&.Joy-focusVisible': {
+          '&:focus-visible': {
             bgcolor: 'neutral.plainHoverBg',
           },
         }}
diff --git a/docs/data/joy/components/menu/MenuIconSideNavExample.tsx b/docs/data/joy/components/menu/MenuIconSideNavExample.tsx
index 1eba10aef8a5db..87e428fc223fc0 100644
--- a/docs/data/joy/components/menu/MenuIconSideNavExample.tsx
+++ b/docs/data/joy/components/menu/MenuIconSideNavExample.tsx
@@ -91,7 +91,7 @@ function MenuButton({
         onKeyDown={handleButtonKeyDown}
         sx={{
           bgcolor: open ? 'neutral.plainHoverBg' : undefined,
-          '&.Joy-focusVisible': {
+          '&:focus-visible': {
             bgcolor: 'neutral.plainHoverBg',
           },
         }}
diff --git a/docs/data/joy/components/menu/MenuToolbarExample.js b/docs/data/joy/components/menu/MenuToolbarExample.js
index 409fd237432307..cc093263cbf347 100644
--- a/docs/data/joy/components/menu/MenuToolbarExample.js
+++ b/docs/data/joy/components/menu/MenuToolbarExample.js
@@ -175,7 +175,7 @@ export default function MenuToolbarExample() {
             <Menu
               onClose={(event) => {
                 menus.current[0]?.focus();
-                if (event.relatedTarget !== menus.current[0]) {
+                if (event && event.relatedTarget !== menus.current[0]) {
                   setMenuIndex(null);
                 }
               }}
@@ -223,7 +223,7 @@ export default function MenuToolbarExample() {
             <Menu
               onClose={(event) => {
                 menus.current[1]?.focus();
-                if (event.relatedTarget !== menus.current[1]) {
+                if (event && event.relatedTarget !== menus.current[1]) {
                   setMenuIndex(null);
                 }
               }}
@@ -267,7 +267,7 @@ export default function MenuToolbarExample() {
             <Menu
               onClose={(event) => {
                 menus.current[2]?.focus();
-                if (event.relatedTarget !== menus.current[2]) {
+                if (event && event.relatedTarget !== menus.current[2]) {
                   setMenuIndex(null);
                 }
               }}
diff --git a/docs/data/joy/components/radio-button/radio-button.md b/docs/data/joy/components/radio-button/radio-button.md
index 5171474b79824b..386bf960151997 100644
--- a/docs/data/joy/components/radio-button/radio-button.md
+++ b/docs/data/joy/components/radio-button/radio-button.md
@@ -197,7 +197,7 @@ Visit the [WAI-ARIA documentation](https://www.w3.org/WAI/ARIA/apg/patterns/radi
 The Radio Group component is composed of a root `<div>` element that can wrap multiple Radio components.
 
 ```html
-<div class="JoyRadioGroup-root">
+<div class="MuiRadioGroup-root">
   <!-- Radio components here -->
 </div>
 ```
@@ -205,13 +205,13 @@ The Radio Group component is composed of a root `<div>` element that can wrap mu
 The Radio component is composed of a root `<span>`, with further nested `<span>` elements for the radio button, icon, action (with a nested `<input>`), and its associated `<label>`.
 
 ```html
-  <span class="JoyRadio-root">
-    <span class="JoyRadio-radio">
-      <span class="JoyRadio-icon"></span>
-      <span class="JoyRadio-action">
-        <input class="JoyRadio-input">
+  <span class="MuiRadio-root">
+    <span class="MuiRadio-radio">
+      <span class="MuiRadio-icon"></span>
+      <span class="MuiRadio-action">
+        <input class="MuiRadio-input">
       </span>
     </span>
-    <label class="JoyRadio-label">
+    <label class="MuiRadio-label">
   </span>
 ```
diff --git a/docs/data/joy/components/select/SelectPosition.js b/docs/data/joy/components/select/SelectPosition.js
new file mode 100644
index 00000000000000..b0a9344f2fea65
--- /dev/null
+++ b/docs/data/joy/components/select/SelectPosition.js
@@ -0,0 +1,29 @@
+import * as React from 'react';
+import Select from '@mui/joy/Select';
+import Option from '@mui/joy/Option';
+
+function SelectPosition() {
+  return (
+    <Select
+      placeholder="Select address"
+      sx={{ width: 240 }}
+      slotProps={{
+        listbox: {
+          placement: 'bottom-start',
+        },
+      }}
+    >
+      <Option value="1">
+        Flat 5, 24 Bhlenheiman Avenue, South Kensington, EW13 9SD
+      </Option>
+      <Option value="2">
+        Flat 6, 24 Bhlenheiman Avenue, South Kensington, EW13 9SD
+      </Option>
+      <Option value="3">
+        Flat 6b, 24 Bhlenheiman Avenue, South Kensington, EW13 9SD
+      </Option>
+    </Select>
+  );
+}
+
+export default SelectPosition;
diff --git a/docs/data/joy/components/select/SelectPosition.tsx b/docs/data/joy/components/select/SelectPosition.tsx
new file mode 100644
index 00000000000000..b0a9344f2fea65
--- /dev/null
+++ b/docs/data/joy/components/select/SelectPosition.tsx
@@ -0,0 +1,29 @@
+import * as React from 'react';
+import Select from '@mui/joy/Select';
+import Option from '@mui/joy/Option';
+
+function SelectPosition() {
+  return (
+    <Select
+      placeholder="Select address"
+      sx={{ width: 240 }}
+      slotProps={{
+        listbox: {
+          placement: 'bottom-start',
+        },
+      }}
+    >
+      <Option value="1">
+        Flat 5, 24 Bhlenheiman Avenue, South Kensington, EW13 9SD
+      </Option>
+      <Option value="2">
+        Flat 6, 24 Bhlenheiman Avenue, South Kensington, EW13 9SD
+      </Option>
+      <Option value="3">
+        Flat 6b, 24 Bhlenheiman Avenue, South Kensington, EW13 9SD
+      </Option>
+    </Select>
+  );
+}
+
+export default SelectPosition;
diff --git a/docs/data/joy/components/select/select.md b/docs/data/joy/components/select/select.md
index 0357788d301d04..1dd1507f864721 100644
--- a/docs/data/joy/components/select/select.md
+++ b/docs/data/joy/components/select/select.md
@@ -132,6 +132,12 @@ To control the placement of the listbox, use `placement`:
 
 :::
 
+#### Placement
+
+To align `listbox` position to `Select` while displaying long options, use `slotProps` prop to position listbox slot:
+
+{{"demo": "SelectPosition.js"}}
+
 #### Controlling the open state
 
 You can control the open state of the select with the `listboxOpen` prop. Alternatively, it is also possible to set the initial (uncontrolled) open state of the component with the `defaultListboxOpen` prop.
diff --git a/docs/data/joy/components/skeleton/AnimationSkeleton.js b/docs/data/joy/components/skeleton/AnimationSkeleton.js
index 3b9d946674e6cf..65d033316322a3 100644
--- a/docs/data/joy/components/skeleton/AnimationSkeleton.js
+++ b/docs/data/joy/components/skeleton/AnimationSkeleton.js
@@ -27,7 +27,7 @@ export default function AnimationSkeleton() {
           <Skeleton animation="wave" variant="overlay">
             <img
               alt=""
-              src="https://images.unsplash.com/photo-1686548812883-9d3777f4c137"
+              src="https://images.unsplash.com/photo-1686548812883-9d3777f4c137?h=400&fit=crop&auto=format&dpr=2"
             />
           </Skeleton>
         </AspectRatio>
diff --git a/docs/data/joy/components/skeleton/AnimationSkeleton.tsx b/docs/data/joy/components/skeleton/AnimationSkeleton.tsx
index 3b9d946674e6cf..65d033316322a3 100644
--- a/docs/data/joy/components/skeleton/AnimationSkeleton.tsx
+++ b/docs/data/joy/components/skeleton/AnimationSkeleton.tsx
@@ -27,7 +27,7 @@ export default function AnimationSkeleton() {
           <Skeleton animation="wave" variant="overlay">
             <img
               alt=""
-              src="https://images.unsplash.com/photo-1686548812883-9d3777f4c137"
+              src="https://images.unsplash.com/photo-1686548812883-9d3777f4c137?h=400&fit=crop&auto=format&dpr=2"
             />
           </Skeleton>
         </AspectRatio>
diff --git a/docs/data/joy/components/skeleton/BasicSkeleton.js b/docs/data/joy/components/skeleton/BasicSkeleton.js
index 030293483c96b8..4b4191fe795c9d 100644
--- a/docs/data/joy/components/skeleton/BasicSkeleton.js
+++ b/docs/data/joy/components/skeleton/BasicSkeleton.js
@@ -11,7 +11,7 @@ export default function BasicSkeleton() {
         <Skeleton variant="overlay">
           <img
             alt=""
-            src="https://images.unsplash.com/photo-1686548812883-9d3777f4c137"
+            src="https://images.unsplash.com/photo-1686548812883-9d3777f4c137?h=400&fit=crop&auto=format&dpr=2"
           />
         </Skeleton>
       </AspectRatio>
diff --git a/docs/data/joy/components/skeleton/BasicSkeleton.tsx b/docs/data/joy/components/skeleton/BasicSkeleton.tsx
index 030293483c96b8..4b4191fe795c9d 100644
--- a/docs/data/joy/components/skeleton/BasicSkeleton.tsx
+++ b/docs/data/joy/components/skeleton/BasicSkeleton.tsx
@@ -11,7 +11,7 @@ export default function BasicSkeleton() {
         <Skeleton variant="overlay">
           <img
             alt=""
-            src="https://images.unsplash.com/photo-1686548812883-9d3777f4c137"
+            src="https://images.unsplash.com/photo-1686548812883-9d3777f4c137?h=400&fit=crop&auto=format&dpr=2"
           />
         </Skeleton>
       </AspectRatio>
diff --git a/docs/data/joy/components/skeleton/BasicSkeleton.tsx.preview b/docs/data/joy/components/skeleton/BasicSkeleton.tsx.preview
index 68acee6b1e7edb..b200287923cc3e 100644
--- a/docs/data/joy/components/skeleton/BasicSkeleton.tsx.preview
+++ b/docs/data/joy/components/skeleton/BasicSkeleton.tsx.preview
@@ -3,7 +3,7 @@
     <Skeleton variant="overlay">
       <img
         alt=""
-        src="https://images.unsplash.com/photo-1686548812883-9d3777f4c137"
+        src="https://images.unsplash.com/photo-1686548812883-9d3777f4c137?h=400&fit=crop&auto=format&dpr=2"
       />
     </Skeleton>
   </AspectRatio>
diff --git a/docs/data/joy/components/skeleton/ImageSkeleton.js b/docs/data/joy/components/skeleton/ImageSkeleton.js
index e3274bb469d5b1..a1cddf56203f14 100644
--- a/docs/data/joy/components/skeleton/ImageSkeleton.js
+++ b/docs/data/joy/components/skeleton/ImageSkeleton.js
@@ -15,7 +15,7 @@ export default function ImageSkeleton() {
         <AspectRatio variant="plain" sx={{ width: 300 }}>
           <Skeleton loading={loading}>
             <img
-              src="https://images.unsplash.com/photo-1686548812883-9d3777f4c137"
+              src="https://images.unsplash.com/photo-1686548812883-9d3777f4c137?h=400&fit=crop&auto=format&dpr=2"
               alt=""
             />
           </Skeleton>
diff --git a/docs/data/joy/components/skeleton/ImageSkeleton.tsx b/docs/data/joy/components/skeleton/ImageSkeleton.tsx
index e3274bb469d5b1..a1cddf56203f14 100644
--- a/docs/data/joy/components/skeleton/ImageSkeleton.tsx
+++ b/docs/data/joy/components/skeleton/ImageSkeleton.tsx
@@ -15,7 +15,7 @@ export default function ImageSkeleton() {
         <AspectRatio variant="plain" sx={{ width: 300 }}>
           <Skeleton loading={loading}>
             <img
-              src="https://images.unsplash.com/photo-1686548812883-9d3777f4c137"
+              src="https://images.unsplash.com/photo-1686548812883-9d3777f4c137?h=400&fit=crop&auto=format&dpr=2"
               alt=""
             />
           </Skeleton>
diff --git a/docs/data/joy/components/skeleton/LoadingSkeleton.js b/docs/data/joy/components/skeleton/LoadingSkeleton.js
index 3db95dd597048c..757e01928db9e3 100644
--- a/docs/data/joy/components/skeleton/LoadingSkeleton.js
+++ b/docs/data/joy/components/skeleton/LoadingSkeleton.js
@@ -15,7 +15,7 @@ export default function LoadingSkeleton() {
           <Skeleton loading={loading} variant="overlay">
             <img
               alt=""
-              src="https://images.unsplash.com/photo-1686548812883-9d3777f4c137"
+              src="https://images.unsplash.com/photo-1686548812883-9d3777f4c137?h=400&fit=crop&auto=format&dpr=2"
             />
           </Skeleton>
         </AspectRatio>
diff --git a/docs/data/joy/components/skeleton/LoadingSkeleton.tsx b/docs/data/joy/components/skeleton/LoadingSkeleton.tsx
index 3db95dd597048c..757e01928db9e3 100644
--- a/docs/data/joy/components/skeleton/LoadingSkeleton.tsx
+++ b/docs/data/joy/components/skeleton/LoadingSkeleton.tsx
@@ -15,7 +15,7 @@ export default function LoadingSkeleton() {
           <Skeleton loading={loading} variant="overlay">
             <img
               alt=""
-              src="https://images.unsplash.com/photo-1686548812883-9d3777f4c137"
+              src="https://images.unsplash.com/photo-1686548812883-9d3777f4c137?h=400&fit=crop&auto=format&dpr=2"
             />
           </Skeleton>
         </AspectRatio>
diff --git a/docs/data/joy/getting-started/templates/framesx-web-blocks/theme.tsx b/docs/data/joy/getting-started/templates/framesx-web-blocks/theme.tsx
index e48a07513b0495..65620112c00533 100644
--- a/docs/data/joy/getting-started/templates/framesx-web-blocks/theme.tsx
+++ b/docs/data/joy/getting-started/templates/framesx-web-blocks/theme.tsx
@@ -1,4 +1,5 @@
 import { extendTheme } from '@mui/joy/styles';
+import { inputClasses } from '@mui/joy/Input';
 
 export default extendTheme({
   colorSchemes: {
@@ -56,7 +57,7 @@ export default extendTheme({
         root: ({ ownerState, theme }) => ({
           ...(ownerState.variant === 'outlined' &&
             ownerState.color !== 'context' && {
-              '&:not(.Joy-focused):hover::before': {
+              [`&:not(.${inputClasses.focused}):hover::before`]: {
                 boxShadow: `inset 0 0 0 2px ${
                   theme.vars.palette?.[ownerState.color!]?.outlinedBorder
                 }`,
diff --git a/docs/data/joy/getting-started/templates/messages/components/ChatsPane.tsx b/docs/data/joy/getting-started/templates/messages/components/ChatsPane.tsx
index 9abc79e3b4c9d8..e25f471f5af611 100644
--- a/docs/data/joy/getting-started/templates/messages/components/ChatsPane.tsx
+++ b/docs/data/joy/getting-started/templates/messages/components/ChatsPane.tsx
@@ -31,6 +31,7 @@ export default function ChatsPane({
       <Stack direction="row" spacing={1} alignItems="center" p={2} pb={1.5}>
         <Typography
           fontSize={{ xs: 'md', md: 'lg' }}
+          component="h1"
           fontWeight="lg"
           endDecorator={
             <Chip
diff --git a/docs/data/joy/getting-started/templates/messages/components/MessagesPaneHeader.tsx b/docs/data/joy/getting-started/templates/messages/components/MessagesPaneHeader.tsx
index 2de47ccac137d6..660e2436f8d582 100644
--- a/docs/data/joy/getting-started/templates/messages/components/MessagesPaneHeader.tsx
+++ b/docs/data/joy/getting-started/templates/messages/components/MessagesPaneHeader.tsx
@@ -38,11 +38,11 @@ export default function MessagesPaneHeader({ sender }: MessagesPaneHeaderProps)
           <i data-feather="chevron-left" />
         </IconButton>
         <Avatar size="lg" src={sender.avatar} />
-
         <div>
           <Typography
             fontWeight="lg"
             fontSize="lg"
+            component="h2"
             noWrap
             endDecorator={
               sender.online ? (
@@ -65,7 +65,6 @@ export default function MessagesPaneHeader({ sender }: MessagesPaneHeaderProps)
           >
             {sender.name}
           </Typography>
-
           <Typography level="body2">{sender.username}</Typography>
         </div>
       </Stack>
diff --git a/docs/data/material/components/buttons/buttons-pt.md b/docs/data/material/components/buttons/buttons-pt.md
index 1bf9e77833d6c1..cfe86949e4f188 100644
--- a/docs/data/material/components/buttons/buttons-pt.md
+++ b/docs/data/material/components/buttons/buttons-pt.md
@@ -71,7 +71,7 @@ Note that the documentation [avoids](/material-ui/guides/api/#native-properties)
 
 {{"demo": "ColorButtons.js"}}
 
-Além de usar as cores de botão padrão, você pode adicionar outras personalizadas ou desativar as que não forem necessárias. See the [Adding new colors](/material-ui/customization/palette/#adding-new-colors) example for more info.
+Além de usar as cores de botão padrão, você pode adicionar outras personalizadas ou desativar as que não forem necessárias. See the [Adding new colors](/material-ui/customization/palette/#custom-colors) examples for more info.
 
 ## Tamanhos
 
diff --git a/docs/data/material/components/buttons/buttons-zh.md b/docs/data/material/components/buttons/buttons-zh.md
index 9c791c4f35ebef..d1be12723fb819 100644
--- a/docs/data/material/components/buttons/buttons-zh.md
+++ b/docs/data/material/components/buttons/buttons-zh.md
@@ -71,7 +71,7 @@ Note that the documentation [avoids](/material-ui/guides/api/#native-properties)
 
 {{"demo": "ColorButtons.js"}}
 
-除了使用默认按钮颜色外，您可以添加自定义颜色，或者禁用任何您不需要的颜色。 See the [Adding new colors](/material-ui/customization/palette/#adding-new-colors) example for more info.
+除了使用默认按钮颜色外，您可以添加自定义颜色，或者禁用任何您不需要的颜色。 See the [Adding new colors](/material-ui/customization/palette/#custom-colors) examples for more info.
 
 ## 尺寸
 
diff --git a/docs/data/material/components/buttons/buttons.md b/docs/data/material/components/buttons/buttons.md
index c36ddf70130bed..8778a86eba2e40 100644
--- a/docs/data/material/components/buttons/buttons.md
+++ b/docs/data/material/components/buttons/buttons.md
@@ -77,7 +77,7 @@ Note that the documentation [avoids](/material-ui/guides/api/#native-properties)
 
 {{"demo": "ColorButtons.js"}}
 
-In addition to using the default button colors, you can add custom ones, or disable any you don't need. See the [Adding new colors](/material-ui/customization/palette/#adding-new-colors) example for more info.
+In addition to using the default button colors, you can add custom ones, or disable any you don't need. See the [Adding new colors](/material-ui/customization/palette/#custom-colors) examples for more info.
 
 ## Sizes
 
diff --git a/docs/data/material/customization/palette/AddingColorTokens.js b/docs/data/material/customization/palette/AddingColorTokens.js
new file mode 100644
index 00000000000000..377aee03030ac0
--- /dev/null
+++ b/docs/data/material/customization/palette/AddingColorTokens.js
@@ -0,0 +1,41 @@
+import * as React from 'react';
+import { createTheme, ThemeProvider } from '@mui/material/styles';
+import { blue } from '@mui/material/colors';
+import { Box, Stack } from '@mui/system';
+import { Typography } from '@mui/material';
+
+const theme = createTheme({
+  palette: {
+    primary: {
+      light: blue[300],
+      main: blue[500],
+      dark: blue[700],
+      darker: blue[900],
+    },
+  },
+});
+
+export default function AddingColorTokens() {
+  return (
+    <ThemeProvider theme={theme}>
+      <Stack direction="row" gap={1}>
+        <Stack alignItems="center">
+          <Typography variant="body2">light</Typography>
+          <Box sx={{ bgcolor: `primary.light`, width: 40, height: 20 }} />
+        </Stack>
+        <Stack alignItems="center">
+          <Typography variant="body2">main</Typography>
+          <Box sx={{ bgcolor: `primary.main`, width: 40, height: 20 }} />
+        </Stack>
+        <Stack alignItems="center">
+          <Typography variant="body2">dark</Typography>
+          <Box sx={{ bgcolor: `primary.dark`, width: 40, height: 20 }} />
+        </Stack>
+        <Stack alignItems="center">
+          <Typography variant="body2">darker</Typography>
+          <Box sx={{ bgcolor: `primary.darker`, width: 40, height: 20 }} />
+        </Stack>
+      </Stack>
+    </ThemeProvider>
+  );
+}
diff --git a/docs/data/material/customization/palette/AddingColorTokens.tsx b/docs/data/material/customization/palette/AddingColorTokens.tsx
new file mode 100644
index 00000000000000..b9affe98f26dbc
--- /dev/null
+++ b/docs/data/material/customization/palette/AddingColorTokens.tsx
@@ -0,0 +1,51 @@
+import * as React from 'react';
+import { createTheme, ThemeProvider } from '@mui/material/styles';
+import { blue } from '@mui/material/colors';
+import { Box, Stack } from '@mui/system';
+import { Typography } from '@mui/material';
+
+declare module '@mui/material/styles' {
+  interface PaletteColor {
+    darker?: string;
+  }
+
+  interface SimplePaletteColorOptions {
+    darker?: string;
+  }
+}
+
+const theme = createTheme({
+  palette: {
+    primary: {
+      light: blue[300],
+      main: blue[500],
+      dark: blue[700],
+      darker: blue[900],
+    },
+  },
+});
+
+export default function AddingColorTokens() {
+  return (
+    <ThemeProvider theme={theme}>
+      <Stack direction="row" gap={1}>
+        <Stack alignItems="center">
+          <Typography variant="body2">light</Typography>
+          <Box sx={{ bgcolor: `primary.light`, width: 40, height: 20 }} />
+        </Stack>
+        <Stack alignItems="center">
+          <Typography variant="body2">main</Typography>
+          <Box sx={{ bgcolor: `primary.main`, width: 40, height: 20 }} />
+        </Stack>
+        <Stack alignItems="center">
+          <Typography variant="body2">dark</Typography>
+          <Box sx={{ bgcolor: `primary.dark`, width: 40, height: 20 }} />
+        </Stack>
+        <Stack alignItems="center">
+          <Typography variant="body2">darker</Typography>
+          <Box sx={{ bgcolor: `primary.darker`, width: 40, height: 20 }} />
+        </Stack>
+      </Stack>
+    </ThemeProvider>
+  );
+}
diff --git a/docs/data/material/customization/palette/AddingColorTokens.tsx.preview b/docs/data/material/customization/palette/AddingColorTokens.tsx.preview
new file mode 100644
index 00000000000000..186550fa9a4c2a
--- /dev/null
+++ b/docs/data/material/customization/palette/AddingColorTokens.tsx.preview
@@ -0,0 +1,13 @@
+import { createTheme } from '@mui/material/styles';
+import { blue } from '@mui/material/colors';
+
+const theme = createTheme({
+  palette: {
+    primary: {
+      light: blue[300],
+      main: blue[500],
+      dark: blue[700],
+      darker: blue[900],
+    },
+  },
+});
diff --git a/docs/data/material/customization/palette/ContrastThreshold.js b/docs/data/material/customization/palette/ContrastThreshold.js
new file mode 100644
index 00000000000000..cee02740f6a821
--- /dev/null
+++ b/docs/data/material/customization/palette/ContrastThreshold.js
@@ -0,0 +1,43 @@
+import * as React from 'react';
+import { createTheme, ThemeProvider, useTheme } from '@mui/material/styles';
+import Button from '@mui/material/Button';
+import { Stack } from '@mui/system';
+
+const defaultContrastThresholdTheme = createTheme({});
+
+const highContrastThresholdTheme = createTheme({
+  palette: {
+    contrastThreshold: 4.5,
+  },
+});
+
+function ContrastShowcase({ title }) {
+  const theme = useTheme();
+
+  return (
+    <Stack gap={1} alignItems="center">
+      <span>
+        <b>{title}</b>
+      </span>
+      <span>{theme.palette.contrastThreshold}:1</span>
+      <Stack direction="row" gap={1}>
+        <Button variant="contained" color="warning">
+          Warning
+        </Button>
+      </Stack>
+    </Stack>
+  );
+}
+
+export default function ContrastThreshold() {
+  return (
+    <Stack direction="row" gap={4}>
+      <ThemeProvider theme={defaultContrastThresholdTheme}>
+        <ContrastShowcase title="Default contrast threshold" />
+      </ThemeProvider>
+      <ThemeProvider theme={highContrastThresholdTheme}>
+        <ContrastShowcase title="Higher contrast threshold" />
+      </ThemeProvider>
+    </Stack>
+  );
+}
diff --git a/docs/data/material/customization/palette/ContrastThreshold.tsx b/docs/data/material/customization/palette/ContrastThreshold.tsx
new file mode 100644
index 00000000000000..30d8dae1660a00
--- /dev/null
+++ b/docs/data/material/customization/palette/ContrastThreshold.tsx
@@ -0,0 +1,43 @@
+import * as React from 'react';
+import { createTheme, ThemeProvider, useTheme } from '@mui/material/styles';
+import Button from '@mui/material/Button';
+import { Stack } from '@mui/system';
+
+const defaultContrastThresholdTheme = createTheme({});
+
+const highContrastThresholdTheme = createTheme({
+  palette: {
+    contrastThreshold: 4.5,
+  },
+});
+
+function ContrastShowcase({ title }: { title: string }) {
+  const theme = useTheme();
+
+  return (
+    <Stack gap={1} alignItems="center">
+      <span>
+        <b>{title}</b>
+      </span>
+      <span>{theme.palette.contrastThreshold}:1</span>
+      <Stack direction="row" gap={1}>
+        <Button variant="contained" color="warning">
+          Warning
+        </Button>
+      </Stack>
+    </Stack>
+  );
+}
+
+export default function ContrastThreshold() {
+  return (
+    <Stack direction="row" gap={4}>
+      <ThemeProvider theme={defaultContrastThresholdTheme}>
+        <ContrastShowcase title="Default contrast threshold" />
+      </ThemeProvider>
+      <ThemeProvider theme={highContrastThresholdTheme}>
+        <ContrastShowcase title="Higher contrast threshold" />
+      </ThemeProvider>
+    </Stack>
+  );
+}
diff --git a/docs/data/material/customization/palette/CustomColor.js b/docs/data/material/customization/palette/CustomColor.js
index ec17f7968cec29..528851ba775065 100644
--- a/docs/data/material/customization/palette/CustomColor.js
+++ b/docs/data/material/customization/palette/CustomColor.js
@@ -5,7 +5,9 @@ import Button from '@mui/material/Button';
 const theme = createTheme({
   palette: {
     neutral: {
-      main: '#64748B',
+      light: '#838fa2',
+      main: '#64748b',
+      dark: '#465161',
       contrastText: '#fff',
     },
   },
diff --git a/docs/data/material/customization/palette/CustomColor.tsx b/docs/data/material/customization/palette/CustomColor.tsx
index 47a0c8bbff768b..3352f82cc6b05a 100644
--- a/docs/data/material/customization/palette/CustomColor.tsx
+++ b/docs/data/material/customization/palette/CustomColor.tsx
@@ -5,7 +5,9 @@ import Button from '@mui/material/Button';
 const theme = createTheme({
   palette: {
     neutral: {
-      main: '#64748B',
+      light: '#838fa2',
+      main: '#64748b',
+      dark: '#465161',
       contrastText: '#fff',
     },
   },
diff --git a/docs/data/material/customization/palette/ManuallyProvideCustomColor.js b/docs/data/material/customization/palette/ManuallyProvideCustomColor.js
new file mode 100644
index 00000000000000..89d081381ceedd
--- /dev/null
+++ b/docs/data/material/customization/palette/ManuallyProvideCustomColor.js
@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { createTheme, ThemeProvider } from '@mui/material/styles';
+import Button from '@mui/material/Button';
+import { Box, Stack } from '@mui/system';
+import { Typography } from '@mui/material';
+
+const theme = createTheme({
+  palette: {
+    ochre: {
+      main: '#E3D026',
+      light: '#E9DB5D',
+      dark: '#A29415',
+      contrastText: '#242105',
+    },
+  },
+});
+
+export default function ManuallyProvideCustomColor() {
+  return (
+    <ThemeProvider theme={theme}>
+      <Stack gap={2} alignItems="center">
+        <Button variant="contained" color="ochre">
+          Ochre
+        </Button>
+        <Stack direction="row" gap={1}>
+          <Stack alignItems="center">
+            <Typography variant="body2">light</Typography>
+            <Box sx={{ bgcolor: 'ochre.light', width: 40, height: 20 }} />
+          </Stack>
+          <Stack alignItems="center">
+            <Typography variant="body2">main</Typography>
+            <Box sx={{ bgcolor: 'ochre.main', width: 40, height: 20 }} />
+          </Stack>
+          <Stack alignItems="center">
+            <Typography variant="body2">dark</Typography>
+            <Box sx={{ bgcolor: 'ochre.dark', width: 40, height: 20 }} />
+          </Stack>
+        </Stack>
+      </Stack>
+    </ThemeProvider>
+  );
+}
diff --git a/docs/data/material/customization/palette/ManuallyProvideCustomColor.tsx b/docs/data/material/customization/palette/ManuallyProvideCustomColor.tsx
new file mode 100644
index 00000000000000..9dfd22a5f810b9
--- /dev/null
+++ b/docs/data/material/customization/palette/ManuallyProvideCustomColor.tsx
@@ -0,0 +1,60 @@
+import * as React from 'react';
+import { createTheme, ThemeProvider } from '@mui/material/styles';
+import Button from '@mui/material/Button';
+import { Box, Stack } from '@mui/system';
+import { Typography } from '@mui/material';
+
+// Augment the palette to include an ochre color
+declare module '@mui/material/styles' {
+  interface Palette {
+    ochre: Palette['primary'];
+  }
+
+  interface PaletteOptions {
+    ochre?: PaletteOptions['primary'];
+  }
+}
+
+// Update the Button's color options to include an ochre option
+declare module '@mui/material/Button' {
+  interface ButtonPropsColorOverrides {
+    ochre: true;
+  }
+}
+
+const theme = createTheme({
+  palette: {
+    ochre: {
+      main: '#E3D026',
+      light: '#E9DB5D',
+      dark: '#A29415',
+      contrastText: '#242105',
+    },
+  },
+});
+
+export default function ManuallyProvideCustomColor() {
+  return (
+    <ThemeProvider theme={theme}>
+      <Stack gap={2} alignItems="center">
+        <Button variant="contained" color="ochre">
+          Ochre
+        </Button>
+        <Stack direction="row" gap={1}>
+          <Stack alignItems="center">
+            <Typography variant="body2">light</Typography>
+            <Box sx={{ bgcolor: 'ochre.light', width: 40, height: 20 }} />
+          </Stack>
+          <Stack alignItems="center">
+            <Typography variant="body2">main</Typography>
+            <Box sx={{ bgcolor: 'ochre.main', width: 40, height: 20 }} />
+          </Stack>
+          <Stack alignItems="center">
+            <Typography variant="body2">dark</Typography>
+            <Box sx={{ bgcolor: 'ochre.dark', width: 40, height: 20 }} />
+          </Stack>
+        </Stack>
+      </Stack>
+    </ThemeProvider>
+  );
+}
diff --git a/docs/data/material/customization/palette/ManuallyProvideCustomColor.tsx.preview b/docs/data/material/customization/palette/ManuallyProvideCustomColor.tsx.preview
new file mode 100644
index 00000000000000..c81e9d503e5719
--- /dev/null
+++ b/docs/data/material/customization/palette/ManuallyProvideCustomColor.tsx.preview
@@ -0,0 +1,12 @@
+import { createTheme } from '@mui/material/styles';
+
+const theme = createTheme({
+  palette: {
+    ochre: {
+      main: '#E3D026',
+      light: '#E9DB5D',
+      dark: '#A29415',
+      contrastText: '#242105',
+    },
+  },
+});
diff --git a/docs/data/material/customization/palette/ManuallyProvidePaletteColor.js b/docs/data/material/customization/palette/ManuallyProvidePaletteColor.js
new file mode 100644
index 00000000000000..f77392c38da228
--- /dev/null
+++ b/docs/data/material/customization/palette/ManuallyProvidePaletteColor.js
@@ -0,0 +1,58 @@
+import * as React from 'react';
+import { createTheme, ThemeProvider } from '@mui/material/styles';
+import Button from '@mui/material/Button';
+import { Box, Stack } from '@mui/system';
+import { unstable_capitalize as capitalize } from '@mui/utils';
+import { Typography } from '@mui/material';
+
+const theme = createTheme({
+  palette: {
+    primary: {
+      main: '#FF5733',
+      // light: will be calculated from palette.primary.main,
+      // dark: will be calculated from palette.primary.main,
+      // contrastText: will be calculated to contrast with palette.primary.main
+    },
+    secondary: {
+      main: '#E0C2FF',
+      light: '#F5EBFF',
+      // dark: will be calculated from palette.secondary.main,
+      contrastText: '#47008F',
+    },
+  },
+});
+
+function ColorShowcase({ color }) {
+  return (
+    <Stack gap={2} alignItems="center">
+      <Button variant="contained" color={color}>
+        {capitalize(color)}
+      </Button>
+      <Stack direction="row" gap={1}>
+        <Stack alignItems="center">
+          <Typography variant="body2">light</Typography>
+          <Box sx={{ bgcolor: `${color}.light`, width: 40, height: 20 }} />
+        </Stack>
+        <Stack alignItems="center">
+          <Typography variant="body2">main</Typography>
+          <Box sx={{ bgcolor: `${color}.main`, width: 40, height: 20 }} />
+        </Stack>
+        <Stack alignItems="center">
+          <Typography variant="body2">dark</Typography>
+          <Box sx={{ bgcolor: `${color}.dark`, width: 40, height: 20 }} />
+        </Stack>
+      </Stack>
+    </Stack>
+  );
+}
+
+export default function ManuallyProvidePaletteColor() {
+  return (
+    <ThemeProvider theme={theme}>
+      <Stack direction="row" gap={8}>
+        <ColorShowcase color="primary" />
+        <ColorShowcase color="secondary" />
+      </Stack>
+    </ThemeProvider>
+  );
+}
diff --git a/docs/data/material/customization/palette/ManuallyProvidePaletteColor.tsx b/docs/data/material/customization/palette/ManuallyProvidePaletteColor.tsx
new file mode 100644
index 00000000000000..150b65726aebed
--- /dev/null
+++ b/docs/data/material/customization/palette/ManuallyProvidePaletteColor.tsx
@@ -0,0 +1,58 @@
+import * as React from 'react';
+import { createTheme, ThemeProvider } from '@mui/material/styles';
+import Button from '@mui/material/Button';
+import { Box, Stack } from '@mui/system';
+import { unstable_capitalize as capitalize } from '@mui/utils';
+import { Typography } from '@mui/material';
+
+const theme = createTheme({
+  palette: {
+    primary: {
+      main: '#FF5733',
+      // light: will be calculated from palette.primary.main,
+      // dark: will be calculated from palette.primary.main,
+      // contrastText: will be calculated to contrast with palette.primary.main
+    },
+    secondary: {
+      main: '#E0C2FF',
+      light: '#F5EBFF',
+      // dark: will be calculated from palette.secondary.main,
+      contrastText: '#47008F',
+    },
+  },
+});
+
+function ColorShowcase({ color }: { color: 'primary' | 'secondary' }) {
+  return (
+    <Stack gap={2} alignItems="center">
+      <Button variant="contained" color={color}>
+        {capitalize(color)}
+      </Button>
+      <Stack direction="row" gap={1}>
+        <Stack alignItems="center">
+          <Typography variant="body2">light</Typography>
+          <Box sx={{ bgcolor: `${color}.light`, width: 40, height: 20 }} />
+        </Stack>
+        <Stack alignItems="center">
+          <Typography variant="body2">main</Typography>
+          <Box sx={{ bgcolor: `${color}.main`, width: 40, height: 20 }} />
+        </Stack>
+        <Stack alignItems="center">
+          <Typography variant="body2">dark</Typography>
+          <Box sx={{ bgcolor: `${color}.dark`, width: 40, height: 20 }} />
+        </Stack>
+      </Stack>
+    </Stack>
+  );
+}
+
+export default function ManuallyProvidePaletteColor() {
+  return (
+    <ThemeProvider theme={theme}>
+      <Stack direction="row" gap={8}>
+        <ColorShowcase color="primary" />
+        <ColorShowcase color="secondary" />
+      </Stack>
+    </ThemeProvider>
+  );
+}
diff --git a/docs/data/material/customization/palette/ManuallyProvidePaletteColor.tsx.preview b/docs/data/material/customization/palette/ManuallyProvidePaletteColor.tsx.preview
new file mode 100644
index 00000000000000..3b1f010f2dc3cf
--- /dev/null
+++ b/docs/data/material/customization/palette/ManuallyProvidePaletteColor.tsx.preview
@@ -0,0 +1,18 @@
+import { createTheme } from '@mui/material/styles';
+
+const theme = createTheme({
+  palette: {
+    primary: {
+      main: '#FF5733',
+      // light: will be calculated from palette.primary.main,
+      // dark: will be calculated from palette.primary.main,
+      // contrastText: will be calculated to contrast with palette.primary.main
+    },
+    secondary: {
+      main: '#E0C2FF',
+      light: '#F5EBFF',
+      // dark: will be calculated from palette.secondary.main,
+      contrastText: '#47008F',
+    },
+  },
+});
diff --git a/docs/data/material/customization/palette/TonalOffset.js b/docs/data/material/customization/palette/TonalOffset.js
new file mode 100644
index 00000000000000..35d2cbf218fae3
--- /dev/null
+++ b/docs/data/material/customization/palette/TonalOffset.js
@@ -0,0 +1,86 @@
+import * as React from 'react';
+import { createTheme, ThemeProvider, useTheme } from '@mui/material/styles';
+import { blue } from '@mui/material/colors';
+import { Box, Stack } from '@mui/system';
+import { Typography } from '@mui/material';
+
+const defaultTonalOffsetTheme = createTheme({
+  palette: {
+    primary: {
+      main: blue[500],
+    },
+  },
+});
+
+const higherTonalOffsetTheme = createTheme({
+  palette: {
+    primary: {
+      main: blue[500],
+    },
+    tonalOffset: 0.5,
+  },
+});
+
+const asymmetricTonalOffsetTheme = createTheme({
+  palette: {
+    primary: {
+      main: blue[500],
+    },
+    tonalOffset: {
+      light: 0.1,
+      dark: 0.9,
+    },
+  },
+});
+
+function ColorShowcase({ title, color }) {
+  const {
+    palette: { tonalOffset },
+  } = useTheme();
+
+  let caption;
+  if (typeof tonalOffset === 'number') {
+    caption = tonalOffset;
+  } else {
+    caption = `{ light: ${tonalOffset.light}, dark: ${tonalOffset.dark} }`;
+  }
+
+  return (
+    <Stack gap={1} alignItems="center">
+      <span>
+        <b>{title}</b>
+      </span>
+      <span>{caption}</span>
+      <Stack direction="row" gap={1}>
+        <Stack alignItems="center">
+          <Typography variant="body2">light</Typography>
+          <Box sx={{ bgcolor: `${color}.light`, width: 40, height: 20 }} />
+        </Stack>
+        <Stack alignItems="center">
+          <Typography variant="body2">main</Typography>
+          <Box sx={{ bgcolor: `${color}.main`, width: 40, height: 20 }} />
+        </Stack>
+        <Stack alignItems="center">
+          <Typography variant="body2">dark</Typography>
+          <Box sx={{ bgcolor: `${color}.dark`, width: 40, height: 20 }} />
+        </Stack>
+      </Stack>
+    </Stack>
+  );
+}
+
+export default function TonalOffset() {
+  return (
+    <Stack direction="row" gap={8}>
+      <ThemeProvider theme={defaultTonalOffsetTheme}>
+        <ColorShowcase title="Default tonal offset" color="primary" />
+      </ThemeProvider>
+      <ThemeProvider theme={higherTonalOffsetTheme}>
+        <ColorShowcase title="Higher tonal offset" color="primary" />
+      </ThemeProvider>
+      <ThemeProvider theme={asymmetricTonalOffsetTheme}>
+        <ColorShowcase title="Asymmetric tonal offset" color="primary" />
+      </ThemeProvider>
+    </Stack>
+  );
+}
diff --git a/docs/data/material/customization/palette/TonalOffset.tsx b/docs/data/material/customization/palette/TonalOffset.tsx
new file mode 100644
index 00000000000000..f2f8e34e43b424
--- /dev/null
+++ b/docs/data/material/customization/palette/TonalOffset.tsx
@@ -0,0 +1,86 @@
+import * as React from 'react';
+import { createTheme, ThemeProvider, useTheme } from '@mui/material/styles';
+import { blue } from '@mui/material/colors';
+import { Box, Stack } from '@mui/system';
+import { Typography } from '@mui/material';
+
+const defaultTonalOffsetTheme = createTheme({
+  palette: {
+    primary: {
+      main: blue[500],
+    },
+  },
+});
+
+const higherTonalOffsetTheme = createTheme({
+  palette: {
+    primary: {
+      main: blue[500],
+    },
+    tonalOffset: 0.5,
+  },
+});
+
+const asymmetricTonalOffsetTheme = createTheme({
+  palette: {
+    primary: {
+      main: blue[500],
+    },
+    tonalOffset: {
+      light: 0.1,
+      dark: 0.9,
+    },
+  },
+});
+
+function ColorShowcase({ title, color }: { title: string; color: string }) {
+  const {
+    palette: { tonalOffset },
+  } = useTheme();
+
+  let caption;
+  if (typeof tonalOffset === 'number') {
+    caption = tonalOffset;
+  } else {
+    caption = `{ light: ${tonalOffset.light}, dark: ${tonalOffset.dark} }`;
+  }
+
+  return (
+    <Stack gap={1} alignItems="center">
+      <span>
+        <b>{title}</b>
+      </span>
+      <span>{caption}</span>
+      <Stack direction="row" gap={1}>
+        <Stack alignItems="center">
+          <Typography variant="body2">light</Typography>
+          <Box sx={{ bgcolor: `${color}.light`, width: 40, height: 20 }} />
+        </Stack>
+        <Stack alignItems="center">
+          <Typography variant="body2">main</Typography>
+          <Box sx={{ bgcolor: `${color}.main`, width: 40, height: 20 }} />
+        </Stack>
+        <Stack alignItems="center">
+          <Typography variant="body2">dark</Typography>
+          <Box sx={{ bgcolor: `${color}.dark`, width: 40, height: 20 }} />
+        </Stack>
+      </Stack>
+    </Stack>
+  );
+}
+
+export default function TonalOffset() {
+  return (
+    <Stack direction="row" gap={8}>
+      <ThemeProvider theme={defaultTonalOffsetTheme}>
+        <ColorShowcase title="Default tonal offset" color="primary" />
+      </ThemeProvider>
+      <ThemeProvider theme={higherTonalOffsetTheme}>
+        <ColorShowcase title="Higher tonal offset" color="primary" />
+      </ThemeProvider>
+      <ThemeProvider theme={asymmetricTonalOffsetTheme}>
+        <ColorShowcase title="Asymmetric tonal offset" color="primary" />
+      </ThemeProvider>
+    </Stack>
+  );
+}
diff --git a/docs/data/material/customization/palette/UsingAugmentColor.js b/docs/data/material/customization/palette/UsingAugmentColor.js
new file mode 100644
index 00000000000000..082341f9558ad9
--- /dev/null
+++ b/docs/data/material/customization/palette/UsingAugmentColor.js
@@ -0,0 +1,48 @@
+import * as React from 'react';
+import { createTheme, ThemeProvider } from '@mui/material/styles';
+import Button from '@mui/material/Button';
+import { Box, Stack } from '@mui/system';
+import { Typography } from '@mui/material';
+
+let theme = createTheme({
+  // Theme customization goes here as usual, including tonalOffset and/or
+  // contrastThreshold as the augmentColor() function relies on these
+});
+
+theme = createTheme(theme, {
+  // Custom colors created with augmentColor go here
+  palette: {
+    salmon: theme.palette.augmentColor({
+      color: {
+        main: '#FF5733',
+      },
+      name: 'salmon',
+    }),
+  },
+});
+
+export default function UsingAugmentColor() {
+  return (
+    <ThemeProvider theme={theme}>
+      <Stack gap={2} alignItems="center">
+        <Button variant="contained" color="salmon">
+          Salmon
+        </Button>
+        <Stack direction="row" gap={1}>
+          <Stack alignItems="center">
+            <Typography variant="body2">light</Typography>
+            <Box sx={{ bgcolor: 'salmon.light', width: 40, height: 20 }} />
+          </Stack>
+          <Stack alignItems="center">
+            <Typography variant="body2">main</Typography>
+            <Box sx={{ bgcolor: 'salmon.main', width: 40, height: 20 }} />
+          </Stack>
+          <Stack alignItems="center">
+            <Typography variant="body2">dark</Typography>
+            <Box sx={{ bgcolor: 'salmon.dark', width: 40, height: 20 }} />
+          </Stack>
+        </Stack>
+      </Stack>
+    </ThemeProvider>
+  );
+}
diff --git a/docs/data/material/customization/palette/UsingAugmentColor.tsx b/docs/data/material/customization/palette/UsingAugmentColor.tsx
new file mode 100644
index 00000000000000..071ae2c0d16159
--- /dev/null
+++ b/docs/data/material/customization/palette/UsingAugmentColor.tsx
@@ -0,0 +1,66 @@
+import * as React from 'react';
+import { createTheme, ThemeProvider } from '@mui/material/styles';
+import Button from '@mui/material/Button';
+import { Box, Stack } from '@mui/system';
+import { Typography } from '@mui/material';
+
+// Augment the palette to include a salmon color
+declare module '@mui/material/styles' {
+  interface Palette {
+    salmon: Palette['primary'];
+  }
+
+  interface PaletteOptions {
+    salmon?: PaletteOptions['primary'];
+  }
+}
+
+// Update the Button's color options to include a salmon option
+declare module '@mui/material/Button' {
+  interface ButtonPropsColorOverrides {
+    salmon: true;
+  }
+}
+
+let theme = createTheme({
+  // Theme customization goes here as usual, including tonalOffset and/or
+  // contrastThreshold as the augmentColor() function relies on these
+});
+
+theme = createTheme(theme, {
+  // Custom colors created with augmentColor go here
+  palette: {
+    salmon: theme.palette.augmentColor({
+      color: {
+        main: '#FF5733',
+      },
+      name: 'salmon',
+    }),
+  },
+});
+
+export default function UsingAugmentColor() {
+  return (
+    <ThemeProvider theme={theme}>
+      <Stack gap={2} alignItems="center">
+        <Button variant="contained" color="salmon">
+          Salmon
+        </Button>
+        <Stack direction="row" gap={1}>
+          <Stack alignItems="center">
+            <Typography variant="body2">light</Typography>
+            <Box sx={{ bgcolor: 'salmon.light', width: 40, height: 20 }} />
+          </Stack>
+          <Stack alignItems="center">
+            <Typography variant="body2">main</Typography>
+            <Box sx={{ bgcolor: 'salmon.main', width: 40, height: 20 }} />
+          </Stack>
+          <Stack alignItems="center">
+            <Typography variant="body2">dark</Typography>
+            <Box sx={{ bgcolor: 'salmon.dark', width: 40, height: 20 }} />
+          </Stack>
+        </Stack>
+      </Stack>
+    </ThemeProvider>
+  );
+}
diff --git a/docs/data/material/customization/palette/UsingAugmentColor.tsx.preview b/docs/data/material/customization/palette/UsingAugmentColor.tsx.preview
new file mode 100644
index 00000000000000..f87bb4a7cbbfdc
--- /dev/null
+++ b/docs/data/material/customization/palette/UsingAugmentColor.tsx.preview
@@ -0,0 +1,18 @@
+import { createTheme } from '@mui/material/styles';
+
+let theme = createTheme({
+  // Theme customization goes here as usual, including tonalOffset and/or
+  // contrastThreshold as the augmentColor() function relies on these
+});
+
+theme = createTheme(theme, {
+  // Custom colors created with augmentColor go here
+  palette: {
+    salmon: theme.palette.augmentColor({
+      color: {
+        main: '#FF5733',
+      },
+      name: 'salmon',
+    }),
+  },
+});
diff --git a/docs/data/material/customization/palette/UsingColorObject.js b/docs/data/material/customization/palette/UsingColorObject.js
new file mode 100644
index 00000000000000..90014382a51c93
--- /dev/null
+++ b/docs/data/material/customization/palette/UsingColorObject.js
@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { createTheme, ThemeProvider } from '@mui/material/styles';
+import { lime, purple } from '@mui/material/colors';
+import Button from '@mui/material/Button';
+import { Stack } from '@mui/system';
+
+const theme = createTheme({
+  palette: {
+    primary: lime,
+    secondary: purple,
+  },
+});
+
+export default function UsingColorObject() {
+  return (
+    <ThemeProvider theme={theme}>
+      <Stack direction="row" gap={4}>
+        <Button variant="contained">Primary</Button>
+        <Button variant="contained" color="secondary">
+          Secondary
+        </Button>
+      </Stack>
+    </ThemeProvider>
+  );
+}
diff --git a/docs/data/material/customization/palette/UsingColorObject.tsx b/docs/data/material/customization/palette/UsingColorObject.tsx
new file mode 100644
index 00000000000000..90014382a51c93
--- /dev/null
+++ b/docs/data/material/customization/palette/UsingColorObject.tsx
@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { createTheme, ThemeProvider } from '@mui/material/styles';
+import { lime, purple } from '@mui/material/colors';
+import Button from '@mui/material/Button';
+import { Stack } from '@mui/system';
+
+const theme = createTheme({
+  palette: {
+    primary: lime,
+    secondary: purple,
+  },
+});
+
+export default function UsingColorObject() {
+  return (
+    <ThemeProvider theme={theme}>
+      <Stack direction="row" gap={4}>
+        <Button variant="contained">Primary</Button>
+        <Button variant="contained" color="secondary">
+          Secondary
+        </Button>
+      </Stack>
+    </ThemeProvider>
+  );
+}
diff --git a/docs/data/material/customization/palette/UsingColorObject.tsx.preview b/docs/data/material/customization/palette/UsingColorObject.tsx.preview
new file mode 100644
index 00000000000000..d2ff5249809ef5
--- /dev/null
+++ b/docs/data/material/customization/palette/UsingColorObject.tsx.preview
@@ -0,0 +1,9 @@
+import { createTheme } from '@mui/material/styles';
+import { lime, purple } from '@mui/material/colors';
+
+const theme = createTheme({
+  palette: {
+    primary: lime,
+    secondary: purple,
+  },
+});
diff --git a/docs/data/material/customization/palette/UsingStylesUtils.js b/docs/data/material/customization/palette/UsingStylesUtils.js
new file mode 100644
index 00000000000000..c7cfa7bce39655
--- /dev/null
+++ b/docs/data/material/customization/palette/UsingStylesUtils.js
@@ -0,0 +1,50 @@
+import * as React from 'react';
+import {
+  createTheme,
+  ThemeProvider,
+  alpha,
+  getContrastRatio,
+} from '@mui/material/styles';
+import Button from '@mui/material/Button';
+import { Box, Stack } from '@mui/system';
+import { Typography } from '@mui/material';
+
+const violetBase = '#7F00FF';
+const violetMain = alpha(violetBase, 0.7);
+
+const theme = createTheme({
+  palette: {
+    violet: {
+      main: violetMain,
+      light: alpha(violetBase, 0.5),
+      dark: alpha(violetBase, 0.9),
+      contrastText: getContrastRatio(violetMain, '#fff') > 4.5 ? '#fff' : '#111',
+    },
+  },
+});
+
+export default function UsingStylesUtils() {
+  return (
+    <ThemeProvider theme={theme}>
+      <Stack gap={2} alignItems="center">
+        <Button variant="contained" color="violet">
+          Violet
+        </Button>
+        <Stack direction="row" gap={1}>
+          <Stack alignItems="center">
+            <Typography variant="body2">light</Typography>
+            <Box sx={{ bgcolor: 'violet.light', width: 40, height: 20 }} />
+          </Stack>
+          <Stack alignItems="center">
+            <Typography variant="body2">main</Typography>
+            <Box sx={{ bgcolor: 'violet.main', width: 40, height: 20 }} />
+          </Stack>
+          <Stack alignItems="center">
+            <Typography variant="body2">dark</Typography>
+            <Box sx={{ bgcolor: 'violet.dark', width: 40, height: 20 }} />
+          </Stack>
+        </Stack>
+      </Stack>
+    </ThemeProvider>
+  );
+}
diff --git a/docs/data/material/customization/palette/UsingStylesUtils.tsx b/docs/data/material/customization/palette/UsingStylesUtils.tsx
new file mode 100644
index 00000000000000..789558a52ce1cf
--- /dev/null
+++ b/docs/data/material/customization/palette/UsingStylesUtils.tsx
@@ -0,0 +1,68 @@
+import * as React from 'react';
+import {
+  createTheme,
+  ThemeProvider,
+  alpha,
+  getContrastRatio,
+} from '@mui/material/styles';
+import Button from '@mui/material/Button';
+import { Box, Stack } from '@mui/system';
+import { Typography } from '@mui/material';
+
+// Augment the palette to include a violet color
+declare module '@mui/material/styles' {
+  interface Palette {
+    violet: Palette['primary'];
+  }
+
+  interface PaletteOptions {
+    violet?: PaletteOptions['primary'];
+  }
+}
+
+// Update the Button's color options to include a violet option
+declare module '@mui/material/Button' {
+  interface ButtonPropsColorOverrides {
+    violet: true;
+  }
+}
+
+const violetBase = '#7F00FF';
+const violetMain = alpha(violetBase, 0.7);
+
+const theme = createTheme({
+  palette: {
+    violet: {
+      main: violetMain,
+      light: alpha(violetBase, 0.5),
+      dark: alpha(violetBase, 0.9),
+      contrastText: getContrastRatio(violetMain, '#fff') > 4.5 ? '#fff' : '#111',
+    },
+  },
+});
+
+export default function UsingStylesUtils() {
+  return (
+    <ThemeProvider theme={theme}>
+      <Stack gap={2} alignItems="center">
+        <Button variant="contained" color="violet">
+          Violet
+        </Button>
+        <Stack direction="row" gap={1}>
+          <Stack alignItems="center">
+            <Typography variant="body2">light</Typography>
+            <Box sx={{ bgcolor: 'violet.light', width: 40, height: 20 }} />
+          </Stack>
+          <Stack alignItems="center">
+            <Typography variant="body2">main</Typography>
+            <Box sx={{ bgcolor: 'violet.main', width: 40, height: 20 }} />
+          </Stack>
+          <Stack alignItems="center">
+            <Typography variant="body2">dark</Typography>
+            <Box sx={{ bgcolor: 'violet.dark', width: 40, height: 20 }} />
+          </Stack>
+        </Stack>
+      </Stack>
+    </ThemeProvider>
+  );
+}
diff --git a/docs/data/material/customization/palette/UsingStylesUtils.tsx.preview b/docs/data/material/customization/palette/UsingStylesUtils.tsx.preview
new file mode 100644
index 00000000000000..1f164d21ef5cab
--- /dev/null
+++ b/docs/data/material/customization/palette/UsingStylesUtils.tsx.preview
@@ -0,0 +1,15 @@
+import { createTheme, alpha, getContrastRatio } from '@mui/material/styles';
+
+const violetBase = '#7F00FF';
+const violetMain = alpha(violetBase, 0.7);
+
+const theme = createTheme({
+  palette: {
+    violet: {
+      main: violetMain,
+      light: alpha(violetBase, 0.5),
+      dark: alpha(violetBase, 0.9),
+      contrastText: getContrastRatio(violetMain, '#fff') > 4.5 ? '#fff' : '#111',
+    },
+  },
+});
diff --git a/docs/data/material/customization/palette/palette.md b/docs/data/material/customization/palette/palette.md
index e563ed3aed1e9c..41d9877e7cf57a 100644
--- a/docs/data/material/customization/palette/palette.md
+++ b/docs/data/material/customization/palette/palette.md
@@ -2,29 +2,51 @@
 
 <p class="description">The palette enables you to modify the color of the components to suit your brand.</p>
 
-## Palette colors
+## Color tokens
 
-The theme exposes the following palette colors (accessible under `theme.palette.`):
+Palette colors are represented by four tokens:
 
-- _primary_ - used to represent primary interface elements for a user. It's the color displayed most frequently across your app's screens and components.
-- _secondary_ - used to represent secondary interface elements for a user. It provides more ways to accent and distinguish your product. Having it is optional.
-- _error_ - used to represent interface elements that the user should be made aware of.
-- _warning_ - used to represent potentially dangerous actions or important messages.
-- _info_ - used to present information to the user that is neutral and not necessarily important.
-- _success_ - used to indicate the successful completion of an action that user triggered.
+- `main`: The main shade of the color
+- `light`: A lighter shade of `main`
+- `dark`: A darker shade of `main`
+- `contrastText`: Text color, intended to contrast with `main`
 
-If you want to learn more about color, you can check out [the color section](/material-ui/customization/color/).
+Here's how Material UI's default theme defines the primary color tokens:
 
-## Default values
+```js
+const primary = {
+  main: '#1976d2',
+  light: '#42a5f5',
+  dark: '#1565c0',
+  contrastText: '#fff',
+};
+```
+
+See the [Color](/material-ui/customization/color/) documentation for details on the Material Design color system.
+
+## Default colors
+
+The theme exposes the following default palette colors (accessible under `theme.palette.*`):
+
+- `primary` - for primary interface elements.
+- `secondary` - for secondary interface elements.
+- `error` - for elements that the user should be made aware of.
+- `warning` - for potentially dangerous actions or important messages.
+- `info` - for highlighting neutral information.
+- `success` - for indicating the successful completion of an action that the user triggered.
 
-You can explore the default values of the palette using [the theme explorer](/material-ui/customization/default-theme/?expand-path=$.palette) or by opening the dev tools console on this page (`window.theme.palette`).
+See Material Design's [Color System](https://m2.material.io/design/color/the-color-system.html) for details on color usage and guidelines.
+
+### Values
+
+You can explore the default palette values using [the theme explorer](/material-ui/customization/default-theme/?expand-path=$.palette), or by opening the dev tools console on this page (`window.theme.palette`).
 
 {{"demo": "Intentions.js", "bg": "inline", "hideToolbar": true}}
 
 The default palette uses the shades prefixed with `A` (`A200`, etc.) for the secondary palette color,
 and the un-prefixed shades for the other palette colors.
 
-## Customization
+### Customization
 
 You may override the default palette values by including a palette object as part of your theme.
 If any of the:
@@ -38,173 +60,128 @@ If any of the:
 
 palette color objects are provided, they will replace the default ones.
 
-The palette color value can either be a [color](/material-ui/customization/color/#2014-material-design-color-palettes) object, or an object with one or more of the keys specified by the following TypeScript interface:
+This can be achieved by either using a color object or by providing the colors directly:
 
-```ts
-interface PaletteColor {
-  light?: string;
-  main: string;
-  dark?: string;
-  contrastText?: string;
-}
-```
+#### Using a color object
 
-### Using a color object
+The most direct way to customize a palette color is to import and apply one or more [color objects](/material-ui/customization/color/#2014-material-design-color-palettes), as shown below:
 
-The simplest way to customize a palette color is to import one or more of the provided colors
-and apply them:
+{{"demo": "UsingColorObject.js", "defaultCodeOpen": true }}
 
-```js
-import { createTheme } from '@mui/material/styles';
-import blue from '@mui/material/colors/blue';
+#### Providing the colors directly
 
-const theme = createTheme({
-  palette: {
-    primary: blue,
-  },
-});
-```
+To modify each color directly, provide an object with one or more of the color tokens.
+Only the `main` token is required; `light`, `dark`, and `contrastText` are optional, and if not provided, then their values are calculated automatically:
 
-### Providing the colors directly
+{{"demo": "ManuallyProvidePaletteColor.js" }}
 
-If you wish to provide more customized colors, you can either create your own palette color,
-or directly supply colors to some or all of the `theme.palette` keys:
+### Contrast threshold
 
-```js
-import { createTheme } from '@mui/material/styles';
+The `contrastText` token is calculated using the `contrastThreshold` value, to maximize the contrast between the background and the text.
 
-const theme = createTheme({
-  palette: {
-    primary: {
-      // light: will be calculated from palette.primary.main,
-      main: '#ff4400',
-      // dark: will be calculated from palette.primary.main,
-      // contrastText: will be calculated to contrast with palette.primary.main
-    },
-    secondary: {
-      light: '#0066ff',
-      main: '#0044ff',
-      // dark: will be calculated from palette.secondary.main,
-      contrastText: '#ffcc00',
-    },
-    // Provide every color token (light, main, dark, and contrastText) when using
-    // custom colors for props in Material UI's components.
-    // Then you will be able to use it like this: `<Button color="custom">`
-    // (For TypeScript, you need to add module augmentation for the `custom` value)
-    custom: {
-      light: '#ffa726',
-      main: '#f57c00',
-      dark: '#ef6c00',
-      contrastText: 'rgba(0, 0, 0, 0.87)',
-    },
-    // Used by `getContrastText()` to maximize the contrast between
-    // the background and the text.
-    contrastThreshold: 3,
-    // Used by the functions below to shift a color's luminance by approximately
-    // two indexes within its tonal palette.
-    // E.g., shift from Red 500 to Red 300 or Red 700.
-    tonalOffset: 0.2,
-  },
-});
-```
+A higher contrast threshold value increases the point at which a background color is considered light, and thus given a dark `contrastText`.
+Note that the contrast threshold follows a non-linear curve, and defaults to a value of 3 which indicates a minimum contrast ratio of 3:1.
 
-As in the example above, if the palette color contains custom colors using any of the
-"main", "light", "dark" or "contrastText" keys, these map as follows:
+{{"demo": "ContrastThreshold.js" }}
 
-- If the "dark" and / or "light" keys are omitted, their value(s) will be calculated from "main",
-  according to the "tonalOffset" value.
-- If "contrastText" is omitted, its value will be calculated to contrast with "main",
-  according to the "contrastThreshold" value.
+### Tonal offset
 
-Both the "tonalOffset" and "contrastThreshold" values may be customized as needed.
-The "tonalOffset" value can either be a number between 0 and 1, which will apply to both light and dark variants, or an object with light and dark variants specified by the following TypeScript type:
+The `light` and `dark` tokens are calculated using the `tonalOffset` value, to shift the `main` color's luminance.
+A higher tonal offset value will make `light` tokens lighter, and `dark` tokens darker.
 
-```ts
-type PaletteTonalOffset =
-  | number
-  | {
-      light: number;
-      dark: number;
-    };
-```
+:::warning
+This only applies when working with custom colors—it won't have any effect on the [default values](#default-values).
+:::
 
-A higher value for "tonalOffset" will make calculated values for "light" lighter, and "dark" darker.
-A higher value for "contrastThreshold" increases the point at which a background color is considered
-light, and given a dark "contrastText". Note that "contrastThreshold" follows a non-linear curve, and
-starts with a value of 3 (requiring a minimum contrast ratio of 3:1).
+For example, the tonal offset default value `0.2` shifts the luminance by approximately two indexes, so if the `main` token is `blue[500]`, then the `light` token would be `blue[300]` and `dark` would be `blue[700]`.
 
-### Accessibility
+The tonal offset value can be either a number between 0 and 1 (which would apply to both `light` and `dark` tokens) or an object with `light` and `dark` keys specified:
 
-To meet the minimum contrast of at least 4.5:1 as defined in [WCAG 2.1 Rule 1.4.3](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html), create a custom theme with `contrastThreshold: 4.5`.
+{{"demo": "TonalOffset.js" }}
 
-```js
-import { createTheme } from '@mui/material/styles';
+## Custom colors
 
-const theme = createTheme({
-  palette: {
-    // Used by `getContrastText()` to maximize the contrast between
-    // the background and the text.
-    contrastThreshold: 4.5,
-  },
-});
-```
+:::warning
+Unlike [default colors](#default-colors), tokens for custom colors are _not_ automatically calculated.
+:::
 
-### Example
+To add custom colors, you must either provide the tokens manually, or generate them using the `augmentColor` utility:
 
-{{"demo": "Palette.js", "defaultCodeOpen": true}}
+### Provide tokens manually
 
-### Adding new colors
+The most straightforward approach is to define all tokens—`main`, `light`, `dark`, and `contrastText`—manually:
 
-You can add new colors inside and outside the palette of the theme as follows:
+{{"demo": "ManuallyProvideCustomColor.js" }}
 
-```js
-import { createTheme } from '@mui/material/styles';
+If you need to manipulate colors, `@mui/material/styles` provides [a set of utilities](https://github.com/mui/material-ui/blob/master/packages/mui-material/src/styles/index.d.ts#L52-L67) to help with this.
+The following example uses the `alpha` and `getContrastRatio` utilities to define tokens using opacity:
 
-const theme = createTheme({
-  status: {
-    danger: '#e53e3e',
-  },
-  palette: {
-    primary: {
-      main: '#0971f1',
-      darker: '#053e85',
-    },
-    neutral: {
-      main: '#64748B',
-      contrastText: '#fff',
-    },
-  },
-});
+{{"demo": "UsingStylesUtils.js" }}
+
+### Generate tokens using augmentColor utility
+
+Alternatively, you can generate the `light`, `dark` and `contrastText` tokens using the palette's `augmentColor` utility, which is the same function used for the default palette colors.
+This requires creating the theme in two steps and providing the `main` token on which the other will be based on:
+
+{{"demo": "UsingAugmentColor.js" }}
+
+The [contrast threshold](#contrast-threshold) and [tonal offset](#tonal-offset) values will apply for the colors defined using this utility.
+
+### Using in components
+
+After adding a custom color, you will be able to use it in components just like you do with default palette colors:
+
+```js
+<Button color="custom">
 ```
 
 ### TypeScript
 
-You have to use [module augmentation](/material-ui/guides/typescript/#customization-of-theme) to add new variables to the `Palette` and `PaletteOptions`.
+If you're using TypeScript, then you need to use [module augmentation](/material-ui/guides/typescript/#customization-of-theme) for custom colors.
+
+To add a custom color to the palette, you must add it to the `Palette` and `PaletteOptions` interfaces:
 
 <!-- tested with packages/mui-material/test/typescript/augmentation/paletteColors.spec.ts -->
 
 ```ts
 declare module '@mui/material/styles' {
-  interface Theme {
-    status: {
-      danger: React.CSSProperties['color'];
-    };
+  interface Palette {
+    custom: Palette['primary'];
   }
 
-  interface ThemeOptions {
-    status: {
-      danger: React.CSSProperties['color'];
-    };
+  interface PaletteOptions {
+    custom?: PaletteOptions['primary'];
   }
+}
+```
 
-  interface Palette {
-    neutral: Palette['primary'];
-  }
+To use a custom color for the `color` prop of a component, you must add it to the component's `PropsColorOverrides` interface.
+The example below shows how to do this with a Button component:
 
-  interface PaletteOptions {
-    neutral: PaletteOptions['primary'];
+<!-- tested with packages/mui-material/test/typescript/augmentation/paletteColors.spec.ts -->
+
+```ts
+declare module '@mui/material/Button' {
+  interface ButtonPropsColorOverrides {
+    custom: true;
   }
+}
+```
+
+## Adding color tokens
+
+To add a new [color token](#color-tokens), include it in the color's object as follows:
 
+{{"demo": "AddingColorTokens.js" }}
+
+### TypeScript
+
+If you're using TypeScript, then you'll need to use [module augmentation](/material-ui/guides/typescript/#customization-of-theme) to add the new color token to the `PaletteColor` and `SimplePaletteColorOptions` interfaces as follows:
+
+<!-- tested with packages/mui-material/test/typescript/augmentation/paletteColors.spec.ts -->
+
+```ts
+declare module '@mui/material/styles' {
   interface PaletteColor {
     darker?: string;
   }
@@ -215,7 +192,23 @@ declare module '@mui/material/styles' {
 }
 ```
 
-{{"demo": "CustomColor.js"}}
+## Non-palette colors
+
+To learn how to add colors outside of `theme.palette`, see [Theming—Custom variables](/material-ui/customization/theming/#custom-variables).
+
+## Accessibility
+
+To meet the minimum contrast of at least 4.5:1 as defined in [WCAG 2.1 Rule 1.4.3](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html), create a custom theme with a [contrast threshold](#contrast-threshold) value of 4.5 as follows:
+
+```js
+import { createTheme } from '@mui/material/styles';
+
+const theme = createTheme({
+  palette: {
+    contrastThreshold: 4.5,
+  },
+});
+```
 
 ## Picking colors
 
diff --git a/docs/data/material/discover-more/backers/backers.md b/docs/data/material/discover-more/backers/backers.md
index 2e8a8b2188ecce..77edb05f0ae128 100644
--- a/docs/data/material/discover-more/backers/backers.md
+++ b/docs/data/material/discover-more/backers/backers.md
@@ -25,7 +25,7 @@ Even when there are no more slots available, we accept higher bids.
 via [OpenCollective](https://opencollective.com/mui) or via [Patreon](https://www.patreon.com/oliviertassinari)
 
 <p style="display: flex; justify-content: start; align-items: center; flex-wrap: wrap;">
-  <a data-ga-event-category="sponsor" data-ga-event-action="logo" data-ga-event-label="tidelift.com" href="https://tidelift.com/subscription/pkg/npm-material-ui?utm_source=npm-material-ui&utm_medium=referral&utm_campaign=homepage" rel="noopener sponsored" target="_blank" style="margin-right: 16px;"><img height="96" width="96" src="https://avatars.githubusercontent.com/u/30204434?s=96" srcset="https://avatars.githubusercontent.com/u/30204434?s=192 2x" alt="tidelift.com" title="Enterprise-ready open-source software" loading="lazy" /></a>
+  <a data-ga-event-category="sponsor" data-ga-event-action="logo" data-ga-event-label="tidelift.com" href="https://www.tidelift.com/subscription/pkg/npm-material-ui?utm_source=npm-material-ui&utm_medium=referral&utm_campaign=homepage" rel="noopener sponsored" target="_blank" style="margin-right: 16px;"><img height="96" width="96" src="https://avatars.githubusercontent.com/u/30204434?s=96" srcset="https://avatars.githubusercontent.com/u/30204434?s=192 2x" alt="tidelift.com" title="Enterprise-ready open-source software" loading="lazy" /></a>
   <a data-ga-event-category="sponsor" data-ga-event-action="logo" data-ga-event-label="text-em-all.com" href="https://www.text-em-all.com/?utm_source=MUI&utm_medium=referral&utm_content=backers" rel="noopener sponsored" target="_blank" style="margin-right: 16px;"><img src="https://avatars.githubusercontent.com/u/1262264?s=96" srcset="https://avatars.githubusercontent.com/u/1262264?s=192 2x" alt="text-em-all.com" title="Mass Text Messaging & Automated Calling" height="96" width="96" loading="lazy"></a>
   <a data-ga-event-category="sponsor" data-ga-event-action="logo" data-ga-event-label="spotify" href="https://open.spotify.com?utm_source=MUI&utm_medium=referral&utm_content=backers" rel="noopener sponsored" target="_blank" style="margin-right: 16px;"><img height="96" width="96" src="https://images.opencollective.com/spotify/f37ea28/logo/96.png" srcset="https://images.opencollective.com/spotify/f37ea28/logo/192.png 2x" alt="Spotify" title="Music service to access to millions of songs" loading="lazy"></a>
   <a data-ga-event-category="sponsor" data-ga-event-action="logo" data-ga-event-label="megafamous" href="https://megafamous.com/?utm_source=MUI&utm_medium=referral&utm_content=backers" rel="noopener sponsored" target="_blank" style="margin-right: 16px;"><img height="96" width="96" src="/static/sponsors/megafamous.png" alt="megafamous.com" title="The best place to buy Instagram followers & likes" loading="lazy" /></a>
diff --git a/docs/pages/base-ui.tsx b/docs/pages/base-ui.tsx
index 05f62dd1f2a6c0..64aa3f4b7d4e7c 100644
--- a/docs/pages/base-ui.tsx
+++ b/docs/pages/base-ui.tsx
@@ -17,7 +17,8 @@ export default function Core() {
     <BrandingCssVarsProvider>
       <Head
         title="Base UI: Ship accessible & sleek components"
-        description='Base UI gives you a set of foundational \"headless\" components that you can build with using any styling solution you choose—no need to override any default style engine or theme.'
+        description={`Base UI is a library of headless ("unstyled") React UI components and low-level hooks.
+        You can style them with any CSS solutions like PostCSS or Tailwind CSS.`}
         card="/static/blog/introducing-mui-base/card.png"
       >
         <link
diff --git a/docs/pages/base-ui/all-components/index.js b/docs/pages/base-ui/all-components/index.js
index 84838d634f620b..eb5cdf8793bdeb 100644
--- a/docs/pages/base-ui/all-components/index.js
+++ b/docs/pages/base-ui/all-components/index.js
@@ -3,9 +3,8 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
 import AppFrame from 'docs/src/modules/components/AppFrame';
 import * as pageProps from 'docs/data/base/all-components/all-components.md?@mui/markdown';
 
-export default function Page(props) {
-  const { userLanguage, ...other } = props;
-  return <MarkdownDocs {...pageProps} {...other} disableToc />;
+export default function Page() {
+  return <MarkdownDocs {...pageProps} disableToc />;
 }
 
 Page.getLayout = (page) => {
diff --git a/docs/pages/base-ui/getting-started/customization.js b/docs/pages/base-ui/getting-started/customization.js
index 7f2aa5e2a9ddcd..e957153883b78c 100644
--- a/docs/pages/base-ui/getting-started/customization.js
+++ b/docs/pages/base-ui/getting-started/customization.js
@@ -1,7 +1,12 @@
 import * as React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
+import AppFrame from 'docs/src/modules/components/AppFrame';
 import * as pageProps from 'docs/data/base/getting-started/customization/customization.md?@mui/markdown';
 
 export default function Page() {
   return <MarkdownDocs {...pageProps} />;
 }
+
+Page.getLayout = (page) => {
+  return <AppFrame>{page}</AppFrame>;
+};
diff --git a/docs/pages/base-ui/getting-started/index.js b/docs/pages/base-ui/getting-started/index.js
index 106799ecc4cdc6..b58ce6dc8e7d57 100644
--- a/docs/pages/base-ui/getting-started/index.js
+++ b/docs/pages/base-ui/getting-started/index.js
@@ -1,7 +1,12 @@
 import * as React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
+import AppFrame from 'docs/src/modules/components/AppFrame';
 import * as pageProps from 'docs/data/base/getting-started/overview/overview.md?@mui/markdown';
 
 export default function Page() {
   return <MarkdownDocs {...pageProps} disableAd />;
 }
+
+Page.getLayout = (page) => {
+  return <AppFrame>{page}</AppFrame>;
+};
diff --git a/docs/pages/base-ui/getting-started/quickstart.js b/docs/pages/base-ui/getting-started/quickstart.js
index 643611a26c8214..29e78f295ddea7 100644
--- a/docs/pages/base-ui/getting-started/quickstart.js
+++ b/docs/pages/base-ui/getting-started/quickstart.js
@@ -1,7 +1,12 @@
 import * as React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
+import AppFrame from 'docs/src/modules/components/AppFrame';
 import * as pageProps from 'docs/data/base/getting-started/quickstart/quickstart.md?@mui/markdown';
 
 export default function Page() {
   return <MarkdownDocs {...pageProps} disableAd />;
 }
+
+Page.getLayout = (page) => {
+  return <AppFrame>{page}</AppFrame>;
+};
diff --git a/docs/pages/base-ui/getting-started/usage.js b/docs/pages/base-ui/getting-started/usage.js
index b750efe72ce706..0d69b588149af9 100644
--- a/docs/pages/base-ui/getting-started/usage.js
+++ b/docs/pages/base-ui/getting-started/usage.js
@@ -1,7 +1,12 @@
 import * as React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
+import AppFrame from 'docs/src/modules/components/AppFrame';
 import * as pageProps from 'docs/data/base/getting-started/usage/usage.md?@mui/markdown';
 
 export default function Page() {
   return <MarkdownDocs {...pageProps} disableAd />;
 }
+
+Page.getLayout = (page) => {
+  return <AppFrame>{page}</AppFrame>;
+};
diff --git a/docs/pages/blog/2023-toolpad-beta-announcement.md b/docs/pages/blog/2023-toolpad-beta-announcement.md
index 9e2a9571a94aed..a1f0c41d0439aa 100644
--- a/docs/pages/blog/2023-toolpad-beta-announcement.md
+++ b/docs/pages/blog/2023-toolpad-beta-announcement.md
@@ -1,7 +1,7 @@
 ---
 title: Introducing Toolpad: MUI's low-code admin builder
 description: Assemble admin panels and internal tools faster than ever before with Toolpad—now in beta.
-date: 2023-07-17T00:00:00.000Z
+date: 2023-07-24T00:00:00.000Z
 authors: ['prakhargupta']
 card: true
 tags: ['Product', 'News']
@@ -105,6 +105,6 @@ We plan to continue to iterate on our vision of helping you as a developer to in
 
 The best places to stay up-to-date about what we're currently working on are [GitHub issues](https://github.com/mui/mui-toolpad) and our [public roadmap](https://github.com/orgs/mui/projects/9/views/1).
 
-If you have any questions or would like to share feedback, you can directly contact the team at toolpad@mui.com or reach us on [Twitter](https://twitter.com/MUI_Toolpad). You can also engage in conversation in our [Discord](https://discord.gg/hHqtMP9Ckc) server.
+If you have any questions or would like to share feedback, you can directly contact the team at toolpad@mui.com or reach us on [Twitter](https://twitter.com/MUI_Toolpad). You can also engage in conversation in our [Discord](https://discord.gg/tewQuNeUyS) server.
 
 If you'd like an in-depth demo and to discuss your use case, please feel free to [schedule a meeting with me on Calendly](https://calendly.com/prakhar-mui).
diff --git a/docs/pages/blog/mui-core-v5.md b/docs/pages/blog/mui-core-v5.md
index 62d000c64cf021..6636bee0dbe37c 100644
--- a/docs/pages/blog/mui-core-v5.md
+++ b/docs/pages/blog/mui-core-v5.md
@@ -55,7 +55,8 @@ This release features some major highlights:
   - [Unstyled components and hooks](#unstyled-components-and-hooks)
   - [Second design system](#second-design-system)
   - [MUI X](#mui-x)
-  - [Design kits](#design-kits-2)
+  - [Design kits](#design-kits-1)
+- [Thank you](#thank-you)
 
 ## High-level goals for v5
 
@@ -197,7 +198,7 @@ For this reason, v5 comes with the capability to extend the built-in behavior of
 This was one of the most upvoted GitHub issues: [#13875](https://github.com/mui/material-ui/issues/13875).
 In practice, this change makes the MUI Core components extendable placeholders.
 
-**First**, you can use the [existing style mapping](/material-ui/customization/palette/#adding-new-colors) of the components.
+**First**, you can use the [existing style mapping](/material-ui/customization/palette/#custom-colors) of the components.
 For example, you can add a new `neutral` color to the palette, and the Button computes the right derivative colors.
 
 ```jsx
diff --git a/docs/pages/blog/mui-next-js-app-router.md b/docs/pages/blog/mui-next-js-app-router.md
index 14e0c82e37e9e8..6009c20979156a 100644
--- a/docs/pages/blog/mui-next-js-app-router.md
+++ b/docs/pages/blog/mui-next-js-app-router.md
@@ -33,9 +33,9 @@ Additionally, we've created guides to walk you through setting up an app using t
 
 We also have example repos for each, with everything already set up for you:
 
-- [Material UI example](https://github.com/mui/material-ui/blob/master/examples/material-next-app-router-ts)
-- [Base UI with Tailwind CSS example](https://github.com/mui/material-ui/blob/master/examples/base-next-app-router-tailwind-ts)
-- [Joy UI example](https://github.com/mui/material-ui/blob/master/examples/joy-next-app-router-ts)
+- [Material UI example](https://github.com/mui/material-ui/tree/master/examples/material-next-app-router-ts)
+- [Base UI with Tailwind CSS example](https://github.com/mui/material-ui/tree/master/examples/base-next-app-router-tailwind-ts)
+- [Joy UI example](https://github.com/mui/material-ui/tree/master/examples/joy-next-app-router-ts)
 
 ## What comes next
 
diff --git a/docs/pages/material-ui.tsx b/docs/pages/material-ui.tsx
index 3d1f57f20b0706..256114ddf3db3e 100644
--- a/docs/pages/material-ui.tsx
+++ b/docs/pages/material-ui.tsx
@@ -17,7 +17,7 @@ export default function Core() {
     <BrandingCssVarsProvider>
       <Head
         title="Material UI: React components based on Material Design"
-        description="Material UI is an open-source React component library that implements Google's Material Design. It's comprehensive and can be used in production right out of the box."
+        description="Material UI is an open-source React component library that implements Google's Material Design. It's comprehensive and can be used in production out of the box."
         card="/static/social-previews/core-preview.jpg"
       />
       <AppHeaderBanner />
diff --git a/docs/public/static/blog/2023-toolpad-beta-announcement/card.png b/docs/public/static/blog/2023-toolpad-beta-announcement/card.png
index d0db45023561cf..2a5c4b00b1b467 100644
Binary files a/docs/public/static/blog/2023-toolpad-beta-announcement/card.png and b/docs/public/static/blog/2023-toolpad-beta-announcement/card.png differ
diff --git a/docs/public/static/blog/2023-toolpad-beta-announcement/code.png b/docs/public/static/blog/2023-toolpad-beta-announcement/code.png
index a10d527ccc3977..ac04e57d0735e3 100644
Binary files a/docs/public/static/blog/2023-toolpad-beta-announcement/code.png and b/docs/public/static/blog/2023-toolpad-beta-announcement/code.png differ
diff --git a/docs/public/static/blog/2023-toolpad-beta-announcement/docs.png b/docs/public/static/blog/2023-toolpad-beta-announcement/docs.png
index 2d2ff05c928d5d..e5679e368c617b 100644
Binary files a/docs/public/static/blog/2023-toolpad-beta-announcement/docs.png and b/docs/public/static/blog/2023-toolpad-beta-announcement/docs.png differ
diff --git a/docs/public/static/blog/2023-toolpad-beta-announcement/drag.png b/docs/public/static/blog/2023-toolpad-beta-announcement/drag.png
index da65c17fd15371..59f266cfc08533 100644
Binary files a/docs/public/static/blog/2023-toolpad-beta-announcement/drag.png and b/docs/public/static/blog/2023-toolpad-beta-announcement/drag.png differ
diff --git a/docs/public/static/blog/2023-toolpad-beta-announcement/intro.png b/docs/public/static/blog/2023-toolpad-beta-announcement/intro.png
index 0381bcb4125046..904d4957a6c277 100644
Binary files a/docs/public/static/blog/2023-toolpad-beta-announcement/intro.png and b/docs/public/static/blog/2023-toolpad-beta-announcement/intro.png differ
diff --git a/docs/public/static/blog/2023-toolpad-beta-announcement/library.png b/docs/public/static/blog/2023-toolpad-beta-announcement/library.png
index 2fef43b4dbd40e..86b7d452ef87ef 100644
Binary files a/docs/public/static/blog/2023-toolpad-beta-announcement/library.png and b/docs/public/static/blog/2023-toolpad-beta-announcement/library.png differ
diff --git a/docs/public/static/blog/2023-toolpad-beta-announcement/personas.png b/docs/public/static/blog/2023-toolpad-beta-announcement/personas.png
index d41dd3d0f83159..628fa099217e15 100644
Binary files a/docs/public/static/blog/2023-toolpad-beta-announcement/personas.png and b/docs/public/static/blog/2023-toolpad-beta-announcement/personas.png differ
diff --git a/docs/public/static/blog/2023-toolpad-beta-announcement/toolpad.png b/docs/public/static/blog/2023-toolpad-beta-announcement/toolpad.png
index bd12f3eea3c0a0..ce1514b1476603 100644
Binary files a/docs/public/static/blog/2023-toolpad-beta-announcement/toolpad.png and b/docs/public/static/blog/2023-toolpad-beta-announcement/toolpad.png differ
diff --git a/docs/public/static/blog/2023-toolpad-beta-announcement/uiquery.png b/docs/public/static/blog/2023-toolpad-beta-announcement/uiquery.png
index 3571e369987628..cf9e99ff142a30 100644
Binary files a/docs/public/static/blog/2023-toolpad-beta-announcement/uiquery.png and b/docs/public/static/blog/2023-toolpad-beta-announcement/uiquery.png differ
diff --git a/docs/public/static/blog/mui-next-js-app-router/card.png b/docs/public/static/blog/mui-next-js-app-router/card.png
index eda9eed820e92d..6fffa52c61af71 100644
Binary files a/docs/public/static/blog/mui-next-js-app-router/card.png and b/docs/public/static/blog/mui-next-js-app-router/card.png differ
diff --git a/docs/public/static/blog/mui-next-js-app-router/docs.png b/docs/public/static/blog/mui-next-js-app-router/docs.png
index dcb0c689302d25..5feda4dd836de0 100644
Binary files a/docs/public/static/blog/mui-next-js-app-router/docs.png and b/docs/public/static/blog/mui-next-js-app-router/docs.png differ
diff --git a/docs/public/static/blog/mui-next-js-app-router/logos.png b/docs/public/static/blog/mui-next-js-app-router/logos.png
index 202cc17e8b73c0..1c6f636cc8051c 100644
Binary files a/docs/public/static/blog/mui-next-js-app-router/logos.png and b/docs/public/static/blog/mui-next-js-app-router/logos.png differ
diff --git a/docs/public/static/blog/mui-product-comparison/ecosystem.png b/docs/public/static/blog/mui-product-comparison/ecosystem.png
index e6011ee8cf3adc..3a9b68a29c5a62 100644
Binary files a/docs/public/static/blog/mui-product-comparison/ecosystem.png and b/docs/public/static/blog/mui-product-comparison/ecosystem.png differ
diff --git a/docs/public/static/blog/mui-product-comparison/mui-core.png b/docs/public/static/blog/mui-product-comparison/mui-core.png
index a8e0c63bfa479f..6035539afe7ecc 100644
Binary files a/docs/public/static/blog/mui-product-comparison/mui-core.png and b/docs/public/static/blog/mui-product-comparison/mui-core.png differ
diff --git a/docs/public/static/blog/mui-x-v6/birthday.png b/docs/public/static/blog/mui-x-v6/birthday.png
index 674b0bb1153f2f..f4d4cfb5018d55 100644
Binary files a/docs/public/static/blog/mui-x-v6/birthday.png and b/docs/public/static/blog/mui-x-v6/birthday.png differ
diff --git a/docs/public/static/blog/mui-x-v6/row-pinning.png b/docs/public/static/blog/mui-x-v6/row-pinning.png
index ebb9c7780aa9bf..30f10119261534 100644
Binary files a/docs/public/static/blog/mui-x-v6/row-pinning.png and b/docs/public/static/blog/mui-x-v6/row-pinning.png differ
diff --git a/docs/public/static/blog/v6-beta-pickers/date-range-shortcuts.png b/docs/public/static/blog/v6-beta-pickers/date-range-shortcuts.png
index 7afca92e0b78da..d9524ccdccfea0 100644
Binary files a/docs/public/static/blog/v6-beta-pickers/date-range-shortcuts.png and b/docs/public/static/blog/v6-beta-pickers/date-range-shortcuts.png differ
diff --git a/docs/public/static/branding/mui-x/chart-dark1.png b/docs/public/static/branding/mui-x/chart-dark1.png
index 1d9d153b2c6894..20546632336f4e 100644
Binary files a/docs/public/static/branding/mui-x/chart-dark1.png and b/docs/public/static/branding/mui-x/chart-dark1.png differ
diff --git a/docs/public/static/branding/mui-x/chart-dark2.png b/docs/public/static/branding/mui-x/chart-dark2.png
index fe31d6db7b0bcb..86a71206c342d1 100644
Binary files a/docs/public/static/branding/mui-x/chart-dark2.png and b/docs/public/static/branding/mui-x/chart-dark2.png differ
diff --git a/docs/public/static/branding/mui-x/chart-dark3.png b/docs/public/static/branding/mui-x/chart-dark3.png
index 336d5af9daae87..59e2f0f41bd1f0 100644
Binary files a/docs/public/static/branding/mui-x/chart-dark3.png and b/docs/public/static/branding/mui-x/chart-dark3.png differ
diff --git a/docs/public/static/branding/mui-x/chart-dark4.png b/docs/public/static/branding/mui-x/chart-dark4.png
index 2bb3d9fbbff02a..cfa52eefa07c7e 100644
Binary files a/docs/public/static/branding/mui-x/chart-dark4.png and b/docs/public/static/branding/mui-x/chart-dark4.png differ
diff --git a/docs/public/static/branding/mui-x/chart-light1.png b/docs/public/static/branding/mui-x/chart-light1.png
index fa42f7d6234a0e..4ba600e7960d35 100644
Binary files a/docs/public/static/branding/mui-x/chart-light1.png and b/docs/public/static/branding/mui-x/chart-light1.png differ
diff --git a/docs/public/static/branding/mui-x/chart-light2.png b/docs/public/static/branding/mui-x/chart-light2.png
index 18539ef377380d..5e6046d56e6171 100644
Binary files a/docs/public/static/branding/mui-x/chart-light2.png and b/docs/public/static/branding/mui-x/chart-light2.png differ
diff --git a/docs/public/static/branding/mui-x/chart-light3.png b/docs/public/static/branding/mui-x/chart-light3.png
index 92c24e25e48ee8..3ffb622496cdf4 100644
Binary files a/docs/public/static/branding/mui-x/chart-light3.png and b/docs/public/static/branding/mui-x/chart-light3.png differ
diff --git a/docs/public/static/branding/mui-x/chart-light4.png b/docs/public/static/branding/mui-x/chart-light4.png
index f19f816626c530..ee0074033faed7 100644
Binary files a/docs/public/static/branding/mui-x/chart-light4.png and b/docs/public/static/branding/mui-x/chart-light4.png differ
diff --git a/docs/scripts/formattedTSDemos.js b/docs/scripts/formattedTSDemos.js
index 86245e2f386a88..8ceb23451f18cb 100644
--- a/docs/scripts/formattedTSDemos.js
+++ b/docs/scripts/formattedTSDemos.js
@@ -13,6 +13,7 @@ const ignoreList = [
   '/pages.ts',
   'docs/data/joy/getting-started/templates',
   'docs/data/base/components/select/UnstyledSelectIntroduction.tsx',
+  'docs/data/material/customization/palette',
 ];
 
 const fse = require('fs-extra');
diff --git a/docs/src/components/action/Highlighter.tsx b/docs/src/components/action/Highlighter.tsx
index d937173ea83bde..59a3702ca3ae76 100644
--- a/docs/src/components/action/Highlighter.tsx
+++ b/docs/src/components/action/Highlighter.tsx
@@ -15,9 +15,10 @@ export default function Highlighter({
   const ref = React.useRef<null | HTMLButtonElement>(null);
   return (
     <ButtonBase
+      component="span"
       ref={ref}
       {...props}
-      onClick={(event) => {
+      onClick={(event: any) => {
         if (ref.current) {
           ref.current.scrollIntoView({ block: 'nearest' });
         }
diff --git a/docs/src/components/header/HeaderNavDropdown.tsx b/docs/src/components/header/HeaderNavDropdown.tsx
index 637165e365fac9..ebdd3593a8d9ce 100644
--- a/docs/src/components/header/HeaderNavDropdown.tsx
+++ b/docs/src/components/header/HeaderNavDropdown.tsx
@@ -79,7 +79,7 @@ const PRODUCTS = [
     name: 'MUI Toolpad',
     description: 'Low-code admin builder.',
     href: ROUTES.productToolpad,
-    chip: 'Alpha',
+    chip: 'Beta',
   },
 ];
 
diff --git a/docs/src/components/home/GoldSponsors.tsx b/docs/src/components/home/GoldSponsors.tsx
index da279a59da1c44..74b2f1b2d752ac 100644
--- a/docs/src/components/home/GoldSponsors.tsx
+++ b/docs/src/components/home/GoldSponsors.tsx
@@ -16,8 +16,7 @@ const GOLDs = [
     srcSet: '/static/sponsors/tidelift.svg',
     name: 'Tidelift',
     description: 'Enterprise-ready open-source software.',
-    // Tidelift requests this format.
-    href: 'https://tidelift.com/?utm_source=npm-material-ui&utm_medium=referral&utm_campaign=homepage',
+    href: 'https://www.tidelift.com/subscription/pkg/npm-material-ui?utm_source=npm-material-ui&utm_medium=referral&utm_campaign=homepage',
   },
   {
     src: 'https://avatars.githubusercontent.com/u/1262264?size=40',
diff --git a/docs/src/components/home/HeroEnd.tsx b/docs/src/components/home/HeroEnd.tsx
index 3349c5af88a6f2..fafe468f4f849e 100644
--- a/docs/src/components/home/HeroEnd.tsx
+++ b/docs/src/components/home/HeroEnd.tsx
@@ -26,7 +26,7 @@ export default function HeroEnd() {
         ...theme.applyDarkStyles({
           background: `linear-gradient(180deg, ${
             (theme.vars || theme).palette.primaryDark[800]
-          } 50%, 
+          } 50%,
           ${alpha(theme.palette.primary[900], 0.2)} 100%)
           `,
         }),
diff --git a/docs/src/components/home/ProductsSwitcher.tsx b/docs/src/components/home/ProductsSwitcher.tsx
index 6f4736d135bcf1..5ecac474c8eb46 100644
--- a/docs/src/components/home/ProductsSwitcher.tsx
+++ b/docs/src/components/home/ProductsSwitcher.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
 import dynamic from 'next/dynamic';
 import { Theme } from '@mui/material/styles';
 import Box from '@mui/material/Box';
+import { visuallyHidden } from '@mui/utils';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import Typography from '@mui/material/Typography';
 import Stack from '@mui/material/Stack';
@@ -14,13 +15,13 @@ import ROUTES from 'docs/src/route';
 const SwipeableViews = dynamic(() => import('react-swipeable-views'), { ssr: false });
 
 function ProductItem({
-  'aria-label': label,
+  label,
   icon,
   name,
   description,
   href,
 }: {
-  'aria-label': string;
+  label: string;
   icon: React.ReactNode;
   name: React.ReactNode;
   description: React.ReactNode;
@@ -64,7 +65,6 @@ function ProductItem({
           color="primary"
           variant="body2"
           fontWeight="bold"
-          aria-label={label}
           sx={{
             display: 'inline-flex',
             alignItems: 'center',
@@ -76,7 +76,7 @@ function ProductItem({
             event.stopPropagation();
           }}
         >
-          <span>Learn more</span>{' '}
+          <span>Learn more</span> <Box sx={visuallyHidden}>{label}</Box>
           <KeyboardArrowRightRounded fontSize="small" sx={{ mt: '1px', ml: '2px' }} />
         </Link>
       </span>
@@ -96,14 +96,14 @@ function ProductsSwitcher({
   const isBelowMd = useMediaQuery((theme: Theme) => theme.breakpoints.down('md'));
   const productElements = [
     <ProductItem
-      aria-label="Go to core components page"
+      label="by going to the Core components page"
       icon={<IconImage name="product-core" />}
       name="MUI Core"
       description="Foundational components for shipping features faster. Includes Material UI."
       href={ROUTES.productCore}
     />,
     <ProductItem
-      aria-label="Go to advanced components page"
+      label="by going to the Advanced components page"
       icon={<IconImage name="product-advanced" />}
       name={
         <Box component="span" display="inline-flex" alignItems="center">
@@ -114,14 +114,14 @@ function ProductsSwitcher({
       href={ROUTES.productAdvanced}
     />,
     <ProductItem
-      aria-label="Go to templates page"
+      label="by going to the templates page"
       icon={<IconImage name="product-templates" />}
       name="Templates"
       description="Professionally designed UI layouts to jumpstart your next project."
       href={ROUTES.productTemplates}
     />,
     <ProductItem
-      aria-label="Go to design-kits page"
+      label="by going to the design-kits page"
       icon={<IconImage name="product-designkits" />}
       name="Design kits"
       description="Bring our components to your favorite design tool."
diff --git a/docs/src/components/pricing/LicensingModelWidget.tsx b/docs/src/components/pricing/LicensingModelSwitch.tsx
similarity index 98%
rename from docs/src/components/pricing/LicensingModelWidget.tsx
rename to docs/src/components/pricing/LicensingModelSwitch.tsx
index e678fce0b0faa8..31b6de8026463f 100644
--- a/docs/src/components/pricing/LicensingModelWidget.tsx
+++ b/docs/src/components/pricing/LicensingModelSwitch.tsx
@@ -90,7 +90,7 @@ const tooltipProps = {
   },
 };
 
-export default function LicenseModelWidget() {
+export default function LicensingModelSwitch() {
   const { licensingModel, setLicensingModel } = useLicensingModel();
 
   const handleChange = (event: React.SyntheticEvent, newValue: number) => {
diff --git a/docs/src/components/pricing/PricingTable.tsx b/docs/src/components/pricing/PricingTable.tsx
index 745ab46582298b..bae6c8b46db814 100644
--- a/docs/src/components/pricing/PricingTable.tsx
+++ b/docs/src/components/pricing/PricingTable.tsx
@@ -14,7 +14,7 @@ import Link from 'docs/src/modules/components/Link';
 import IconImage from 'docs/src/components/icon/IconImage';
 import LaunchRounded from '@mui/icons-material/LaunchRounded';
 import UnfoldMoreRounded from '@mui/icons-material/UnfoldMoreRounded';
-import LicenseModelWidget from 'docs/src/components/pricing/LicensingModelWidget';
+import LicensingModelSwitch from 'docs/src/components/pricing/LicensingModelSwitch';
 import { useLicensingModel } from 'docs/src/components/pricing/LicensingModelContext';
 
 const planInfo = {
@@ -132,7 +132,7 @@ export function PlanPrice(props: PlanPriceProps) {
 
     return (
       <React.Fragment>
-        <LicenseModelWidget />
+        <LicensingModelSwitch />
         <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', mt: 1, mb: 4 }}>
           <Typography variant="h3" component="div" fontWeight="bold" color="primary.main">
             {formatCurrency(mainDisplayValue)}
@@ -171,7 +171,7 @@ export function PlanPrice(props: PlanPriceProps) {
 
   return (
     <React.Fragment>
-      <LicenseModelWidget />
+      <LicensingModelSwitch />
       <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', mt: 1, mb: 4 }}>
         <Typography
           variant="body2"
@@ -1229,12 +1229,12 @@ export default function PricingTable({
         <RowCategory>Row features</RowCategory>
         {renderRow('data-grid/row-height')}
         {nestedDivider}
+        {renderRow('data-grid/row-spanning')}
+        {nestedDivider}
         {renderRow('data-grid/row-reordering')}
         {nestedDivider}
         {renderRow('data-grid/row-pinning')}
         {nestedDivider}
-        {renderRow('data-grid/row-spanning')}
-        {nestedDivider}
         <RowCategory>Selection features</RowCategory>
         {renderRow('data-grid/row-selection')}
         {nestedDivider}
@@ -1271,12 +1271,12 @@ export default function PricingTable({
         {nestedDivider}
         {renderRow('data-grid/file-print')}
         {nestedDivider}
-        {renderRow('data-grid/file-excel')}
-        {nestedDivider}
         {renderRow('data-grid/file-clipboard-copy')}
         {nestedDivider}
         {renderRow('data-grid/file-clipboard-paste')}
         {nestedDivider}
+        {renderRow('data-grid/file-excel')}
+        {nestedDivider}
         <RowCategory>Rendering features</RowCategory>
         {renderRow('data-grid/customizable-components')}
         {nestedDivider}
diff --git a/docs/src/components/pricing/PricingWhatToExpect.tsx b/docs/src/components/pricing/PricingWhatToExpect.tsx
index 38c9e2c761f5ee..eaffbfa7838be5 100644
--- a/docs/src/components/pricing/PricingWhatToExpect.tsx
+++ b/docs/src/components/pricing/PricingWhatToExpect.tsx
@@ -82,7 +82,7 @@ export default function PricingWhatToExpect() {
             Upon expiration, you can renew your maintenance plan with a discount that depends on
             when you renew:
             <ul>
-              <li>before the suppord expires: 50% discount</li>
+              <li>before the support expires: 50% discount</li>
               <li>up to 60 days after the support has expired: 25% discount</li>
               <li>more than 60 days after the support has expired: 15% discount</li>
             </ul>
diff --git a/docs/src/components/productBaseUI/BaseUIComponents.tsx b/docs/src/components/productBaseUI/BaseUIComponents.tsx
index 28c7b4274b974f..88b07591d1edb3 100644
--- a/docs/src/components/productBaseUI/BaseUIComponents.tsx
+++ b/docs/src/components/productBaseUI/BaseUIComponents.tsx
@@ -155,16 +155,17 @@ export default function BaseUIComponents() {
                 height: 360,
                 position: 'relative',
                 overflow: 'hidden',
+                p: 0,
                 pt: 5,
               }}
             >
               <Box
                 sx={{
-                  height: 'calc(100% + 40px)',
                   overflow: 'auto',
-                  m: -2,
-                  p: 2,
-                  pt: 3,
+                  pt: 2,
+                  pb: 1,
+                  px: 2,
+                  height: '100%',
                 }}
               >
                 <HighlightedCode
diff --git a/docs/src/components/productBaseUI/BaseUICustomization.tsx b/docs/src/components/productBaseUI/BaseUICustomization.tsx
index cfb49dc21faeb5..b4182adb2f14e9 100644
--- a/docs/src/components/productBaseUI/BaseUICustomization.tsx
+++ b/docs/src/components/productBaseUI/BaseUICustomization.tsx
@@ -20,7 +20,7 @@ import MarkdownElement from 'docs/src/components/markdown/MarkdownElement';
 const code = `
 import clsx from 'clsx';
 import { styled } from '@mui/system';
-import SwitchUnstyled from '@mui/base/SwitchUnstyled';
+import SwitchUnstyled from '@mui/base/Switch';
 import useSwitch from '@mui/base/useSwitch';
 
 const StyledSwitchRoot = styled('span')(\`
@@ -112,6 +112,9 @@ function App() {
         input: StyledSwitchInput,
         thumb: StyledSwitchThumb,
       }}
+      slotProps={{
+        input: { 'aria-label': 'Demo switch' },
+      }}
     />
     <SwitchFromHook />
   )
@@ -276,6 +279,9 @@ export default function BaseUICustomization() {
                   input: StyledSwitchInput,
                   thumb: StyledSwitchThumb,
                 }}
+                slotProps={{
+                  input: { 'aria-label': 'Demo switch' },
+                }}
               />
               <SwitchFromHook defaultChecked />
             </Frame.Demo>
diff --git a/docs/src/components/productBaseUI/BaseUIHero.tsx b/docs/src/components/productBaseUI/BaseUIHero.tsx
index 677cd098bf1402..1562161ac1b286 100644
--- a/docs/src/components/productBaseUI/BaseUIHero.tsx
+++ b/docs/src/components/productBaseUI/BaseUIHero.tsx
@@ -38,6 +38,7 @@ export default function BaseUIHero() {
     <HeroContainer
       linearGradient
       disableMobileHidden
+      disableTabExclusion
       left={
         <Box sx={{ textAlign: { xs: 'center', md: 'left' }, ml: { xl: '-40px' } }}>
           <Typography
@@ -95,7 +96,8 @@ export default function BaseUIHero() {
           sx={{
             position: 'relative',
             height: '100%',
-            padding: '16px',
+            py: { xs: 9, sm: 2 },
+            px: 2,
             display: 'flex',
             '& > div': { margin: 'auto' },
           }}
diff --git a/docs/src/components/productBaseUI/BaseUITestimonial.tsx b/docs/src/components/productBaseUI/BaseUITestimonial.tsx
index d5e89e74fa203d..c63bf5e968bd7c 100644
--- a/docs/src/components/productBaseUI/BaseUITestimonial.tsx
+++ b/docs/src/components/productBaseUI/BaseUITestimonial.tsx
@@ -63,7 +63,10 @@ export default function BaseUITestimonial() {
           </Typography>
           <Divider />
           <Box sx={{ display: 'flex', gap: 1 }}>
-            <Avatar src="https://media.licdn.com/dms/image/C4D03AQHm6cbz2UDXpw/profile-displayphoto-shrink_800_800/0/1642674447256?e=2147483647&v=beta&t=L8g2vW_8mG8AvB3lwui0CT8969_Cx9QQ0iJXIS47i0o" />
+            <Avatar
+              alt=""
+              src="https://media.licdn.com/dms/image/C4D03AQHm6cbz2UDXpw/profile-displayphoto-shrink_800_800/0/1642674447256?e=2147483647&v=beta&t=L8g2vW_8mG8AvB3lwui0CT8969_Cx9QQ0iJXIS47i0o"
+            />
             <Box sx={{ flex: 1 }}>
               <Typography variant="body2" fontWeight={600}>
                 Szilárd Dóró
diff --git a/docs/src/components/productBaseUI/BaseUIThemesDemo.tsx b/docs/src/components/productBaseUI/BaseUIThemesDemo.tsx
index 5eb9fb61d7bb36..b7aa9446cbe9db 100644
--- a/docs/src/components/productBaseUI/BaseUIThemesDemo.tsx
+++ b/docs/src/components/productBaseUI/BaseUIThemesDemo.tsx
@@ -87,6 +87,7 @@ const StyledTabsList = styled('div')({
 const StyledTab = styled('button')({
   display: 'flex',
   alignItems: 'center',
+  cursor: 'pointer',
   justifyContent: 'center',
   gap: 6,
   position: 'relative',
@@ -121,6 +122,7 @@ const StyledTab = styled('button')({
 
 const StyledSelectButton = styled('button')({
   width: '100%',
+  cursor: 'pointer',
   maxWidth: '100%',
   minHeight: 'calc(2 * var(--border-width, 0px) + 37px)',
   border: 'var(--border-width, 1px) solid',
@@ -655,11 +657,12 @@ const StyledMenuListbox = styled('ul')(`
   box-shadow: var(--Panel-shadow);
   `);
 
-const StyledMenuButton = styled(Button)`
-  padding: 0;
-  border: none;
-  background: transparent;
-`;
+const StyledMenuButton = styled(Button)({
+  padding: 0,
+  cursor: 'pointer',
+  border: 'none',
+  background: 'transparent',
+});
 
 const snackbarInRight = keyframes`
   from {
@@ -1005,13 +1008,13 @@ export default function BaseUIThemesDemo() {
             />
           </Box>
           <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
-            <StyledParagraph id="make-it-your-own">Use every component</StyledParagraph>
+            <StyledParagraph id="use-every-component">Use every component</StyledParagraph>
             <Switch
               slots={{
                 root: StyledSwitch,
               }}
               slotProps={{
-                input: { 'aria-labelledby': 'Use every component' },
+                input: { 'aria-labelledby': 'use-every-component' },
               }}
             />
           </Box>
diff --git a/docs/src/components/productBaseUI/components/BaseButtonDemo.tsx b/docs/src/components/productBaseUI/components/BaseButtonDemo.tsx
index 40f3730c129a9b..35bddfa6a9f36c 100644
--- a/docs/src/components/productBaseUI/components/BaseButtonDemo.tsx
+++ b/docs/src/components/productBaseUI/components/BaseButtonDemo.tsx
@@ -31,7 +31,8 @@ const buttonStyles = `
   &.Mui-disabled {
     opacity: 0.5;
     cursor: not-allowed;
-  }`;
+  }
+`;
 
 const StyledButton = styled('button')(buttonStyles);
 
@@ -61,7 +62,7 @@ export default function BaseButtonDemo({
       )}
       {styling === 'css' && (
         <React.Fragment>
-          <GlobalStyles styles={`.MuiButton-root{${buttonStyles}}`} />
+          <GlobalStyles styles={`.MuiButton-root {${buttonStyles}}`} />
           <Button>Button</Button>
           <Button disabled>Disabled</Button>
         </React.Fragment>
@@ -87,14 +88,14 @@ BaseButtonDemo.getCode = (styling?: 'system' | 'tailwindcss' | 'css') => {
     return `import Button from '@mui/base/Button';
 import { styled } from '@mui/system';
 
-const StyledButton = styled('button')\`/* CSS… */\`;
+const StyledButton = styled('button')\`${buttonStyles}\`;
 
 <Button slots={{ root: StyledButton }}>Button</Button>
 <Button slots={{ root: StyledButton }}>Disabled</Button>
 `;
   }
   if (styling === 'css') {
-    return `import Button from '@mui/base/Button
+    return `import Button from '@mui/base/Button';
 import './styles.css';
 
 <Button>Button</Button>
@@ -105,28 +106,28 @@ import './styles.css';
 `;
   }
   if (styling === 'tailwindcss') {
-    return `import Button from '@mui/base/Button
+    return `import Button from '@mui/base/Button';
 
 <Button
   className="transition-all-[150ms_ease] cursor-pointer
-              rounded-[8px] border-none bg-[--palette-primary]
-              p-[10px_16px] text-[0.875rem] font-bold 
-              text-white [font-family:IBM_Plex_sans] 
-              hover:bg-[--palette-primary-hover]
-              shadow-[--shadow]
-              ui-active:bg-[--palette-primary-dark] 
-              ui-disabled:cursor-not-allowed ui-disabled:opacity-50 
-              ui-focus-visible:[outline:4px_solid_var(--focus-ring) transition">
+    rounded-[8px] border-none bg-[--palette-primary]
+    p-[10px_16px] text-[0.875rem] font-bold 
+    text-white [font-family:IBM_Plex_sans] 
+    hover:bg-[--palette-primary-hover]
+    shadow-[--shadow]
+    ui-active:bg-[--palette-primary-dark] 
+    ui-disabled:cursor-not-allowed ui-disabled:opacity-50 
+    ui-focus-visible:[outline:4px_solid_var(--focus-ring) transition">
   Button
 </Button>
 <Button
   className="transition-all-[150ms_ease] cursor-pointer
-              rounded-[8px] border-none bg-[--palette-primary]
-              p-[10px_16px] text-[0.875rem] font-bold 
-              text-white [font-family:IBM_Plex_sans] 
-              ui-active:bg-[--palette-primary-dark] 
-              ui-disabled:cursor-not-allowed ui-disabled:opacity-50 
-              ui-focus-visible:[outline:4px_solid_var(--focus-ring)]">
+    rounded-[8px] border-none bg-[--palette-primary]
+    p-[10px_16px] text-[0.875rem] font-bold 
+    text-white [font-family:IBM_Plex_sans] 
+    ui-active:bg-[--palette-primary-dark] 
+    ui-disabled:cursor-not-allowed ui-disabled:opacity-50 
+    ui-focus-visible:[outline:4px_solid_var(--focus-ring)]">
   Disabled
 </Button>`;
   }
diff --git a/docs/src/components/productBaseUI/components/BaseInputDemo.tsx b/docs/src/components/productBaseUI/components/BaseInputDemo.tsx
index 63efd57caf5bc1..be58b088173c91 100644
--- a/docs/src/components/productBaseUI/components/BaseInputDemo.tsx
+++ b/docs/src/components/productBaseUI/components/BaseInputDemo.tsx
@@ -65,7 +65,8 @@ const fieldStyles = `
       border-color: var(--palette-primary);
       outline-color: var(--focus-ring);
     }
-  }`;
+  }
+`;
 const Field = styled('div')(fieldStyles);
 
 const inputStyles = `
@@ -85,12 +86,13 @@ const inputStyles = `
   &:focus ~ label {
     transform: translateY(-100%) scale(var(--TextInput-labelScale));
     font-weight: 600;
-  }`;
+  }
+`;
 const StyledInput = styled('input')(inputStyles);
 
-const CSS = `.MuiInput-root{${fieldStyles}}
+const CSS = `.MuiInput-root {${fieldStyles}}
 
-.MuiInput-input{${inputStyles}}`;
+.MuiInput-input {${inputStyles}}`;
 
 const StyledFloatingLabelInput = React.forwardRef<HTMLInputElement, JSX.IntrinsicElements['input']>(
   function StyledFloatingLabelInput(props, ref) {
@@ -134,8 +136,8 @@ const TailwindFloatingLabelInput = React.forwardRef<
         id={id}
       />
       <label
-        className="pointer-events-none absolute left-[0.75rem] top-[50%] flex origin-[0_0] translate-y-[-100%] scale-[--TextInput-labelScale] transform items-center overflow-hidden whitespace-nowrap text-start font-[500] leading-[--TextInput-labelLineHeight] text-[--muidocs-palette-grey-600] transition-transform duration-100 ease-out peer-placeholder-shown:translate-y-[-50%] peer-placeholder-shown:scale-100 peer-placeholder-shown:transform peer-focus:translate-y-[-100%] peer-focus:scale-[--TextInput-labelScale] peer-focus:transform peer-focus:text-[--palette-primary] "
         htmlFor={id}
+        className="pointer-events-none absolute left-[0.75rem] top-[50%] flex origin-[0_0] translate-y-[-100%] scale-[--TextInput-labelScale] transform items-center overflow-hidden whitespace-nowrap text-start font-[500] leading-[--TextInput-labelLineHeight] text-[--muidocs-palette-grey-600] transition-transform duration-100 ease-out peer-placeholder-shown:translate-y-[-50%] peer-placeholder-shown:scale-100 peer-placeholder-shown:transform peer-focus:translate-y-[-100%] peer-focus:scale-[--TextInput-labelScale] peer-focus:transform peer-focus:text-[--palette-primary] "
       >
         Floating label
       </label>
@@ -184,11 +186,13 @@ export default function BaseInputDemo({ styling }: { styling?: 'system' | 'tailw
 BaseInputDemo.getCode = (styling?: 'system' | 'tailwindcss' | 'css') => {
   if (styling === 'system') {
     return `import Input from '@mui/base/Input';
-    
+
 const Field = styled('div')\`${fieldStyles}\`;
 const StyledInput = styled('input')\`${inputStyles}/\`;
 
-const FloatingLabelInput = React.forwardRef<HTMLInputElement, JSX.IntrinsicElements['input']>(
+const FloatingLabelInput = React.forwardRef<
+  HTMLInputElement, JSX.IntrinsicElements['input']
+>(
   function FloatingLabelInput(props, ref) {
     const id = unstable_useId(props.id);
     return (
@@ -213,7 +217,9 @@ const FloatingLabelInput = React.forwardRef<HTMLInputElement, JSX.IntrinsicEleme
     return `import Input from '@mui/base/Input';
 import './styles.css';
 
-const FloatingLabelInput = React.forwardRef<HTMLInputElement, JSX.IntrinsicElements['input']>(
+const FloatingLabelInput = React.forwardRef<
+  HTMLInputElement, JSX.IntrinsicElements['input']
+>(
   function FloatingLabelInput(props, ref) {
     const id = unstable_useId(props.id);
     return (
@@ -247,29 +253,29 @@ const FloatingLabelInput = React.forwardRef(
         ref={ref}
         {...props}
         className={clsx(
-          'peer h-full flex-1 border-none bg-transparent 
+          \`peer h-full flex-1 border-none bg-transparent 
           px-3 pb-[0.75rem] pt-[--TextInput-paddingTop] 
           font-sans text-base placeholder-transparent 
-          focus:outline-none focus:ring-0',
+          focus:outline-none focus:ring-0\`,
           props.className,
         )}
         id={id}
       />
       <label
-        className="pointer-events-none absolute left-[0.75rem] 
-        top-[50%] flex origin-[0_0] translate-y-[-100%] 
-        scale-[--TextInput-labelScale] transform items-center 
-        overflow-hidden whitespace-nowrap text-start font-[500] 
-        leading-[--TextInput-labelLineHeight] 
-        text-[--muidocs-palette-grey-600] transition-transform 
-        duration-100 ease-out 
-        peer-placeholder-shown:translate-y-[-50%] 
-        peer-placeholder-shown:scale-100 
-        peer-placeholder-shown:transform 
-        peer-focus:translate-y-[-100%] 
-        peer-focus:scale-[--TextInput-labelScale] 
-        peer-focus:transform peer-focus:text-[--palette-primary]"
         htmlFor={id}
+        className="pointer-events-none absolute left-[0.75rem] 
+          top-[50%] flex origin-[0_0] translate-y-[-100%] 
+          scale-[--TextInput-labelScale] transform items-center 
+          overflow-hidden whitespace-nowrap text-start font-[500] 
+          leading-[--TextInput-labelLineHeight] 
+          text-[--muidocs-palette-grey-600] transition-transform 
+          duration-100 ease-out 
+          peer-placeholder-shown:translate-y-[-50%] 
+          peer-placeholder-shown:scale-100 
+          peer-placeholder-shown:transform 
+          peer-focus:translate-y-[-100%] 
+          peer-focus:scale-[--TextInput-labelScale] 
+          peer-focus:transform peer-focus:text-[--palette-primary]"
       >
         Floating label
       </label>
@@ -279,21 +285,21 @@ const FloatingLabelInput = React.forwardRef(
 
 <InputUnstyled
   placeholder="Type something here"
-  className=" relative inline-flex h-[--TextInput-height] w-[320px] 
-  rounded-[--muidocs-shape-borderRadius] border border-solid 
-  border-[--muidocs-palette-grey-300] 
-  bg-[--muidocs-palette-background-paper] 
-  p-[0px_0.75rem] [box-shadow:var(--shadow)] 
-  outline-transparent [--TextInput-height:64px] 
-  [--TextInput-labelLineHeight:20px] [--TextInput-labelScale:0.75] 
-  [--TextInput-paddingTop:2rem] 
-  focus-within:!border-[--palette-primary] 
-  focus-within:[outline:3px_solid_var(--focus-ring)] 
-  hover:border-[--muidocs-palette-grey-400] dark:border-transparent 
-  dark:shadow-[0_2px_4px_0_rgba(0_0_0/0.8)] 
-  dark:focus-within:!border-[--palette-primary] 
-  dark:focus-within:[outline:3px_solid_var(--focus-ring)] 
-  dark:hover:border-[--muidocs-palette-grey-700]"
+  className="relative inline-flex h-[--TextInput-height] w-[320px] 
+    rounded-[--muidocs-shape-borderRadius] border border-solid 
+    border-[--muidocs-palette-grey-300] 
+    bg-[--muidocs-palette-background-paper] 
+    p-[0px_0.75rem] [box-shadow:var(--shadow)] 
+    outline-transparent [--TextInput-height:64px] 
+    [--TextInput-labelLineHeight:20px] [--TextInput-labelScale:0.75] 
+    [--TextInput-paddingTop:2rem] 
+    focus-within:!border-[--palette-primary] 
+    focus-within:[outline:3px_solid_var(--focus-ring)] 
+    hover:border-[--muidocs-palette-grey-400] dark:border-transparent 
+    dark:shadow-[0_2px_4px_0_rgba(0_0_0/0.8)] 
+    dark:focus-within:!border-[--palette-primary] 
+    dark:focus-within:[outline:3px_solid_var(--focus-ring)] 
+    dark:hover:border-[--muidocs-palette-grey-700]"
   slots={{ input: FloatingLabelInput }}
 />
 `;
diff --git a/docs/src/components/productBaseUI/components/BaseMenuDemo.tsx b/docs/src/components/productBaseUI/components/BaseMenuDemo.tsx
index 5338feec9ed323..723079355f312e 100644
--- a/docs/src/components/productBaseUI/components/BaseMenuDemo.tsx
+++ b/docs/src/components/productBaseUI/components/BaseMenuDemo.tsx
@@ -48,11 +48,13 @@ const buttonStyles = `
     &:hover {
       background: var(--muidocs-palette-primaryDark-800);
     }
-  }`;
+  }
+`;
 const StyledMenuButton = styled('button')(buttonStyles);
 
 const popperStyles = `
-  z-index: 1000;`;
+  z-index: 1000;
+`;
 const StyledPopper = styled(PopperUnstyled)(popperStyles);
 
 const listboxStyles = `
@@ -69,7 +71,8 @@ const listboxStyles = `
   :where([data-mui-color-scheme='dark']) & {
     border-color: var(--muidocs-palette-primaryDark-700);
     box-shadow: 0px 4px 40px rgba(0, 0, 0, 0.5);
-  }`;
+  }
+`;
 const StyledListbox = styled('ul')(listboxStyles);
 
 const menuItemStyles = `
@@ -97,16 +100,17 @@ const menuItemStyles = `
       background: var(--muidocs-palette-primaryDark-700);
       border-color: var(--muidocs-palette-primaryDark-500);
     }
-  }`;
+  }
+`;
 const StyledMenuItem = styled('li')(menuItemStyles);
 
-const CSS = `.Mui-base.MuiButton-root{${buttonStyles}};
+const CSS = `.Mui-base.MuiButton-root {${buttonStyles}}
 
-.Mui-base.MuiMenu-root{${popperStyles}};
+.Mui-base.MuiMenu-root {${popperStyles}}
 
-.Mui-base.MuiMenu-listbox{${listboxStyles}};
+.Mui-base.MuiMenu-listbox {${listboxStyles}}
 
-.Mui-base.MuiMenuItem-root{${menuItemStyles}};`;
+.Mui-base.MuiMenuItem-root {${menuItemStyles}}`;
 
 export default function BaseMenuDemo({ styling }: { styling?: 'system' | 'tailwindcss' | 'css' }) {
   const [buttonElement, setButtonElement] = React.useState<HTMLButtonElement | null>(null);
@@ -380,19 +384,19 @@ function Demo() {
     setButtonElement(node);
   }, []);
   return (
-    <>
+    <React.Fragment>
       <ButtonUnstyled
         className="min-h-[calc(1.5em + 22px)] inline-flex 
-        items-center gap-[0.5rem] rounded-[8px] border 
-        border-solid border-[--muidocs-palette-grey-200] 
-        bg-[--muidocs-palette-background-paper] 
-        p-[8px_12px_8px_6px] text-[0.875rem] 
-        leading-[1.5] transition-all [font-family:IBM_Plex_sans] 
-        [box-shadow:var(--shadow)]
-        hover:bg-[--muidocs-palette-grey-50] 
-        ui-focus-visible:[outline:3px_solid_var(--focus-ring)]
-        dark:border-[--muidocs-palette-primaryDark-700] 
-        dark:hover:bg-[--muidocs-palette-primaryDark-800]"
+          items-center gap-[0.5rem] rounded-[8px] border 
+          border-solid border-[--muidocs-palette-grey-200] 
+          bg-[--muidocs-palette-background-paper] 
+          p-[8px_12px_8px_6px] text-[0.875rem] 
+          leading-[1.5] transition-all [font-family:IBM_Plex_sans] 
+          [box-shadow:var(--shadow)]
+          hover:bg-[--muidocs-palette-grey-50] 
+          ui-focus-visible:[outline:3px_solid_var(--focus-ring)]
+          dark:border-[--muidocs-palette-primaryDark-700] 
+          dark:hover:bg-[--muidocs-palette-primaryDark-800]"
         type="button"
         onClick={handleButtonClick}
         onKeyDown={handleButtonKeyDown}
@@ -417,63 +421,62 @@ function Demo() {
           root: { placement: 'top', className: 'z-[1000]' },
           listbox: {
             id: 'simple-menu',
-            className:
-              'mx-0 my-[8px] p-[4px] flex flex-col rounded-[8px] 
+            className: \`mx-0 my-[8px] p-[4px] flex flex-col rounded-[8px] 
               border border-solid border-[--muidocs-palette-grey-200] 
               bg-[--muidocs-palette-background-paper] 
               shadow-[0px_4px_40px_rgba(62,80,96,0.1)] 
               dark:border-[--muidocs-palette-primaryDark-700] 
-              dark:shadow-[0px_4px_40px_rgba(11,13,14,0.5)]',
+              dark:shadow-[0px_4px_40px_rgba(11,13,14,0.5)]\`,
           },
         }}
       >
         <MenuItemUnstyled
           className="hover:color-[--muidocs-palette-text-primary] 
-          flex min-h-[24px] items-center gap-[4px] rounded-[4px] 
-          border border-solid border-transparent px-[12px] 
-          py-[6px] hover:cursor-default 
-          hover:border-[--muidocs-palette-grey-100] 
-          hover:bg-[--muidocs-palette-grey-50] 
-          ui-focus-visible:cursor-default 
-          ui-focus-visible:border-[--muidocs-palette-grey-100] 
-          ui-focus-visible:bg-[--muidocs-palette-grey-50] 
-          ui-focus-visible:outline-none"
+            flex min-h-[24px] items-center gap-[4px] rounded-[4px] 
+            border border-solid border-transparent px-[12px] 
+            py-[6px] hover:cursor-default 
+            hover:border-[--muidocs-palette-grey-100] 
+            hover:bg-[--muidocs-palette-grey-50] 
+            ui-focus-visible:cursor-default 
+            ui-focus-visible:border-[--muidocs-palette-grey-100] 
+            ui-focus-visible:bg-[--muidocs-palette-grey-50] 
+            ui-focus-visible:outline-none"
           onClick={createHandleMenuClick()}
         >
           Profile
         </MenuItemUnstyled>
         <MenuItemUnstyled
           className="hover:color-[--muidocs-palette-text-primary] 
-          flex min-h-[24px] items-center gap-[4px] rounded-[4px] 
-          border border-solid border-transparent px-[12px] 
-          py-[6px] hover:cursor-default 
-          hover:border-[--muidocs-palette-grey-100] 
-          hover:bg-[--muidocs-palette-grey-50] 
-          ui-focus-visible:cursor-default 
-          ui-focus-visible:border-[--muidocs-palette-grey-100] 
-          ui-focus-visible:bg-[--muidocs-palette-grey-50] 
-          ui-focus-visible:outline-none"
+            flex min-h-[24px] items-center gap-[4px] rounded-[4px] 
+            border border-solid border-transparent px-[12px] 
+            py-[6px] hover:cursor-default 
+            hover:border-[--muidocs-palette-grey-100] 
+            hover:bg-[--muidocs-palette-grey-50] 
+            ui-focus-visible:cursor-default 
+            ui-focus-visible:border-[--muidocs-palette-grey-100] 
+            ui-focus-visible:bg-[--muidocs-palette-grey-50] 
+            ui-focus-visible:outline-none"
           onClick={createHandleMenuClick()}
         >
           Language settings
         </MenuItemUnstyled>
         <MenuItemUnstyled
           className="hover:color-[--muidocs-palette-text-primary] 
-          flex min-h-[24px] items-center gap-[4px] rounded-[4px] 
-          border border-solid border-transparent px-[12px] 
-          py-[6px] hover:cursor-default 
-          hover:border-[--muidocs-palette-grey-100] 
-          hover:bg-[--muidocs-palette-grey-50] 
-          ui-focus-visible:cursor-default 
-          ui-focus-visible:border-[--muidocs-palette-grey-100] 
-          ui-focus-visible:bg-[--muidocs-palette-grey-50] 
-          ui-focus-visible:outline-none"
+            flex min-h-[24px] items-center gap-[4px] rounded-[4px] 
+            border border-solid border-transparent px-[12px] 
+            py-[6px] hover:cursor-default 
+            hover:border-[--muidocs-palette-grey-100] 
+            hover:bg-[--muidocs-palette-grey-50] 
+            ui-focus-visible:cursor-default 
+            ui-focus-visible:border-[--muidocs-palette-grey-100] 
+            ui-focus-visible:bg-[--muidocs-palette-grey-50] 
+            ui-focus-visible:outline-none"
           onClick={createHandleMenuClick()}
         >
           Log out
         </MenuItemUnstyled>
       </MenuUnstyled>
-    </>
+    </React.Fragment>
   )
 }
 `;
diff --git a/docs/src/components/productBaseUI/components/BaseSliderDemo.tsx b/docs/src/components/productBaseUI/components/BaseSliderDemo.tsx
index 6329053322e1e0..243409be9134ef 100644
--- a/docs/src/components/productBaseUI/components/BaseSliderDemo.tsx
+++ b/docs/src/components/productBaseUI/components/BaseSliderDemo.tsx
@@ -3,62 +3,64 @@ import Box from '@mui/material/Box';
 import Slider from '@mui/base/Slider';
 import { styled, GlobalStyles } from '@mui/system';
 
-const rootStyles = `color: var(--palette-primary);
-width: 100%;
-padding: 16px 0;
-display: inline-block;
-position: relative;
-cursor: pointer;
-touch-action: none;
--webkit-tap-highlight-color: transparent;
+const rootStyles = `
+  color: var(--palette-primary);
+  width: 100%;
+  padding: 16px 0;
+  display: inline-block;
+  position: relative;
+  cursor: pointer;
+  touch-action: none;
+  -webkit-tap-highlight-color: transparent;
 
-&:hover {
-  opacity: 1;
-}
+  &:hover {
+    opacity: 1;
+  }
 
-&.Mui-disabled {
-  pointer-events: none;
-  cursor: default;
-  color: var(--palette-primary);
-  opacity: 0.5;
-}
+  &.Mui-disabled {
+    pointer-events: none;
+    cursor: default;
+    color: var(--palette-primary);
+    opacity: 0.5;
+  }
 
-& .MuiSlider-rail {
-  display: block;
-  position: absolute;
-  width: 100%;
-  height: 4px;
-  border-radius: 2px;
-  background-color: currentColor;
-  opacity: 0.4;
-}
+  & .MuiSlider-rail {
+    display: block;
+    position: absolute;
+    width: 100%;
+    height: 4px;
+    border-radius: 2px;
+    background-color: currentColor;
+    opacity: 0.4;
+  }
 
-& .MuiSlider-track {
-  display: block;
-  position: absolute;
-  height: 4px;
-  border-radius: 2px;
-  background-color: currentColor;
-}
+  & .MuiSlider-track {
+    display: block;
+    position: absolute;
+    height: 4px;
+    border-radius: 2px;
+    background-color: currentColor;
+  }
 
-& .MuiSlider-thumb {
-  position: absolute;
-  width: 16px;
-  height: 16px;
-  margin-left: -6px;
-  margin-top: -6px;
-  box-sizing: border-box;
-  border-radius: 50%;
-  outline: 0;
-  border: 3px solid currentColor;
-  background-color: #fff;
+  & .MuiSlider-thumb {
+    position: absolute;
+    width: 16px;
+    height: 16px;
+    margin-left: -6px;
+    margin-top: -6px;
+    box-sizing: border-box;
+    border-radius: 50%;
+    outline: 0;
+    border: 3px solid currentColor;
+    background-color: #fff;
 
-  :hover,
-  &.Mui-focusVisible,
-  &.Mui-active {
-    box-shadow: 0 0 0 0.25rem var(--focus-ring);
+    &:hover,
+    &.Mui-focusVisible,
+    &.Mui-active {
+      box-shadow: 0 0 0 0.25rem var(--focus-ring);
+    }
   }
-}`;
+`;
 const StyledSlider = styled('span')(rootStyles);
 
 const CSS = `.MuiSlider-root {${rootStyles}}`;
@@ -144,7 +146,7 @@ BaseTabsDemo.getCode = (styling?: 'system' | 'tailwindcss' | 'css') => {
     return `import Slider from '@mui/base/Slider';
 import { styled } from '@mui/system';
 
-const StyledSlider = styled('span')\`${rootStyles}/\`;
+const StyledSlider = styled('span')\`${rootStyles}\`;
 
 <Slider
   defaultValue={10}
@@ -152,7 +154,7 @@ const StyledSlider = styled('span')\`${rootStyles}/\`;
 />
 <Slider
   disabled
-  defaultValue={10} 
+  defaultValue={10}
   slots={{ root: StyledSlider }}
 />
 `;
@@ -167,7 +169,7 @@ import './styles.css';
 />
 <Slider
   disabled
-  defaultValue={10} 
+  defaultValue={10}
   slots={{ root: StyledSlider }}
 />
 
@@ -177,13 +179,12 @@ ${CSS}
   }
   if (styling === 'tailwindcss') {
     return `import Slider from '@mui/base/Slider';
-    
+
 <Slider
   defaultValue={10}
   slotProps={{
     root: {
-      className:
-        'py-4 px-0 w-full relative 
+      className: \`py-4 px-0 w-full relative 
         cursor-pointer text-[--palette-primary] 
         touch-action-none tap-highlight-transparent 
         hover:opacity-100 
@@ -192,24 +193,22 @@ ${CSS}
         ui-disabled:opacity-50 
         ui-disabled:cursor-default 
         ui-disabled:text-[--palette-primary] 
-        ui-disabled:opacity-50',
+        ui-disabled:opacity-50\`,
     },
     rail: {
-      className: 'block absolute w-full h-[4px] 
-      rounded-[2px] bg-current opacity-40',
+      className: \`block absolute w-full h-[4px] rounded-[2px]
+        bg-current opacity-40\`,
     },
     track: {
-      className: 'block absolute h-[4px] 
-      rounded-[2px] bg-current',
+      className: \`block absolute h-[4px] rounded-[2px] bg-current\`,
     },
     thumb: {
-      className:
-        'absolute w-[16px] h-[16px] -ml-[6px] 
+      className: \`absolute w-[16px] h-[16px] -ml-[6px] 
         -mt-[6px] box-border rounded-[50%] 
         outline-none [border:3px_solid_currentcolor] 
         bg-white hover:shadow-[0_0_0_0.25rem_var(--focus-ring)] 
         ui-focus-visible:shadow-[0_0_0_0.25rem_var(--focus-ring)] 
-        ui-active:shadow-[0_0_0_0.25rem_var(--focus-ring)]',
+        ui-active:shadow-[0_0_0_0.25rem_var(--focus-ring)]\`,
     },
   }}
 />
@@ -218,8 +217,7 @@ ${CSS}
   defaultValue={10}
   slotProps={{
     root: {
-      className:
-        'py-4 px-0 w-full relative 
+      className: \`py-4 px-0 w-full relative 
         cursor-pointer text-[--palette-primary] 
         touch-action-none tap-highlight-transparent 
         hover:opacity-100 
@@ -228,24 +226,22 @@ ${CSS}
         ui-disabled:opacity-50 
         ui-disabled:cursor-default 
         ui-disabled:text-[--palette-primary] 
-        ui-disabled:opacity-50',
+        ui-disabled:opacity-50\`,
     },
     rail: {
-      className: 'block absolute w-full h-[4px] 
-      rounded-[2px] bg-current opacity-40',
+      className: \`block absolute w-full h-[4px] rounded-[2px]
+        bg-current opacity-40\`,
     },
     track: {
-      className: 'block absolute h-[4px] 
-      rounded-[2px] bg-current',
+      className: \`block absolute h-[4px] rounded-[2px] bg-current\`,
     },
     thumb: {
-      className:
-        'absolute w-[16px] h-[16px] -ml-[6px] 
+      className: \`absolute w-[16px] h-[16px] -ml-[6px] 
         -mt-[6px] box-border rounded-[50%] 
         outline-none [border:3px_solid_currentcolor] 
         bg-white hover:shadow-[0_0_0_0.25rem_var(--focus-ring)] 
         ui-focus-visible:shadow-[0_0_0_0.25rem_var(--focus-ring)] 
-        ui-active:shadow-[0_0_0_0.25rem_var(--focus-ring)]',
+        ui-active:shadow-[0_0_0_0.25rem_var(--focus-ring)]\`,
     },
   }}
 />`;
diff --git a/docs/src/components/productBaseUI/components/BaseTabsDemo.tsx b/docs/src/components/productBaseUI/components/BaseTabsDemo.tsx
index d7f0854acdbc9b..e4f25c116fe2bb 100644
--- a/docs/src/components/productBaseUI/components/BaseTabsDemo.tsx
+++ b/docs/src/components/productBaseUI/components/BaseTabsDemo.tsx
@@ -58,12 +58,11 @@ const tabStyles = `
 
 const StyledTab = styled('button')(tabStyles);
 
-const CSS = `
-.MuiTabsList-root{${tabListStyles}};
+const CSS = `.MuiTabsList-root {${tabListStyles}}
 
-.MuiTabPanel-root{${tabPanelStyles}};
+.MuiTabPanel-root {${tabPanelStyles}}
 
-.MuiTab-root{${tabStyles}}`;
+.MuiTab-root {${tabStyles}}`;
 
 export default function BaseTabsDemo({ styling }: { styling: 'system' | 'tailwindcss' | 'css' }) {
   return (
@@ -144,8 +143,10 @@ import TabUnstyled from '@mui/base/Tab';
 import { styled } from '@mui/system';
 
 const StyledTabsList = styled('div')\`${tabListStyles}\`;
+
 const StyledTabPanel = styled('div')\`${tabPanelStyles}\`;
-const StyledTab = styled('button')\`/${tabStyles}\`;
+
+const StyledTab = styled('button')\`${tabStyles}\`;
 
 <TabsUnstyled selectionFollowsFocus defaultValue={0}>
   <TabsListUnstyled slots={{ root: StyledTabsList }}>
@@ -174,54 +175,54 @@ import TabUnstyled from '@mui/base/Tab';
 <TabsUnstyled selectionFollowsFocus defaultValue={0}>
   <TabsListUnstyled
     className="mb-[16px] flex min-w-[300px] content-between 
-              items-center justify-center rounded-[12px] 
-              bg-[--palette-primary] [box-shadow:var(--shadow)]">
+      items-center justify-center rounded-[12px] 
+      bg-[--palette-primary] [box-shadow:var(--shadow)]">
     <TabUnstyled 
       className="m-[6px] flex w-full cursor-pointer 
-                justify-center rounded-[7px] border-none 
-                bg-transparent p-[12px] text-[0.875rem] 
-                font-bold text-white [font-family:IBM_Plex_sans] 
-                focus:text-white 
-                focus:[outline:3px_solid_var(--focus-ring)] 
-                ui-selected:bg-white 
-                ui-selected:text-[--palette-primary]">
+        justify-center rounded-[7px] border-none 
+        bg-transparent p-[12px] text-[0.875rem] 
+        font-bold text-white [font-family:IBM_Plex_sans] 
+        focus:text-white 
+        focus:[outline:3px_solid_var(--focus-ring)] 
+        ui-selected:bg-white 
+        ui-selected:text-[--palette-primary]">
       One
     </TabUnstyled>
     <TabUnstyled 
       className="m-[6px] flex w-full cursor-pointer 
-                justify-center rounded-[7px] border-none 
-                bg-transparent p-[12px] text-[0.875rem] 
-                font-bold text-white [font-family:IBM_Plex_sans] 
-                focus:text-white 
-                focus:[outline:3px_solid_var(--focus-ring)] 
-                ui-selected:bg-white 
-                ui-selected:text-[--palette-primary]">
+        justify-center rounded-[7px] border-none 
+        bg-transparent p-[12px] text-[0.875rem] 
+        font-bold text-white [font-family:IBM_Plex_sans] 
+        focus:text-white 
+        focus:[outline:3px_solid_var(--focus-ring)] 
+        ui-selected:bg-white 
+        ui-selected:text-[--palette-primary]">
       Two
     </TabUnstyled>
     <TabUnstyled 
       className="m-[6px] flex w-full cursor-pointer 
-                justify-center rounded-[7px] border-none 
-                bg-transparent p-[12px] text-[0.875rem] 
-                font-bold text-white [font-family:IBM_Plex_sans] 
-                focus:text-white 
-                focus:[outline:3px_solid_var(--focus-ring)] 
-                ui-selected:bg-white 
-                ui-selected:text-[--palette-primary]">
+        justify-center rounded-[7px] border-none 
+        bg-transparent p-[12px] text-[0.875rem] 
+        font-bold text-white [font-family:IBM_Plex_sans] 
+        focus:text-white 
+        focus:[outline:3px_solid_var(--focus-ring)] 
+        ui-selected:bg-white 
+        ui-selected:text-[--palette-primary]">
       Three
     </TabUnstyled>
   </TabsListUnstyled>
-  <TabPanelUnstyled 
-    className="text-[0.875rem] [font-family:IBM_Plex_sans]" 
+  <TabPanelUnstyled
+    className="text-[0.875rem] [font-family:IBM_Plex_sans]"
     value={0}>
     First page
   </TabPanelUnstyled>
-  <TabPanelUnstyled 
-    className="text-[0.875rem] [font-family:IBM_Plex_sans]" 
+  <TabPanelUnstyled
+    className="text-[0.875rem] [font-family:IBM_Plex_sans]"
     value={1}>
     Second page
   </TabPanelUnstyled>
-  <TabPanelUnstyled 
-    className="text-[0.875rem] [font-family:IBM_Plex_sans]" 
+  <TabPanelUnstyled
+    className="text-[0.875rem] [font-family:IBM_Plex_sans]"
     value={2}>
     Third page
   </TabPanelUnstyled>
@@ -254,7 +255,7 @@ import './styles.css';
 
 /* styles.css */
 ${CSS}
-    `;
+`;
   }
   return '';
 };
diff --git a/docs/src/components/productCore/CoreHero.tsx b/docs/src/components/productCore/CoreHero.tsx
index 0a1789e390bd6a..569ea94e531e1f 100644
--- a/docs/src/components/productCore/CoreHero.tsx
+++ b/docs/src/components/productCore/CoreHero.tsx
@@ -11,7 +11,7 @@ export default function CoreHero() {
       <Box
         sx={{
           pt: { xs: 6, sm: 8, md: 12 },
-          pb: { xs: 3, sm: 4, md: 8 },
+          pb: { xs: 3, md: 1 },
           display: 'flex',
           flexDirection: 'column',
           justifyContent: 'center',
@@ -35,8 +35,9 @@ export default function CoreHero() {
         >
           <IconImage width={28} height={28} name="product-core" /> MUI Core
         </Typography>
-        <Typography variant="h2" sx={{ maxWidth: 700, textAlign: 'center' }} gutterBottom>
-          Ready to use components,
+        <Typography component="h1" variant="h2" sx={{ textAlign: 'center' }} gutterBottom>
+          Ready to use components
+          <br />
           <GradientText>free forever</GradientText>
         </Typography>
         <Typography color="text.secondary" textAlign="center" sx={{ maxWidth: 550 }}>
diff --git a/docs/src/components/productMaterial/MaterialComponents.tsx b/docs/src/components/productMaterial/MaterialComponents.tsx
index 51deed92906245..c7d19955ed1b1a 100644
--- a/docs/src/components/productMaterial/MaterialComponents.tsx
+++ b/docs/src/components/productMaterial/MaterialComponents.tsx
@@ -82,7 +82,7 @@ const CODES = {
 `,
   Table: `
 <TableContainer
-  component={Paper} 
+  component={Paper}
   variant="outlined"
 >
   <Table aria-label="demo table">
@@ -320,14 +320,23 @@ export default function MaterialComponents() {
             </Frame.Demo>
             <Frame.Info
               sx={{
-                minHeight: 200,
+                minHeight: 180,
                 maxHeight: demo === 'Table' ? 260 : 'none',
                 position: 'relative',
                 overflow: 'hidden',
+                p: 0,
                 pt: 5,
               }}
             >
-              <Box sx={{ height: 'calc(100% + 40px)', overflow: 'auto', m: -2, p: 2, pt: 3 }}>
+              <Box
+                sx={{
+                  overflow: 'auto',
+                  pt: 2,
+                  pb: 1,
+                  px: 2,
+                  height: '100%',
+                }}
+              >
                 <HighlightedCode
                   copyButtonHidden
                   component={MarkdownElement}
diff --git a/docs/src/components/productX/XChartsDemo.tsx b/docs/src/components/productX/XChartsDemo.tsx
new file mode 100644
index 00000000000000..8b37d8f9326617
--- /dev/null
+++ b/docs/src/components/productX/XChartsDemo.tsx
@@ -0,0 +1,92 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import Grid from '@mui/material/Grid';
+import Chip from '@mui/material/Chip';
+import { alpha, styled } from '@mui/material/styles';
+import { shouldForwardProp } from '@mui/system';
+import Frame from 'docs/src/components/action/Frame';
+import Typography from '@mui/material/Typography';
+import Button from '@mui/material/Button';
+
+const AspectRatioImage = styled('div', {
+  shouldForwardProp: (prop) => shouldForwardProp(prop) && prop !== 'src' && prop !== 'ratio',
+})<{ ratio: number; src: string }>(({ src, ratio, theme }) => ({
+  height: 0,
+  backgroundImage: `url(${src})`,
+  backgroundRepeat: 'no-repeat',
+  backgroundSize: 'contain',
+  paddingBottom: `${(1 / ratio) * 100}%`,
+  margin: 'auto',
+  ...theme.applyDarkStyles({
+    backgroundImage: `url(${src.replace('-light', '-dark')})`,
+  }),
+}));
+
+export default function XChartsDemo() {
+  return (
+    <Frame sx={{ height: '100%' }}>
+      <Frame.Demo sx={{ p: 2, flexGrow: 1 }}>
+        <Grid container spacing={1} justifyContent="center">
+          <Grid item xs={6}>
+            <Box sx={{ width: { xs: 200, sm: '100%' }, maxWidth: '100%', ml: 'auto' }}>
+              <AspectRatioImage src="/static/branding/mui-x/chart-light1.png" ratio={219 / 120} />
+            </Box>
+          </Grid>
+          <Grid item xs={6}>
+            <Box sx={{ width: { xs: 200, sm: '100%' }, maxWidth: '100%', mr: 'auto' }}>
+              <AspectRatioImage src="/static/branding/mui-x/chart-light2.png" ratio={219 / 120} />
+            </Box>
+          </Grid>
+          <Grid item xs={6}>
+            <Box sx={{ width: { xs: 200, sm: '100%' }, maxWidth: '100%', ml: 'auto' }}>
+              <AspectRatioImage src="/static/branding/mui-x/chart-light3.png" ratio={219 / 120} />
+            </Box>
+          </Grid>
+          <Grid item xs={6}>
+            <Box sx={{ width: { xs: 200, sm: '100%' }, maxWidth: '100%', mr: 'auto' }}>
+              <AspectRatioImage src="/static/branding/mui-x/chart-light4.png" ratio={219 / 120} />
+            </Box>
+          </Grid>
+        </Grid>
+      </Frame.Demo>
+      <Frame.Info data-mui-color-scheme="dark">
+        <Box
+          sx={{
+            display: 'flex',
+            alignItems: 'center',
+            lineHeight: 1,
+            mb: 0.5,
+          }}
+        >
+          <Typography variant="body2" fontWeight="bold" sx={{ mr: 1 }}>
+            Experiment with Charts now!
+          </Typography>
+          <Chip
+            variant="outlined"
+            label="Alpha"
+            color="warning"
+            size="small"
+            sx={(theme) => ({
+              pb: 0.2,
+              fontWeight: theme.typography.fontWeightSemiBold,
+              color: (theme.vars || theme).palette.warning[300],
+              borderColor: alpha(theme.palette.warning[300], 0.3),
+              background: alpha(theme.palette.warning[800], 0.3),
+            })}
+          />
+        </Box>
+        <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
+          Using D3.js for data manipulation and SVG for rendering, Charts are coming to MUI X!
+        </Typography>
+        <Button
+          variant="outlined"
+          href="/x/react-charts/"
+          component="a"
+          sx={{ mt: { xs: 2, sm: 0 }, color: 'primary.300' }}
+        >
+          View the documentation
+        </Button>
+      </Frame.Info>
+    </Frame>
+  );
+}
diff --git a/docs/src/components/productX/XComponents.tsx b/docs/src/components/productX/XComponents.tsx
index faffe750c04cca..f46555e673a724 100644
--- a/docs/src/components/productX/XComponents.tsx
+++ b/docs/src/components/productX/XComponents.tsx
@@ -1,10 +1,7 @@
 import * as React from 'react';
-import { shouldForwardProp } from '@mui/system';
-import { styled } from '@mui/material/styles';
 import Box from '@mui/material/Box';
 import Fade from '@mui/material/Fade';
 import Grid from '@mui/material/Grid';
-import Chip from '@mui/material/Chip';
 import Typography from '@mui/material/Typography';
 import Section from 'docs/src/layouts/Section';
 import SectionHeadline from 'docs/src/components/typography/SectionHeadline';
@@ -19,28 +16,14 @@ import BarChartRounded from '@mui/icons-material/BarChartRounded';
 import XGridFullDemo from 'docs/src/components/productX/XGridFullDemo';
 import XDateRangeDemo from 'docs/src/components/productX/XDateRangeDemo';
 import XTreeViewDemo from 'docs/src/components/productX/XTreeViewDemo';
+import XChartsDemo from 'docs/src/components/productX/XChartsDemo';
+import XSparklineDemo from 'docs/src/components/productX/XSparklineDemo';
 import More from 'docs/src/components/action/More';
 import ROUTES from 'docs/src/route';
-import EmailSubscribe from 'docs/src/components/footer/EmailSubscribe';
-import Frame from 'docs/src/components/action/Frame';
 import IconImage from 'docs/src/components/icon/IconImage';
 
-const DEMOS = ['Data Grid', 'Date Range Picker', 'Tree View', 'Sparkline', 'Charts'];
-const WIP = DEMOS.slice(2);
-
-const AspectRatioImage = styled('div', {
-  shouldForwardProp: (prop) => shouldForwardProp(prop) && prop !== 'src' && prop !== 'ratio',
-})<{ ratio: number; src: string }>(({ src, ratio, theme }) => ({
-  height: 0,
-  backgroundImage: `url(${src})`,
-  backgroundRepeat: 'no-repeat',
-  backgroundSize: 'contain',
-  paddingBottom: `${(1 / ratio) * 100}%`,
-  margin: 'auto',
-  ...theme.applyDarkStyles({
-    backgroundImage: `url(${src.replace('-light', '-dark')})`,
-  }),
-}));
+const DEMOS = ['Data Grid', 'Date Range Picker', 'Charts', 'Tree View', 'Sparkline'];
+const WIP = DEMOS.slice(4);
 
 function PrefetchImages() {
   function makeImg(component: 'sparkline' | 'chart', mode: string, num: number) {
@@ -82,9 +65,9 @@ export default function XComponents() {
   const icons = {
     [DEMOS[0]]: <TableChartRounded fontSize="small" />,
     [DEMOS[1]]: <DateRangeRounded fontSize="small" />,
-    [DEMOS[2]]: <AccountTreeRounded fontSize="small" />,
-    [DEMOS[3]]: <ShowChartRounded fontSize="small" />,
-    [DEMOS[4]]: <BarChartRounded fontSize="small" />,
+    [DEMOS[2]]: <BarChartRounded fontSize="small" />,
+    [DEMOS[3]]: <AccountTreeRounded fontSize="small" />,
+    [DEMOS[4]]: <ShowChartRounded fontSize="small" />,
   };
   return (
     <Section bg="gradient">
@@ -130,101 +113,24 @@ export default function XComponents() {
             </Fade>
           )}
           {demo === DEMOS[2] && (
+            <Fade in timeout={500}>
+              <div>
+                <XChartsDemo />
+              </div>
+            </Fade>
+          )}
+          {demo === DEMOS[3] && (
             <Fade in timeout={500}>
               <div>
                 <XTreeViewDemo />
               </div>
             </Fade>
           )}
-          {(demo === DEMOS[3] || demo === DEMOS[4]) && (
+          {demo === DEMOS[4] && (
             <Fade in timeout={500}>
-              <Box sx={{ height: '100%' }}>
-                <Frame sx={{ height: '100%' }}>
-                  <Frame.Demo sx={{ p: 2, flexGrow: 1 }}>
-                    {demo === DEMOS[3] && (
-                      <Grid container justifyContent="space-around" spacing={1}>
-                        <Grid item xs={6}>
-                          <Box sx={{ maxWidth: 200, ml: 'auto' }}>
-                            <AspectRatioImage
-                              src="/static/branding/mui-x/sparkline-light1.png"
-                              ratio={211 / 220}
-                            />
-                          </Box>
-                        </Grid>
-                        <Grid item xs={6}>
-                          <Box sx={{ maxWidth: 200, mr: 'auto' }}>
-                            <AspectRatioImage
-                              src="/static/branding/mui-x/sparkline-light2.png"
-                              ratio={211 / 220}
-                            />
-                          </Box>
-                        </Grid>
-                      </Grid>
-                    )}
-                    {demo === DEMOS[4] && (
-                      <Grid container spacing={1} justifyContent="center">
-                        <Grid item xs={6}>
-                          <Box sx={{ width: { xs: 200, sm: 240 }, maxWidth: '100%', ml: 'auto' }}>
-                            <AspectRatioImage
-                              src="/static/branding/mui-x/chart-light1.png"
-                              ratio={219 / 120}
-                            />
-                          </Box>
-                        </Grid>
-                        <Grid item xs={6}>
-                          <Box sx={{ width: { xs: 200, sm: 240 }, maxWidth: '100%', mr: 'auto' }}>
-                            <AspectRatioImage
-                              src="/static/branding/mui-x/chart-light2.png"
-                              ratio={219 / 120}
-                            />
-                          </Box>
-                        </Grid>
-                        <Grid item xs={6}>
-                          <Box sx={{ width: { xs: 200, sm: 240 }, maxWidth: '100%', ml: 'auto' }}>
-                            <AspectRatioImage
-                              src="/static/branding/mui-x/chart-light3.png"
-                              ratio={219 / 120}
-                            />
-                          </Box>
-                        </Grid>
-                        <Grid item xs={6}>
-                          <Box sx={{ width: { xs: 200, sm: 240 }, maxWidth: '100%', mr: 'auto' }}>
-                            <AspectRatioImage
-                              src="/static/branding/mui-x/chart-light4.png"
-                              ratio={219 / 120}
-                            />
-                          </Box>
-                        </Grid>
-                      </Grid>
-                    )}
-                  </Frame.Demo>
-                  <Frame.Info data-mui-color-scheme="dark">
-                    <Box
-                      sx={{
-                        display: 'flex',
-                        alignItems: 'center',
-                        lineHeight: 1,
-                        mb: 0.5,
-                      }}
-                    >
-                      <Typography variant="body2" fontWeight="bold" sx={{ mr: 1 }}>
-                        Coming soon!
-                      </Typography>
-                      <Chip
-                        variant="outlined"
-                        label="PNG Preview"
-                        size="small"
-                        sx={{ fontWeight: 500 }}
-                      />
-                    </Box>
-                    <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
-                      Subscribe to our newsletter to get first-hand info about the development and
-                      release of new components.
-                    </Typography>
-                    <EmailSubscribe />
-                  </Frame.Info>
-                </Frame>
-              </Box>
+              <div>
+                <XSparklineDemo />
+              </div>
             </Fade>
           )}
         </Grid>
diff --git a/docs/src/components/productX/XDateRangeDemo.tsx b/docs/src/components/productX/XDateRangeDemo.tsx
index 2ae8d2a49d1400..10b9ef1da0f243 100644
--- a/docs/src/components/productX/XDateRangeDemo.tsx
+++ b/docs/src/components/productX/XDateRangeDemo.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { alpha } from '@mui/material/styles';
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
 import Paper from '@mui/material/Paper';
@@ -46,20 +47,21 @@ function CustomRangeShortcuts(props: PickersShortcutsProps<DateRange<Date>>) {
       }}
     >
       <List
-        dense
-        sx={(theme) => ({
+        sx={{
           display: 'flex',
-          px: theme.spacing(4),
+          py: 1.5,
+          px: 1.5,
+          gap: 1.5,
           '& .MuiListItem-root': {
-            py: 2,
-            pr: theme.spacing(1),
+            p: 0,
+            width: 'fit-content',
           },
-        })}
+        }}
       >
         {resolvedItems.map((item) => {
           return (
             <ListItem key={item.label}>
-              <Chip {...item} />
+              <Chip size="small" {...item} />
             </ListItem>
           );
         })}
@@ -127,6 +129,10 @@ export default function XDateRangeDemo() {
                 lineHeight: 0,
                 margin: 0,
               },
+              '& .MuiPickersArrowSwitcher-root': {
+                padding: 0,
+                paddingTop: 0.5,
+              },
               '& .MuiPickersDay-root': {
                 width: 28,
                 height: 28,
@@ -162,21 +168,38 @@ export default function XDateRangeDemo() {
           sx={{
             display: 'flex',
             alignItems: 'center',
-            justifyContent: 'space-between',
+            lineHeight: 1,
+            mb: 0.5,
           }}
         >
           <Typography variant="body2" fontWeight="bold" sx={{ mr: 1 }}>
-            🎉&nbsp;&nbsp;&nbsp;Stable version available now for your project!
+            Date Range Picker now available for your project!
           </Typography>
-          <Button
+          <Chip
             variant="outlined"
-            href="/x/react-date-pickers/date-range-picker/"
-            component="a"
-            sx={{ mt: { xs: 2, sm: 0 }, color: 'primary.300' }}
-          >
-            View more demos
-          </Button>
+            label="Available now"
+            color="success"
+            size="small"
+            sx={(theme) => ({
+              pb: 0.2,
+              fontWeight: theme.typography.fontWeightSemiBold,
+              color: (theme.vars || theme).palette.success[300],
+              borderColor: alpha(theme.palette.success[300], 0.3),
+              background: alpha(theme.palette.success[800], 0.3),
+            })}
+          />
         </Box>
+        <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
+          A thorough and advanced stable implementation of a long-requested component!
+        </Typography>
+        <Button
+          variant="outlined"
+          href="/x/react-date-pickers/date-range-picker/"
+          component="a"
+          sx={{ mt: { xs: 2, sm: 0 }, color: 'primary.300' }}
+        >
+          View the documentation
+        </Button>
       </Frame.Info>
     </Frame>
   );
diff --git a/docs/src/components/productX/XGridFullDemo.tsx b/docs/src/components/productX/XGridFullDemo.tsx
index b742e3088a3646..c356bae596553d 100644
--- a/docs/src/components/productX/XGridFullDemo.tsx
+++ b/docs/src/components/productX/XGridFullDemo.tsx
@@ -228,7 +228,7 @@ export default function XGridFullDemo() {
           />
         </Paper>
       </Frame.Demo>
-      <Frame.Info data-mui-color-scheme="dark" sx={{ pl: 1, pr: 2, py: 2 }}>
+      <Frame.Info data-mui-color-scheme="dark" sx={{ pl: 1, pr: 2, py: 1.5 }}>
         <SettingsPanel onApply={handleApplyClick} size={size} type={type} />
       </Frame.Info>
     </Frame>
diff --git a/docs/src/components/productX/XSparklineDemo.tsx b/docs/src/components/productX/XSparklineDemo.tsx
new file mode 100644
index 00000000000000..62e8f9c0c49952
--- /dev/null
+++ b/docs/src/components/productX/XSparklineDemo.tsx
@@ -0,0 +1,72 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import Grid from '@mui/material/Grid';
+import Typography from '@mui/material/Typography';
+import Chip from '@mui/material/Chip';
+import EmailSubscribe from 'docs/src/components/footer/EmailSubscribe';
+import Frame from 'docs/src/components/action/Frame';
+import { styled } from '@mui/material/styles';
+import { shouldForwardProp } from '@mui/system';
+
+const AspectRatioImage = styled('div', {
+  shouldForwardProp: (prop) => shouldForwardProp(prop) && prop !== 'src' && prop !== 'ratio',
+})<{ ratio: number; src: string }>(({ src, ratio, theme }) => ({
+  height: 0,
+  backgroundImage: `url(${src})`,
+  backgroundRepeat: 'no-repeat',
+  backgroundSize: 'contain',
+  paddingBottom: `${(1 / ratio) * 100}%`,
+  margin: 'auto',
+  ...theme.applyDarkStyles({
+    backgroundImage: `url(${src.replace('-light', '-dark')})`,
+  }),
+}));
+
+export default function XSparklineDemo() {
+  return (
+    <Box sx={{ height: '100%' }}>
+      <Frame sx={{ height: '100%' }}>
+        <Frame.Demo sx={{ p: 2, flexGrow: 1 }}>
+          <Grid container justifyContent="space-around" spacing={1}>
+            <Grid item xs={6}>
+              <Box sx={{ maxWidth: 200, ml: 'auto' }}>
+                <AspectRatioImage
+                  src="/static/branding/mui-x/sparkline-light1.png"
+                  ratio={211 / 220}
+                />
+              </Box>
+            </Grid>
+            <Grid item xs={6}>
+              <Box sx={{ maxWidth: 200, mr: 'auto' }}>
+                <AspectRatioImage
+                  src="/static/branding/mui-x/sparkline-light2.png"
+                  ratio={211 / 220}
+                />
+              </Box>
+            </Grid>
+          </Grid>
+        </Frame.Demo>
+        <Frame.Info data-mui-color-scheme="dark">
+          <Box
+            sx={{
+              display: 'flex',
+              alignItems: 'center',
+              lineHeight: 1,
+              mb: 0.5,
+            }}
+          >
+            <Typography variant="body2" fontWeight="bold" sx={{ mr: 1 }}>
+              Coming soon!
+            </Typography>
+            <Chip variant="outlined" label="PNG Preview" size="small" sx={{ fontWeight: 500 }} />
+          </Box>
+          <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
+            Subscribe to our newsletter to get first-hand info about the development and release of
+            new components.
+          </Typography>
+          <EmailSubscribe />
+        </Frame.Info>
+      </Frame>
+    </Box>
+  );
+}
diff --git a/docs/src/components/productX/XTreeViewDemo.tsx b/docs/src/components/productX/XTreeViewDemo.tsx
index ca0ae17ea70488..b5c367e61bc8ef 100644
--- a/docs/src/components/productX/XTreeViewDemo.tsx
+++ b/docs/src/components/productX/XTreeViewDemo.tsx
@@ -1,8 +1,9 @@
 import * as React from 'react';
 import clsx from 'clsx';
-import { styled } from '@mui/material/styles';
+import { styled, alpha } from '@mui/material/styles';
 import Box from '@mui/material/Box';
 import Paper from '@mui/material/Paper';
+import Chip from '@mui/material/Chip';
 import TreeView from '@mui/lab/TreeView';
 import MuiTreeItem, { useTreeItem, TreeItemProps, TreeItemContentProps } from '@mui/lab/TreeItem';
 import Typography from '@mui/material/Typography';
@@ -286,26 +287,44 @@ export default function XDateRangeDemo() {
           </TreeView>
         </Paper>
       </Frame.Demo>
+
       <Frame.Info data-mui-color-scheme="dark">
         <Box
           sx={{
             display: 'flex',
             alignItems: 'center',
-            justifyContent: 'space-between',
+            lineHeight: 1,
+            mb: 0.5,
           }}
         >
           <Typography variant="body2" fontWeight="bold" sx={{ mr: 1 }}>
-            🧪&nbsp;&nbsp;&nbsp;Experiment with the lab version now!
+            Experiment with the Tree View now!
           </Typography>
-          <Button
+          <Chip
             variant="outlined"
-            href="/material-ui/react-tree-view"
-            component="a"
-            sx={{ color: 'primary.300', flexShrink: 0 }}
-          >
-            View more demos
-          </Button>
+            label="Labs"
+            color="primary"
+            size="small"
+            sx={(theme) => ({
+              pb: 0.2,
+              fontWeight: theme.typography.fontWeightSemiBold,
+              color: (theme.vars || theme).palette.primary[300],
+              borderColor: alpha(theme.palette.primary[300], 0.3),
+              background: alpha(theme.palette.primary[800], 0.3),
+            })}
+          />
         </Box>
+        <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
+          Play with the component and let us know what you think!
+        </Typography>
+        <Button
+          variant="outlined"
+          href="/material-ui/react-tree-view"
+          component="a"
+          sx={{ mt: { xs: 2, sm: 0 }, color: 'primary.300' }}
+        >
+          View the documentation
+        </Button>
       </Frame.Info>
     </Frame>
   );
diff --git a/docs/src/layouts/AppFooter.tsx b/docs/src/layouts/AppFooter.tsx
index 73be4e2e72edf6..35d91653e8e8f1 100644
--- a/docs/src/layouts/AppFooter.tsx
+++ b/docs/src/layouts/AppFooter.tsx
@@ -37,7 +37,8 @@ export default function AppFooter(props: AppFooterProps) {
           gridTemplateColumns: { xs: '1fr', sm: '1fr', md: '1fr 1.75fr', lg: '1fr 1fr' },
           gridTemplateRows: 'auto',
           '& a:not(.MuiIconButton-root)': {
-            mt: 1,
+            pt: 0.5,
+            pb: 0.5,
             color: 'text.secondary',
             typography: 'body2',
             '&:hover': {
@@ -65,7 +66,7 @@ export default function AppFooter(props: AppFooterProps) {
           }}
         >
           <Box sx={{ display: 'flex', flexDirection: 'column' }}>
-            <Typography fontWeight="bold" variant="body2">
+            <Typography fontWeight="bold" variant="body2" sx={{ mb: 0.5 }}>
               Products
             </Typography>
             <Link href={ROUTES.productMaterial}>Material UI</Link>
@@ -76,7 +77,7 @@ export default function AppFooter(props: AppFooterProps) {
             <Link href={ROUTES.productToolpad}>MUI Toolpad</Link>
           </Box>
           <Box sx={{ display: 'flex', flexDirection: 'column' }}>
-            <Typography fontWeight="bold" variant="body2">
+            <Typography fontWeight="bold" variant="body2" sx={{ mb: 0.5 }}>
               Resources
             </Typography>
             <Link href={ROUTES.materialIcons}>Material Icons</Link>
@@ -86,7 +87,7 @@ export default function AppFooter(props: AppFooterProps) {
             <Link href={ROUTES.theming}>Theming</Link>
           </Box>
           <Box sx={{ display: 'flex', flexDirection: 'column' }}>
-            <Typography fontWeight="bold" variant="body2">
+            <Typography fontWeight="bold" variant="body2" sx={{ mb: 0.5 }}>
               Explore
             </Typography>
             <Link href={ROUTES.documentation}>Documentation</Link>
@@ -96,7 +97,7 @@ export default function AppFooter(props: AppFooterProps) {
             <Link href={ROUTES.roadmap}>Roadmap</Link>
           </Box>
           <Box sx={{ display: 'flex', flexDirection: 'column' }}>
-            <Typography fontWeight="bold" variant="body2">
+            <Typography fontWeight="bold" variant="body2" sx={{ mb: 0.5 }}>
               Company
             </Typography>
             <Link href={ROUTES.about}>About</Link>
@@ -109,6 +110,8 @@ export default function AppFooter(props: AppFooterProps) {
                   py: 0.1,
                   ml: 1,
                   mb: '1px',
+                  position: 'relative',
+                  top: theme.spacing(-0.5),
                   fontSize: theme.typography.pxToRem(10),
                   fontWeight: 'Bold',
                   textTransform: 'uppercase',
diff --git a/docs/src/layouts/HeroContainer.tsx b/docs/src/layouts/HeroContainer.tsx
index 78e79122a7617c..a7349e519b8716 100644
--- a/docs/src/layouts/HeroContainer.tsx
+++ b/docs/src/layouts/HeroContainer.tsx
@@ -1,32 +1,35 @@
 import * as React from 'react';
 import Box, { BoxProps } from '@mui/material/Box';
 import Container from '@mui/material/Container';
-import useMediaQuery from '@mui/material/useMediaQuery';
 import Grid from '@mui/material/Grid';
-import { useTheme, alpha } from '@mui/material/styles';
+import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
+import { alpha } from '@mui/material/styles';
 
-export default function HeroContainer({
-  left,
-  right,
-  rightSx,
-  linearGradient,
-  disableMobileHidden,
-}: {
+interface HeroContainerProps {
+  disableMobileHidden?: boolean;
+  disableTabExclusion?: boolean;
   left: React.ReactElement;
+  linearGradient?: boolean;
   right: React.ReactElement;
   rightSx?: BoxProps['sx'];
-  linearGradient?: boolean;
-  disableMobileHidden?: boolean;
-}) {
+}
+
+export default function HeroContainer(props: HeroContainerProps) {
+  const {
+    disableMobileHidden,
+    disableTabExclusion = false,
+    left,
+    linearGradient,
+    right,
+    rightSx,
+  } = props;
   const frame = React.useRef<null | HTMLDivElement>(null);
-  const globalTheme = useTheme();
-  const isMdUp = useMediaQuery(globalTheme.breakpoints.up('md'));
 
-  React.useEffect(() => {
+  useEnhancedEffect(() => {
     let obs: undefined | MutationObserver;
     function suppressTabIndex() {
-      if (frame.current && isMdUp) {
-        const elements = frame.current.querySelectorAll(
+      if (!disableTabExclusion) {
+        const elements = frame.current!.querySelectorAll(
           'a, button, input, textarea, select, details, [tabindex]:not([tabindex="-1"])',
         );
         elements.forEach((elm) => {
@@ -43,12 +46,12 @@ export default function HeroContainer({
         obs.disconnect();
       }
     };
-  }, [isMdUp]);
+  }, [disableTabExclusion]);
 
   const renderRightWrapper = (sx?: BoxProps['sx']) => (
     <Box
-      id="hero-container-right-area"
-      aria-hidden="true"
+      ref={frame}
+      aria-hidden={disableTabExclusion ? undefined : 'true'}
       sx={[
         (theme) => ({
           minWidth: '50vw',
diff --git a/docs/src/layouts/Section.tsx b/docs/src/layouts/Section.tsx
index 380d7f00a9ffc7..67814f63451906 100644
--- a/docs/src/layouts/Section.tsx
+++ b/docs/src/layouts/Section.tsx
@@ -11,28 +11,28 @@ interface SelectionProps extends BoxProps {
   cozy?: boolean;
 }
 
+const map = {
+  white: {
+    light: 'common.white',
+    dark: 'primaryDark.800',
+  },
+  comfort: {
+    light: 'grey.50',
+    dark: 'primaryDark.900',
+  },
+  dim: {
+    light: 'primaryDark.700',
+    dark: 'primaryDark.700',
+  },
+  transparent: {
+    light: 'transparent',
+    dark: 'transparent',
+  },
+};
+
 const Section = React.forwardRef<HTMLDivElement, SelectionProps>(function Section(props, ref) {
   const { bg = 'white', children, sx, cozy = false, ...other } = props;
 
-  const map = {
-    white: {
-      light: 'common.white',
-      dark: 'primaryDark.800',
-    },
-    comfort: {
-      light: 'grey.50',
-      dark: 'primaryDark.900',
-    },
-    dim: {
-      light: 'primaryDark.700',
-      dark: 'primaryDark.700',
-    },
-    transparent: {
-      light: 'transparent',
-      dark: 'transparent',
-    },
-  };
-
   return (
     <Box
       ref={ref}
diff --git a/docs/src/modules/brandingTheme.ts b/docs/src/modules/brandingTheme.ts
index aafa4bcc564fad..bb80175dfc528b 100644
--- a/docs/src/modules/brandingTheme.ts
+++ b/docs/src/modules/brandingTheme.ts
@@ -167,8 +167,8 @@ const systemFont = [
 
 export const getMetaThemeColor = (mode: 'light' | 'dark') => {
   const themeColor = {
-    light: grey[50],
-    dark: blueDark[800],
+    light: blue[600],
+    dark: blueDark[900],
   };
   return themeColor[mode];
 };
diff --git a/docs/src/modules/components/AdGuest.js b/docs/src/modules/components/AdGuest.js
index 7d49d548df6bf1..e7cd035a4c7995 100644
--- a/docs/src/modules/components/AdGuest.js
+++ b/docs/src/modules/components/AdGuest.js
@@ -3,7 +3,8 @@ import PropTypes from 'prop-types';
 import Portal from '@mui/material/Portal';
 import { AdContext } from 'docs/src/modules/components/AdManager';
 
-export default function AdGuest({ classSelector = '.description', ...props }) {
+export default function AdGuest(props) {
+  const { classSelector = '.description', children } = props;
   const ad = React.useContext(AdContext);
 
   if (!ad.element) {
@@ -24,7 +25,7 @@ export default function AdGuest({ classSelector = '.description', ...props }) {
         return ad.element;
       }}
     >
-      {props.children}
+      {children}
     </Portal>
   );
 }
diff --git a/docs/src/modules/components/AppLayoutDocs.js b/docs/src/modules/components/AppLayoutDocs.js
index ae84facb66e4b8..f435feae4ecabd 100644
--- a/docs/src/modules/components/AppLayoutDocs.js
+++ b/docs/src/modules/components/AppLayoutDocs.js
@@ -59,9 +59,10 @@ const StyledAppContainer = styled(AppContainer, {
         }),
     ...(!disableAd && {
       ...(!hasTabs && {
+        // Sync with material-ui/docs/src/modules/components/Ad.js container
         '&& .description': {
-          paddingBottom: 4 * 10 + 126,
-          marginBottom: 3 * 10,
+          paddingBottom: `calc(${theme.spacing(4)} + 126px)`,
+          marginBottom: theme.spacing(3),
         },
         '&& .description.ad': {
           paddingBottom: 0,
@@ -70,7 +71,7 @@ const StyledAppContainer = styled(AppContainer, {
       }),
       ...(hasTabs && {
         '&& .component-tabs .MuiTabs-root': {
-          marginBottom: 4 * 10 + 4 * 10 + 126,
+          marginBottom: `calc(${theme.spacing(4)} + 126px + 40px)`,
         },
         '&& .component-tabs.ad .MuiTabs-root': {
           marginBottom: 0,
diff --git a/docs/src/modules/components/DemosDocs.js b/docs/src/modules/components/DemosDocs.js
deleted file mode 100644
index 087fb71e4d7ae4..00000000000000
--- a/docs/src/modules/components/DemosDocs.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import MarkdownElement from 'docs/src/modules/components/MarkdownElementV2';
-
-export default function DemosDocs(props) {
-  const { WrapperComponent: Wrapper, wrapperProps, rendered = [], ...rest } = props;
-  return (
-    <React.Fragment key="demos-docs">
-      {rendered.map((renderedMarkdownOrDemo, index) => {
-        return (
-          <MarkdownElement
-            renderedMarkdownOrDemo={renderedMarkdownOrDemo}
-            WrapperComponent={Wrapper}
-            wrapperProps={{ ...wrapperProps, key: `demos-docs-${index}` }}
-            {...rest}
-          />
-        );
-      })}
-    </React.Fragment>
-  );
-}
-
-DemosDocs.propTypes = {
-  rendered: PropTypes.array,
-  WrapperComponent: PropTypes.node,
-  wrapperProps: PropTypes.object,
-};
diff --git a/docs/src/modules/components/DiamondSponsors.js b/docs/src/modules/components/DiamondSponsors.js
index 74f2ad1c73bbd4..92f92c14e80ee3 100644
--- a/docs/src/modules/components/DiamondSponsors.js
+++ b/docs/src/modules/components/DiamondSponsors.js
@@ -2,9 +2,10 @@ import * as React from 'react';
 import Box from '@mui/material/Box';
 import Stack from '@mui/material/Stack';
 import Button from '@mui/material/Button';
-import { styled, alpha } from '@mui/material/styles';
+import { styled } from '@mui/material/styles';
 import { useTranslate } from 'docs/src/modules/utils/i18n';
 import DiamondOutlinedIcon from '@mui/icons-material/DiamondOutlined';
+import Divider from '@mui/material/Divider';
 // import Link from 'docs/src/modules/components/Link';
 
 const Root = styled('div')(() => ({
@@ -44,8 +45,8 @@ export default function DiamondSponsors() {
           (theme) => ({
             display: 'flex',
             flexDirection: 'column',
-            gap: 1,
-            padding: theme.spacing(1, 2, 2, 2),
+            gap: 0.5,
+            padding: theme.spacing(0.5, 2, 2, 2),
             background: '#FFF',
             borderTop: '1px solid',
             borderColor: (theme.vars || theme).palette.grey[100],
@@ -81,25 +82,18 @@ export default function DiamondSponsors() {
           {t('diamondSponsors')}
         </Button>
         <Stack
-          spacing={1}
+          divider={<Divider />}
           sx={[
             (theme) => ({
               '& a': {
                 width: '100%',
-                height: { xs: 40, sm: 50 },
+                height: { xs: 40, sm: 45 },
                 display: 'flex',
                 alignItems: 'center',
                 justifyContent: 'center',
                 boxSizing: 'border-box', // TODO have CssBaseline in the Next.js layout
-                border: `1px solid`,
-                borderColor: 'divider',
-                fontSize: theme.typography.pxToRem(14),
-                fontWeight: 700,
-                borderRadius: 1,
                 transition: theme.transitions.create(['color', 'border-color']),
                 '&:hover': {
-                  color: 'primary.500',
-                  borderColor: 'grey.300',
                   backgroundColor: 'grey.50',
                 },
               },
@@ -109,9 +103,7 @@ export default function DiamondSponsors() {
                 '& a': {
                   borderColor: 'divider',
                   '&:hover': {
-                    color: 'primary.300',
-                    borderColor: 'primaryDark.600',
-                    backgroundColor: alpha(theme.palette.primaryDark[700], 0.4),
+                    backgroundColor: theme.palette.primaryDark[700],
                   },
                 },
               }),
diff --git a/docs/src/modules/components/MarkdownDocs.js b/docs/src/modules/components/MarkdownDocs.js
index dadf0e657056b4..4b615d3d2ed5b3 100644
--- a/docs/src/modules/components/MarkdownDocs.js
+++ b/docs/src/modules/components/MarkdownDocs.js
@@ -1,26 +1,17 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import path from 'path';
 import { useRouter } from 'next/router';
 import { useTheme } from '@mui/system';
 import { exactProp } from '@mui/utils';
 import { CssVarsProvider as JoyCssVarsProvider, useColorScheme } from '@mui/joy/styles';
-import Demo from 'docs/src/modules/components/Demo';
-import MarkdownElement from 'docs/src/modules/components/MarkdownElement';
-import HighlightedCodeWithTabs from 'docs/src/modules/components/HighlightedCodeWithTabs';
+import RichMarkdownElement from 'docs/src/modules/components/RichMarkdownElement';
 import { pathnameToLanguage } from 'docs/src/modules/utils/helpers';
 import AppLayoutDocs from 'docs/src/modules/components/AppLayoutDocs';
-import { useTranslate, useUserLanguage } from 'docs/src/modules/utils/i18n';
+import { useUserLanguage } from 'docs/src/modules/utils/i18n';
 import BrandingProvider from 'docs/src/BrandingProvider';
 import Ad from 'docs/src/modules/components/Ad';
 import AdGuest from 'docs/src/modules/components/AdGuest';
 
-function noComponent(moduleID) {
-  return function NoComponent() {
-    throw new Error(`No demo component provided for '${moduleID}'`);
-  };
-}
-
 function JoyModeObserver({ mode }) {
   const { setMode } = useColorScheme();
   React.useEffect(() => {
@@ -52,7 +43,6 @@ export default function MarkdownDocs(props) {
   } = props;
 
   const userLanguage = useUserLanguage();
-  const t = useTranslate();
 
   const localizedDoc = docs[userLanguage] || docs.en;
   const { description, location, rendered, title, toc } = localizedDoc;
@@ -60,6 +50,9 @@ export default function MarkdownDocs(props) {
   const isJoy = canonicalAs.startsWith('/joy-ui/') && !disableCssVarsProvider;
   const CssVarsProvider = isJoy ? JoyCssVarsProvider : React.Fragment;
   const Wrapper = isJoy ? BrandingProvider : React.Fragment;
+  const wrapperProps = {
+    ...(isJoy && { mode: theme.palette.mode }),
+  };
 
   return (
     <AppLayoutDocs
@@ -79,95 +72,21 @@ export default function MarkdownDocs(props) {
       )}
       <CssVarsProvider>
         {isJoy && <JoyModeObserver mode={theme.palette.mode} />}
-        {rendered.map((renderedMarkdownOrDemo, index) => {
-          if (typeof renderedMarkdownOrDemo === 'string') {
-            return (
-              <Wrapper key={index} {...(isJoy && { mode: theme.palette.mode })}>
-                <MarkdownElement renderedMarkdown={renderedMarkdownOrDemo} />
-              </Wrapper>
-            );
-          }
-
-          if (renderedMarkdownOrDemo.component) {
-            const name = renderedMarkdownOrDemo.component;
-            const Component = srcComponents?.[name];
-
-            if (Component === undefined) {
-              throw new Error(`No component found at the path ${path.join('docs/src', name)}`);
-            }
-
-            return (
-              <Wrapper key={index} {...(isJoy && { mode: theme.palette.mode })}>
-                <Component {...renderedMarkdownOrDemo} markdown={localizedDoc} />
-              </Wrapper>
-            );
-          }
-          if (renderedMarkdownOrDemo.type === 'codeblock') {
-            return (
-              <Wrapper key={index} {...(isJoy && { mode: theme.palette.mode })}>
-                <HighlightedCodeWithTabs
-                  tabs={renderedMarkdownOrDemo.data}
-                  storageKey={
-                    renderedMarkdownOrDemo.storageKey &&
-                    `codeblock-${renderedMarkdownOrDemo.storageKey}`
-                  }
-                />
-              </Wrapper>
-            );
-          }
-
-          const name = renderedMarkdownOrDemo.demo;
-          const demo = demos?.[name];
-          if (demo === undefined) {
-            const errorMessage = [
-              `Missing demo: ${name}. You can use one of the following:`,
-              Object.keys(demos),
-            ].join('\n');
-
-            if (userLanguage === 'en') {
-              throw new Error(errorMessage);
-            }
-
-            if (process.env.NODE_ENV !== 'production') {
-              console.error(errorMessage);
-            }
-
-            const warnIcon = (
-              <span role="img" aria-label={t('emojiWarning')}>
-                ⚠️
-              </span>
-            );
-            return (
-              <div key={index}>
-                {/* eslint-disable-next-line material-ui/no-hardcoded-labels */}
-                {warnIcon} Missing demo `{name}` {warnIcon}
-              </div>
-            );
-          }
-
-          const splitLocationBySlash = location.split('/');
-          splitLocationBySlash.pop();
-          const fileNameWithLocation = `${splitLocationBySlash.join('/')}/${name}`;
-
-          return (
-            <Demo
-              key={index}
-              mode={theme.palette.mode}
-              demo={{
-                raw: demo.raw,
-                js: demoComponents[demo.module] ?? noComponent(demo.module),
-                scope: demos.scope,
-                jsxPreview: demo.jsxPreview,
-                rawTS: demo.rawTS,
-                tsx: demoComponents[demo.moduleTS] ?? null,
-                gaLabel: fileNameWithLocation.replace(/^\/docs\/data\//, ''),
-              }}
-              disableAd={disableAd}
-              demoOptions={renderedMarkdownOrDemo}
-              githubLocation={`${process.env.SOURCE_CODE_REPO}/blob/v${process.env.LIB_VERSION}${fileNameWithLocation}`}
-            />
-          );
-        })}
+        {rendered.map((renderedMarkdownOrDemo, index) => (
+          <RichMarkdownElement
+            key={`demos-section-${index}`}
+            demoComponents={demoComponents}
+            demos={demos}
+            disableAd={disableAd}
+            localizedDoc={localizedDoc}
+            location={location}
+            renderedMarkdownOrDemo={renderedMarkdownOrDemo}
+            srcComponents={srcComponents}
+            theme={theme}
+            WrapperComponent={Wrapper}
+            wrapperProps={wrapperProps}
+          />
+        ))}
       </CssVarsProvider>
     </AppLayoutDocs>
   );
diff --git a/docs/src/modules/components/MarkdownDocsV2.js b/docs/src/modules/components/MarkdownDocsV2.js
index dfb6beb4c6dc16..848a711287b6be 100644
--- a/docs/src/modules/components/MarkdownDocsV2.js
+++ b/docs/src/modules/components/MarkdownDocsV2.js
@@ -8,7 +8,7 @@ import { CssVarsProvider as JoyCssVarsProvider, useColorScheme } from '@mui/joy/
 import ComponentsApiContent from 'docs/src/modules/components/ComponentsApiContent';
 import HooksApiContent from 'docs/src/modules/components/HooksApiContent';
 import { getTranslatedHeader as getComponentTranslatedHeader } from 'docs/src/modules/components/ApiPage';
-import MarkdownElement from 'docs/src/modules/components/MarkdownElementV2';
+import RichMarkdownElement from 'docs/src/modules/components/RichMarkdownElement';
 import { pathnameToLanguage } from 'docs/src/modules/utils/helpers';
 import AppLayoutDocs from 'docs/src/modules/components/AppLayoutDocs';
 import { useTranslate, useUserLanguage } from 'docs/src/modules/utils/i18n';
@@ -64,10 +64,10 @@ export default function MarkdownDocsV2(props) {
     docs,
     demoComponents,
     srcComponents,
-    componentsApiDescriptions = {},
-    componentsApiPageContents = {},
-    hooksApiDescriptions = {},
-    hooksApiPageContents = {},
+    componentsApiDescriptions,
+    componentsApiPageContents,
+    hooksApiDescriptions,
+    hooksApiPageContents,
   } = props;
 
   const userLanguage = useUserLanguage();
@@ -91,25 +91,27 @@ export default function MarkdownDocsV2(props) {
   }
 
   const hooksToc = [];
-  Object.keys(hooksApiPageContents).forEach((key) => {
-    const { hookDescriptionToc = [] } = hooksApiDescriptions[key][userLanguage];
-    const { name: hookName } = hooksApiPageContents[key];
-
-    const hookNameKebabCase = kebabCase(hookName);
-
-    const hookToc = [
-      createHookTocEntry(hookNameKebabCase, 'import'),
-      ...hookDescriptionToc,
-      createHookTocEntry(hookNameKebabCase, 'parameters'),
-      createHookTocEntry(hookNameKebabCase, 'return-value'),
-    ].filter(Boolean);
-
-    hooksToc.push({
-      text: hookName,
-      hash: hookNameKebabCase,
-      children: hookToc,
+  if (hooksApiPageContents) {
+    Object.keys(hooksApiPageContents).forEach((key) => {
+      const { hookDescriptionToc = [] } = hooksApiDescriptions[key][userLanguage];
+      const { name: hookName } = hooksApiPageContents[key];
+
+      const hookNameKebabCase = kebabCase(hookName);
+
+      const hookToc = [
+        createHookTocEntry(hookNameKebabCase, 'import'),
+        ...hookDescriptionToc,
+        createHookTocEntry(hookNameKebabCase, 'parameters'),
+        createHookTocEntry(hookNameKebabCase, 'return-value'),
+      ].filter(Boolean);
+
+      hooksToc.push({
+        text: hookName,
+        hash: hookNameKebabCase,
+        children: hookToc,
+      });
     });
-  });
+  }
 
   function createComponentTocEntry(
     componentName,
@@ -132,35 +134,40 @@ export default function MarkdownDocsV2(props) {
 
   const componentsApiToc = [];
 
-  Object.keys(componentsApiPageContents).forEach((key) => {
-    const { componentDescriptionToc = [] } = componentsApiDescriptions[key][userLanguage];
-    const {
-      name: componentName,
-      styles,
-      inheritance,
-      slots,
-      themeDefaultProps,
-      classes,
-    } = componentsApiPageContents[key];
-    const componentNameKebabCase = kebabCase(componentName);
-
-    const componentApiToc = [
-      createComponentTocEntry(componentNameKebabCase, 'import'),
-      ...componentDescriptionToc,
-      styles.name && createComponentTocEntry(componentNameKebabCase, 'component-name'),
-      createComponentTocEntry(componentNameKebabCase, 'props', { inheritance, themeDefaultProps }),
-      styles.classes.length > 0 && createComponentTocEntry(componentNameKebabCase, 'css'),
-      slots?.length > 0 && createComponentTocEntry(componentNameKebabCase, 'slots'),
-      (classes?.classes?.length || Object.keys(classes?.classes?.globalClasses || {}).length) &&
-        createComponentTocEntry(componentNameKebabCase, 'classes'),
-    ].filter(Boolean);
-
-    componentsApiToc.push({
-      text: componentName,
-      hash: componentNameKebabCase,
-      children: componentApiToc,
+  if (componentsApiPageContents) {
+    Object.keys(componentsApiPageContents).forEach((key) => {
+      const { componentDescriptionToc = [] } = componentsApiDescriptions[key][userLanguage];
+      const {
+        name: componentName,
+        styles,
+        inheritance,
+        slots,
+        themeDefaultProps,
+        classes,
+      } = componentsApiPageContents[key];
+      const componentNameKebabCase = kebabCase(componentName);
+
+      const componentApiToc = [
+        createComponentTocEntry(componentNameKebabCase, 'import'),
+        ...componentDescriptionToc,
+        styles.name && createComponentTocEntry(componentNameKebabCase, 'component-name'),
+        createComponentTocEntry(componentNameKebabCase, 'props', {
+          inheritance,
+          themeDefaultProps,
+        }),
+        styles.classes.length > 0 && createComponentTocEntry(componentNameKebabCase, 'css'),
+        slots?.length > 0 && createComponentTocEntry(componentNameKebabCase, 'slots'),
+        (classes?.classes?.length || Object.keys(classes?.classes?.globalClasses || {}).length) &&
+          createComponentTocEntry(componentNameKebabCase, 'classes'),
+      ].filter(Boolean);
+
+      componentsApiToc.push({
+        text: componentName,
+        hash: componentNameKebabCase,
+        children: componentApiToc,
+      });
     });
-  });
+  }
 
   const isJoy = canonicalAs.startsWith('/joy-ui/');
   const CssVarsProvider = isJoy ? JoyCssVarsProvider : React.Fragment;
@@ -182,19 +189,19 @@ export default function MarkdownDocsV2(props) {
       done = true;
     }
     commonElements.push(
-      <MarkdownElement
-        srcComponents={srcComponents}
-        renderedMarkdownOrDemo={renderedMarkdownOrDemo}
-        WrapperComponent={Wrapper}
-        wrapperProps={wrapperProps}
+      <RichMarkdownElement
         key={`common-elements-${i}`}
-        localizedDoc={localizedDoc}
+        activeTab={activeTab}
+        demoComponents={demoComponents}
         demos={demos}
+        disableAd={disableAd}
+        localizedDoc={localizedDoc}
         location={location}
+        renderedMarkdownOrDemo={renderedMarkdownOrDemo}
+        srcComponents={srcComponents}
         theme={theme}
-        demoComponents={demoComponents}
-        activeTab={activeTab}
-        disableAd={disableAd}
+        WrapperComponent={Wrapper}
+        wrapperProps={wrapperProps}
       />,
     );
     i += 1;
@@ -210,6 +217,17 @@ export default function MarkdownDocsV2(props) {
     activeToc = componentsApiToc;
   }
 
+  const hasTabs = rendered.some((renderedMarkdownOrDemo) => {
+    if (
+      typeof renderedMarkdownOrDemo === 'object' &&
+      renderedMarkdownOrDemo.component &&
+      renderedMarkdownOrDemo.component === 'modules/components/ComponentPageTabs.js'
+    ) {
+      return true;
+    }
+    return false;
+  });
+
   return (
     <AppLayoutDocs
       description={description}
@@ -219,7 +237,7 @@ export default function MarkdownDocsV2(props) {
       title={title}
       disableLayout
       toc={activeToc}
-      hasTabs
+      hasTabs={hasTabs}
     >
       <div
         style={{
@@ -228,7 +246,7 @@ export default function MarkdownDocsV2(props) {
       >
         {disableAd ? null : (
           <BrandingProvider>
-            <AdGuest classSelector=".component-tabs">
+            <AdGuest classSelector={hasTabs ? '.component-tabs' : undefined}>
               <Ad />
             </AdGuest>
           </BrandingProvider>
@@ -241,20 +259,19 @@ export default function MarkdownDocsV2(props) {
               // for the "hook only" edge case, e.g. Base UI autocomplete
               .slice(i, rendered.length - (headers.components.length > 0 ? 1 : 0))
               .map((renderedMarkdownOrDemo, index) => (
-                <MarkdownElement
+                <RichMarkdownElement
                   key={`demos-section-${index}`}
-                  renderedMarkdownOrDemo={renderedMarkdownOrDemo}
-                  WrapperComponent={Wrapper}
-                  wrapperProps={wrapperProps}
-                  srcComponents={srcComponents}
                   activeTab={activeTab}
-                  setActiveTab={setActiveTab}
-                  localizedDoc={localizedDoc}
+                  demoComponents={demoComponents}
                   demos={demos}
+                  disableAd={disableAd}
+                  localizedDoc={localizedDoc}
                   location={location}
+                  renderedMarkdownOrDemo={renderedMarkdownOrDemo}
+                  srcComponents={srcComponents}
                   theme={theme}
-                  demoComponents={demoComponents}
-                  disableAd={disableAd}
+                  WrapperComponent={Wrapper}
+                  wrapperProps={wrapperProps}
                 />
               ))}
           {activeTab === 'components-api' && (
diff --git a/docs/src/modules/components/MarkdownElementV2.js b/docs/src/modules/components/RichMarkdownElement.js
similarity index 81%
rename from docs/src/modules/components/MarkdownElementV2.js
rename to docs/src/modules/components/RichMarkdownElement.js
index 9102e51717851b..695c8c4e0b90af 100644
--- a/docs/src/modules/components/MarkdownElementV2.js
+++ b/docs/src/modules/components/RichMarkdownElement.js
@@ -3,6 +3,7 @@ import path from 'path';
 import PropTypes from 'prop-types';
 import { useTranslate, useUserLanguage } from 'docs/src/modules/utils/i18n';
 import MarkdownElement from 'docs/src/modules/components/MarkdownElement';
+import HighlightedCodeWithTabs from 'docs/src/modules/components/HighlightedCodeWithTabs';
 import Demo from 'docs/src/modules/components/Demo';
 
 function noComponent(moduleID) {
@@ -11,19 +12,20 @@ function noComponent(moduleID) {
   };
 }
 
-export default function MarkdownElementV2({
-  renderedMarkdownOrDemo,
-  WrapperComponent: Wrapper,
-  wrapperProps,
-  srcComponents,
-  activeTab,
-  localizedDoc,
-  demos = {},
-  location,
-  theme,
-  demoComponents,
-  disableAd,
-}) {
+export default function RichMarkdownElement(props) {
+  const {
+    activeTab,
+    demoComponents,
+    demos = {},
+    disableAd,
+    localizedDoc,
+    location,
+    renderedMarkdownOrDemo,
+    srcComponents,
+    theme,
+    WrapperComponent: Wrapper,
+    wrapperProps,
+  } = props;
   const userLanguage = useUserLanguage();
   const t = useTranslate();
 
@@ -38,12 +40,13 @@ export default function MarkdownElementV2({
   if (renderedMarkdownOrDemo.component) {
     const name = renderedMarkdownOrDemo.component;
     const Component = srcComponents?.[name];
-    const additionalProps = {};
 
     if (Component === undefined) {
       throw new Error(`No component found at the path ${path.join('docs/src', name)}`);
     }
-    if (name.indexOf('Tabs') >= 0) {
+
+    const additionalProps = {};
+    if (name === 'modules/components/ComponentPageTabs.js') {
       additionalProps.activeTab = activeTab;
     }
 
@@ -54,6 +57,19 @@ export default function MarkdownElementV2({
     );
   }
 
+  if (renderedMarkdownOrDemo.type === 'codeblock') {
+    return (
+      <Wrapper {...wrapperProps}>
+        <HighlightedCodeWithTabs
+          tabs={renderedMarkdownOrDemo.data}
+          storageKey={
+            renderedMarkdownOrDemo.storageKey && `codeblock-${renderedMarkdownOrDemo.storageKey}`
+          }
+        />
+      </Wrapper>
+    );
+  }
+
   const name = renderedMarkdownOrDemo.demo;
   const demo = demos?.[name];
   if (demo === undefined) {
@@ -116,7 +132,7 @@ export default function MarkdownElementV2({
   );
 }
 
-MarkdownElementV2.propTypes = {
+RichMarkdownElement.propTypes = {
   activeTab: PropTypes.string,
   demoComponents: PropTypes.any,
   demos: PropTypes.any,
diff --git a/docs/src/modules/sandbox/CreateReactApp.ts b/docs/src/modules/sandbox/CreateReactApp.ts
index b3ef543481f1e7..8975ff610990e3 100644
--- a/docs/src/modules/sandbox/CreateReactApp.ts
+++ b/docs/src/modules/sandbox/CreateReactApp.ts
@@ -33,8 +33,9 @@ export const getHtml = ({
           extend: {
             boxShadow: {
               'outline-purple': '0 0 0 4px rgba(192, 132, 252, 0.25)',
+              'outline-purple-light': '0 0 0 4px rgba(245, 208, 254, 0.25)',
               'outline-purple-xs': '0 0 0 1px rgba(192, 132, 252, 0.25)',
-              'outline-switch': '0 0 1px 8px rgba(0, 0, 0, 0.25)',
+              'outline-switch': '0 0 1px 8px rgba(168, 85, 247, 0.35)',
             },
             cursor: {
               inherit: 'inherit',
@@ -55,6 +56,7 @@ export const getHtml = ({
               badge: '22px',
               listbox: '200px',
               snackbar: '300px',
+              'tabs-list': '400px',
             },
             maxWidth: {
               snackbar: '560px',
diff --git a/docs/tailwind.config.js b/docs/tailwind.config.js
index 4d30eb1255daa5..44baa508006bbe 100644
--- a/docs/tailwind.config.js
+++ b/docs/tailwind.config.js
@@ -14,6 +14,7 @@ module.exports = {
     extend: {
       boxShadow: {
         'outline-purple': '0 0 0 4px rgba(192, 132, 252, 0.25)',
+        'outline-purple-light': '0 0 0 4px rgba(245, 208, 254, 0.25)',
         'outline-purple-xs': '0 0 0 1px rgba(192, 132, 252, 0.25)',
         'outline-switch': '0 0 1px 8px rgba(168, 85, 247, 0.35)',
       },
@@ -36,6 +37,7 @@ module.exports = {
         badge: '22px',
         listbox: '200px',
         snackbar: '300px',
+        'tabs-list': '400px',
       },
       maxWidth: {
         snackbar: '560px',
diff --git a/examples/base-next-app-router-tailwind-ts/src/app/page.tsx b/examples/base-next-app-router-tailwind-ts/src/app/page.tsx
index a1ce366514b028..02f6257dbdcb0d 100644
--- a/examples/base-next-app-router-tailwind-ts/src/app/page.tsx
+++ b/examples/base-next-app-router-tailwind-ts/src/app/page.tsx
@@ -2,20 +2,22 @@ import * as React from 'react';
 import Switch from '@mui/base/Switch';
 import { Select, SelectOption, Slider } from './components';
 
-function Heading({ children }: { children: React.ReactNode }) {
-  return <h2 className="font-bold text-gray-400 uppercase text-base mt-3 mb-2">{children}</h2>;
+function Heading(props: { children: React.ReactNode }) {
+  return (
+    <h2 className="font-bold text-gray-400 uppercase text-base mt-3 mb-2">{props.children}</h2>
+  );
 }
 
-function Section({ children }: { children: React.ReactNode }) {
+function Section(props: { children: React.ReactNode }) {
   return (
     <div className="grid grid-cols-3 grid-rows-[40px] gap-x-16 items-center min-h-[40px] py-1.5 border-t-[1px] border-solid border-gray-700">
-      {children}
+      {props.children}
     </div>
   );
 }
 
-function Label({ children }: { children: React.ReactNode }) {
-  return <h3 className="font-medium leading-none text-gray-300 col-span-2">{children}</h3>;
+function Label(props: { children: React.ReactNode }) {
+  return <h3 className="font-medium leading-none text-gray-300 col-span-2">{props.children}</h3>;
 }
 
 const HOURS = [
@@ -74,7 +76,6 @@ export default function Home() {
             defaultChecked
           />
         </Section>
-
         <Section>
           <Label>Auto-Enable Between</Label>
           <div className="col-span-1 grid grid-cols-[1fr_auto_1fr] items-center">
@@ -95,7 +96,6 @@ export default function Home() {
             </Select>
           </div>
         </Section>
-
         <Section>
           <Label>Night Mode Tint</Label>
           <div className="col-span-1 self-stretch">
diff --git a/examples/joy-next-app-router-ts/src/app/layout.tsx b/examples/joy-next-app-router-ts/src/app/layout.tsx
index 954f4b78cc5794..7728f51f70ebdf 100644
--- a/examples/joy-next-app-router-ts/src/app/layout.tsx
+++ b/examples/joy-next-app-router-ts/src/app/layout.tsx
@@ -1,9 +1,6 @@
 import * as React from 'react';
-import { Public_Sans } from 'next/font/google';
 import ThemeRegistry from '@/components/ThemeRegistry/ThemeRegistry';
 
-const publicSans = Public_Sans({ subsets: ['latin'] });
-
 export const metadata = {
   title: 'Create Next App',
   description: 'Generated by create next app',
@@ -12,7 +9,7 @@ export const metadata = {
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
     <html lang="en">
-      <body className={publicSans.className}>
+      <body>
         <ThemeRegistry>{children}</ThemeRegistry>
       </body>
     </html>
diff --git a/examples/joy-next-app-router-ts/src/app/page.tsx b/examples/joy-next-app-router-ts/src/app/page.tsx
index 8ea83be21dc3c6..d235da99c007ab 100644
--- a/examples/joy-next-app-router-ts/src/app/page.tsx
+++ b/examples/joy-next-app-router-ts/src/app/page.tsx
@@ -39,15 +39,14 @@ export default function Home() {
           </Typography>
           <Typography level="body2">Sign in to continue.</Typography>
         </div>
-        <FormControl>
+        <FormControl id="email">
           <FormLabel>Email</FormLabel>
           <Input name="email" type="email" placeholder="johndoe@email.com" />
         </FormControl>
-        <FormControl>
+        <FormControl id="password">
           <FormLabel>Password</FormLabel>
           <Input name="password" type="password" placeholder="password" />
         </FormControl>
-
         <Button sx={{ mt: 1 }}>Log in</Button>
         <Typography
           endDecorator={<Link href="/sign-up">Sign up</Link>}
diff --git a/examples/joy-next-app-router-ts/src/components/ThemeRegistry/theme.js b/examples/joy-next-app-router-ts/src/components/ThemeRegistry/theme.js
index 99dbe79cbd6685..8dd36fef01d811 100644
--- a/examples/joy-next-app-router-ts/src/components/ThemeRegistry/theme.js
+++ b/examples/joy-next-app-router-ts/src/components/ThemeRegistry/theme.js
@@ -1,6 +1,15 @@
+import { Public_Sans } from 'next/font/google';
 import { extendTheme } from '@mui/joy/styles';
 
+const publicSans = Public_Sans({
+  subsets: ['latin'],
+  display: 'swap',
+});
+
 const theme = extendTheme({
+  fontFamily: {
+    body: publicSans.style.fontFamily,
+  },
   components: {
     JoyButton: {
       styleOverrides: {
diff --git a/examples/material-next-app-router-ts/src/app/layout.tsx b/examples/material-next-app-router-ts/src/app/layout.tsx
index 0d87537621b5d8..a4ac0e4f6f163e 100644
--- a/examples/material-next-app-router-ts/src/app/layout.tsx
+++ b/examples/material-next-app-router-ts/src/app/layout.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { Roboto } from 'next/font/google';
 import Link from 'next/link';
 import AppBar from '@mui/material/AppBar';
 import Box from '@mui/material/Box';
@@ -26,12 +25,6 @@ export const metadata = {
   description: 'Next.js App Router + Material UI v5',
 };
 
-const roboto = Roboto({
-  variable: '--font-roboto',
-  weight: ['300', '400', '500', '700'],
-  subsets: ['latin'],
-});
-
 const DRAWER_WIDTH = 240;
 
 const LINKS = [
@@ -48,8 +41,8 @@ const PLACEHOLDER_LINKS = [
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
-    <html lang="en" className={roboto.variable}>
-      <body className={roboto.className}>
+    <html lang="en">
+      <body>
         <ThemeRegistry>
           <AppBar position="fixed" sx={{ zIndex: 2000 }}>
             <Toolbar sx={{ backgroundColor: 'background.paper' }}>
diff --git a/examples/material-next-app-router-ts/src/components/ThemeRegistry/theme.ts b/examples/material-next-app-router-ts/src/components/ThemeRegistry/theme.ts
index 27cced35c5ef80..f9fdd2a3142928 100644
--- a/examples/material-next-app-router-ts/src/components/ThemeRegistry/theme.ts
+++ b/examples/material-next-app-router-ts/src/components/ThemeRegistry/theme.ts
@@ -1,11 +1,18 @@
+import { Roboto } from 'next/font/google';
 import { createTheme } from '@mui/material/styles';
 
-const defaultTheme = createTheme({
+const roboto = Roboto({
+  weight: ['300', '400', '500', '700'],
+  subsets: ['latin'],
+  display: 'swap',
+});
+
+const theme = createTheme({
   palette: {
     mode: 'light',
   },
   typography: {
-    fontFamily: 'var(--font-roboto)',
+    fontFamily: roboto.style.fontFamily,
   },
   components: {
     MuiAlert: {
@@ -20,4 +27,4 @@ const defaultTheme = createTheme({
   },
 });
 
-export default defaultTheme;
+export default theme;
diff --git a/examples/material-next-ts-v4-v5-migration/pages/_document.tsx b/examples/material-next-ts-v4-v5-migration/pages/_document.tsx
index 02ae480ed4bb3d..23aa7cc2cc818c 100644
--- a/examples/material-next-ts-v4-v5-migration/pages/_document.tsx
+++ b/examples/material-next-ts-v4-v5-migration/pages/_document.tsx
@@ -25,10 +25,6 @@ export default function MyDocument({ emotionStyleTags }: MyDocumentProps) {
         {/* PWA primary color */}
         <meta name="theme-color" content={theme.palette.primary.main} />
         <link rel="shortcut icon" href="/favicon.ico" />
-        <link
-          rel="stylesheet"
-          href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
-        />
         {/* Inject MUI styles first to match with the prepend: true configuration. */}
         {emotionStyleTags}
       </Head>
diff --git a/examples/material-next-ts-v4-v5-migration/src/theme.ts b/examples/material-next-ts-v4-v5-migration/src/theme.ts
index 050b11a7d1e1b7..2ed02149914f7d 100644
--- a/examples/material-next-ts-v4-v5-migration/src/theme.ts
+++ b/examples/material-next-ts-v4-v5-migration/src/theme.ts
@@ -1,6 +1,13 @@
+import { Roboto } from 'next/font/google';
 import { createTheme } from '@mui/material/styles';
 import { red } from '@mui/material/colors';
 
+const roboto = Roboto({
+  weight: ['300', '400', '500', '700'],
+  subsets: ['latin'],
+  display: 'swap',
+});
+
 // Create a theme instance.
 const theme = createTheme({
   palette: {
@@ -14,6 +21,9 @@ const theme = createTheme({
       main: red.A400,
     },
   },
+  typography: {
+    fontFamily: roboto.style.fontFamily,
+  },
 });
 
 export default theme;
diff --git a/examples/material-next-ts/src/theme.ts b/examples/material-next-ts/src/theme.ts
index 3138902f3fac74..89d3b46321de59 100644
--- a/examples/material-next-ts/src/theme.ts
+++ b/examples/material-next-ts/src/theme.ts
@@ -6,7 +6,6 @@ export const roboto = Roboto({
   weight: ['300', '400', '500', '700'],
   subsets: ['latin'],
   display: 'swap',
-  fallback: ['Helvetica', 'Arial', 'sans-serif'],
 });
 
 // Create a theme instance.
diff --git a/examples/material-next/pages/_document.js b/examples/material-next/pages/_document.js
index d3c7c4512c4e38..fd589546a63d6d 100644
--- a/examples/material-next/pages/_document.js
+++ b/examples/material-next/pages/_document.js
@@ -2,14 +2,14 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import Document, { Html, Head, Main, NextScript } from 'next/document';
 import createEmotionServer from '@emotion/server/create-instance';
-import theme, { roboto } from '../src/theme';
+import theme from '../src/theme';
 import createEmotionCache from '../src/createEmotionCache';
 
 export default function MyDocument(props) {
   const { emotionStyleTags } = props;
 
   return (
-    <Html lang="en" className={roboto.className}>
+    <Html lang="en">
       <Head>
         {/* PWA primary color */}
         <meta name="theme-color" content={theme.palette.primary.main} />
diff --git a/examples/material-next/src/theme.js b/examples/material-next/src/theme.js
index 3138902f3fac74..2ed02149914f7d 100644
--- a/examples/material-next/src/theme.js
+++ b/examples/material-next/src/theme.js
@@ -2,11 +2,10 @@ import { Roboto } from 'next/font/google';
 import { createTheme } from '@mui/material/styles';
 import { red } from '@mui/material/colors';
 
-export const roboto = Roboto({
+const roboto = Roboto({
   weight: ['300', '400', '500', '700'],
   subsets: ['latin'],
   display: 'swap',
-  fallback: ['Helvetica', 'Arial', 'sans-serif'],
 });
 
 // Create a theme instance.
diff --git a/packages/api-docs-builder/buildApiUtils.ts b/packages/api-docs-builder/buildApiUtils.ts
index d47def678d440a..b2dcce41a390f6 100644
--- a/packages/api-docs-builder/buildApiUtils.ts
+++ b/packages/api-docs-builder/buildApiUtils.ts
@@ -589,6 +589,39 @@ export function generateBaseUIApiPages() {
     ) {
       const { components, hooks } = markdownHeaders;
 
+      const tokens = markdown.pathname.split('/');
+      const name = tokens[tokens.length - 1];
+      const importStatement = `docs/data${markdown.pathname}/${name}.md`;
+      const demosSource = `
+import * as React from 'react';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
+import AppFrame from 'docs/src/modules/components/AppFrame';
+import * as pageProps from '${importStatement}?@mui/markdown';
+
+export default function Page(props) {
+  const { userLanguage, ...other } = props;
+  return <MarkdownDocs {...pageProps} {...other} />;
+}
+
+Page.getLayout = (page) => {
+  return <AppFrame>{page}</AppFrame>;
+};
+      `;
+
+      const componentPageDirectory = `docs/pages/${productName}-ui/react-${componentName}/`;
+      if (!fs.existsSync(componentPageDirectory)) {
+        fs.mkdirSync(componentPageDirectory, { recursive: true });
+      }
+      writePrettifiedFile(
+        path.join(process.cwd(), `${componentPageDirectory}/index.js`),
+        demosSource,
+      );
+
+      if ((!components || components.length === 0) && (!hooks || hooks.length === 0)) {
+        // Early return if it's a markdown file without components/hooks.
+        return;
+      }
+
       let apiTabImportStatements = '';
       let staticProps = 'export const getStaticProps = () => {';
       let componentsApiDescriptions = '';
@@ -596,7 +629,7 @@ export function generateBaseUIApiPages() {
       let hooksApiDescriptions = '';
       let hooksPageContents = '';
 
-      if (components) {
+      if (components && components.length > 0) {
         components.forEach((component: string) => {
           const componentNameKebabCase = kebabCase(component);
           apiTabImportStatements += `import ${component}ApiJsonPageContent from '../../api/${componentNameKebabCase}.json';`;
@@ -613,7 +646,7 @@ export function generateBaseUIApiPages() {
         });
       }
 
-      if (hooks) {
+      if (hooks && hooks.length > 0) {
         hooks.forEach((hook: string) => {
           const hookNameKebabCase = kebabCase(hook);
           apiTabImportStatements += `import ${hook}ApiJsonPageContent from '../../api/${hookNameKebabCase}.json';`;
@@ -645,25 +678,6 @@ export function generateBaseUIApiPages() {
 
       staticProps += ` },},};};`;
 
-      const tokens = markdown.pathname.split('/');
-      const name = tokens[tokens.length - 1];
-      const importStatement = `docs/data${markdown.pathname}/${name}.md`;
-      const demosSource = `
-import * as React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
-import AppFrame from 'docs/src/modules/components/AppFrame';
-import * as pageProps from '${importStatement}?@mui/markdown';
-
-export default function Page(props) {
-  const { userLanguage, ...other } = props;
-  return <MarkdownDocs {...pageProps} {...other} />;
-}
-
-Page.getLayout = (page) => {
-  return <AppFrame>{page}</AppFrame>;
-};
-      `;
-
       const tabsApiSource = `
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
@@ -691,24 +705,14 @@ export const getStaticPaths = () => {
 ${staticProps}
       `;
 
-      const componentPageDirectory = `docs/pages/${productName}-ui/react-${componentName}/`;
-      if (!fs.existsSync(componentPageDirectory)) {
-        fs.mkdirSync(componentPageDirectory, { recursive: true });
-      }
-      const demosSourcePath = path.join(process.cwd(), `${componentPageDirectory}/index.js`);
-      writePrettifiedFile(demosSourcePath, demosSource);
-
-      if ((components ?? []).length === 0 && (hooks ?? []).length === 0) {
-        // Early return if it's a markdown file without components/hooks.
-        return;
-      }
-
       const docsTabsPagesDirectory = `${componentPageDirectory}/[docsTab]`;
       if (!fs.existsSync(docsTabsPagesDirectory)) {
         fs.mkdirSync(docsTabsPagesDirectory, { recursive: true });
       }
-      const tabsApiPath = path.join(process.cwd(), `${docsTabsPagesDirectory}/index.js`);
-      writePrettifiedFile(tabsApiPath, tabsApiSource);
+      writePrettifiedFile(
+        path.join(process.cwd(), `${docsTabsPagesDirectory}/index.js`),
+        tabsApiSource,
+      );
     }
   });
 }
diff --git a/packages/mui-joy/src/Autocomplete/Autocomplete.tsx b/packages/mui-joy/src/Autocomplete/Autocomplete.tsx
index 1b5ae610b7c4ab..a8e6dd98a6d688 100644
--- a/packages/mui-joy/src/Autocomplete/Autocomplete.tsx
+++ b/packages/mui-joy/src/Autocomplete/Autocomplete.tsx
@@ -385,7 +385,7 @@ const Autocomplete = React.forwardRef(function Autocomplete(
     ...props,
     id: id ?? formControl?.htmlFor,
     componentName: 'Autocomplete',
-    unstable_classNamePrefix: 'Joy',
+    unstable_classNamePrefix: 'Mui',
     unstable_isActiveElementInListbox: defaultIsActiveElementInListbox,
   });
 
diff --git a/packages/mui-joy/src/Container/Container.tsx b/packages/mui-joy/src/Container/Container.tsx
index ced9a1d8cc3bf2..174db03cba3922 100644
--- a/packages/mui-joy/src/Container/Container.tsx
+++ b/packages/mui-joy/src/Container/Container.tsx
@@ -8,7 +8,6 @@ import { useThemeProps } from '../styles';
 import { ContainerTypeMap } from './ContainerProps';
 
 const Container = createContainer<Theme>({
-  componentName: 'JoyContainer',
   createStyledComponent: styled('div', {
     name: 'JoyContainer',
     slot: 'Root',
diff --git a/packages/mui-joy/src/Link/Link.tsx b/packages/mui-joy/src/Link/Link.tsx
index 81650f1dfb321d..432e8db1660c74 100644
--- a/packages/mui-joy/src/Link/Link.tsx
+++ b/packages/mui-joy/src/Link/Link.tsx
@@ -76,9 +76,7 @@ const LinkRoot = styled('a', {
       '--Icon-fontSize': '1.25em',
       ...(ownerState.level && ownerState.level !== 'inherit' && theme.typography[ownerState.level]),
       ...(ownerState.level === 'inherit' && {
-        fontSize: 'inherit',
-        fontFamily: 'inherit',
-        lineHeight: 'inherit',
+        font: 'inherit',
       }),
       ...(ownerState.underline === 'none' && {
         textDecoration: 'none',
diff --git a/packages/mui-joy/src/Skeleton/Skeleton.tsx b/packages/mui-joy/src/Skeleton/Skeleton.tsx
index aa5a0656e9f4b3..f316a776ddd49a 100644
--- a/packages/mui-joy/src/Skeleton/Skeleton.tsx
+++ b/packages/mui-joy/src/Skeleton/Skeleton.tsx
@@ -217,7 +217,7 @@ const SkeletonRoot = styled('span', {
         ...(ownerState.level !== 'inherit' && {
           ...theme.typography[ownerState.level!],
         }),
-        '-webkit-mask-image': '-webkit-radial-gradient(white, black)',
+        WebkitMaskImage: '-webkit-radial-gradient(white, black)',
         '&::before': {
           position: 'absolute',
           zIndex: 'var(--unstable_pseudo-zIndex)',
diff --git a/packages/mui-joy/src/className/index.ts b/packages/mui-joy/src/className/index.ts
index 1d47a7d752fa78..78e7353e989d58 100644
--- a/packages/mui-joy/src/className/index.ts
+++ b/packages/mui-joy/src/className/index.ts
@@ -3,7 +3,7 @@ import { unstable_generateUtilityClass, unstable_generateUtilityClasses } from '
 export { unstable_ClassNameGenerator } from '@mui/utils';
 
 export const generateUtilityClass = (componentName: string, slot: string) =>
-  unstable_generateUtilityClass(componentName, slot, 'Joy');
+  unstable_generateUtilityClass(componentName, slot, 'Mui');
 
 export const generateUtilityClasses = <T extends string>(componentName: string, slots: Array<T>) =>
-  unstable_generateUtilityClasses(componentName, slots, 'Joy');
+  unstable_generateUtilityClasses(componentName, slots, 'Mui');
diff --git a/packages/mui-material/src/Chip/Chip.js b/packages/mui-material/src/Chip/Chip.js
index 2157251c44b2ea..5c27c9cba8ed3e 100644
--- a/packages/mui-material/src/Chip/Chip.js
+++ b/packages/mui-material/src/Chip/Chip.js
@@ -92,8 +92,6 @@ const ChipRoot = styled('div', {
       borderRadius: 32 / 2,
       whiteSpace: 'nowrap',
       transition: theme.transitions.create(['background-color', 'box-shadow']),
-      // label will inherit this from root, then `clickable` class overrides this for both
-      cursor: 'default',
       // We disable the focus ring for mouse, touch and keyboard users.
       outline: 0,
       textDecoration: 'none',
diff --git a/packages/mui-material/src/Tabs/Tabs.js b/packages/mui-material/src/Tabs/Tabs.js
index 44d677851ffbbc..12a9f9ba9fa24e 100644
--- a/packages/mui-material/src/Tabs/Tabs.js
+++ b/packages/mui-material/src/Tabs/Tabs.js
@@ -312,10 +312,9 @@ const Tabs = React.forwardRef(function Tabs(inProps, ref) {
 
   const [mounted, setMounted] = React.useState(false);
   const [indicatorStyle, setIndicatorStyle] = React.useState(defaultIndicatorStyle);
-  const [displayScroll, setDisplayScroll] = React.useState({
-    start: false,
-    end: false,
-  });
+  const [displayStartScroll, setDisplayStartScroll] = React.useState(false);
+  const [displayEndScroll, setDisplayEndScroll] = React.useState(false);
+  const [updateScrollObserver, setUpdateScrollObserver] = React.useState(false);
 
   const [scrollerStyle, setScrollerStyle] = React.useState({
     overflow: 'hidden',
@@ -508,7 +507,7 @@ const Tabs = React.forwardRef(function Tabs(inProps, ref) {
       />
     ) : null;
 
-    const scrollButtonsActive = displayScroll.start || displayScroll.end;
+    const scrollButtonsActive = displayStartScroll || displayEndScroll;
     const showScrollButtons =
       scrollable && ((scrollButtons === 'auto' && scrollButtonsActive) || scrollButtons === true);
 
@@ -519,7 +518,7 @@ const Tabs = React.forwardRef(function Tabs(inProps, ref) {
         orientation={orientation}
         direction={isRtl ? 'right' : 'left'}
         onClick={handleStartScrollClick}
-        disabled={!displayScroll.start}
+        disabled={!displayStartScroll}
         {...TabScrollButtonProps}
         className={clsx(classes.scrollButtons, TabScrollButtonProps.className)}
       />
@@ -534,7 +533,7 @@ const Tabs = React.forwardRef(function Tabs(inProps, ref) {
         orientation={orientation}
         direction={isRtl ? 'left' : 'right'}
         onClick={handleEndScrollClick}
-        disabled={!displayScroll.end}
+        disabled={!displayEndScroll}
         {...TabScrollButtonProps}
         className={clsx(classes.scrollButtons, TabScrollButtonProps.className)}
       />
@@ -563,23 +562,7 @@ const Tabs = React.forwardRef(function Tabs(inProps, ref) {
 
   const updateScrollButtonState = useEventCallback(() => {
     if (scrollable && scrollButtons !== false) {
-      const { scrollTop, scrollHeight, clientHeight, scrollWidth, clientWidth } = tabsRef.current;
-      let showStartScroll;
-      let showEndScroll;
-
-      if (vertical) {
-        showStartScroll = scrollTop > 1;
-        showEndScroll = scrollTop < scrollHeight - clientHeight - 1;
-      } else {
-        const scrollLeft = getNormalizedScrollLeft(tabsRef.current, theme.direction);
-        // use 1 for the potential rounding error with browser zooms.
-        showStartScroll = isRtl ? scrollLeft < scrollWidth - clientWidth - 1 : scrollLeft > 1;
-        showEndScroll = !isRtl ? scrollLeft < scrollWidth - clientWidth - 1 : scrollLeft > 1;
-      }
-
-      if (showStartScroll !== displayScroll.start || showEndScroll !== displayScroll.end) {
-        setDisplayScroll({ start: showStartScroll, end: showEndScroll });
-      }
+      setUpdateScrollObserver(!updateScrollObserver);
     }
   });
 
@@ -593,7 +576,6 @@ const Tabs = React.forwardRef(function Tabs(inProps, ref) {
       // replaced by Suspense with a fallback, once React is updated to version 18
       if (tabsRef.current) {
         updateIndicatorState();
-        updateScrollButtonState();
       }
     });
     const win = ownerWindow(tabsRef.current);
@@ -615,21 +597,49 @@ const Tabs = React.forwardRef(function Tabs(inProps, ref) {
         resizeObserver.disconnect();
       }
     };
-  }, [updateIndicatorState, updateScrollButtonState]);
-
-  const handleTabsScroll = React.useMemo(
-    () =>
-      debounce(() => {
-        updateScrollButtonState();
-      }),
-    [updateScrollButtonState],
-  );
+  }, [updateIndicatorState]);
 
+  /**
+   * Toggle visibility of start and end scroll buttons
+   * Using IntersectionObserver on first and last Tabs.
+   */
   React.useEffect(() => {
-    return () => {
-      handleTabsScroll.clear();
-    };
-  }, [handleTabsScroll]);
+    const tabListChildren = Array.from(tabListRef.current.children);
+    const length = tabListChildren.length;
+
+    if (
+      typeof IntersectionObserver !== 'undefined' &&
+      length > 0 &&
+      scrollable &&
+      scrollButtons !== false
+    ) {
+      const firstTab = tabListChildren[0];
+      const lastTab = tabListChildren[length - 1];
+      const observerOptions = {
+        root: tabsRef.current,
+        threshold: 0.99,
+      };
+
+      const handleScrollButtonStart = (entries) => {
+        setDisplayStartScroll(!entries[0].isIntersecting);
+      };
+      const firstObserver = new IntersectionObserver(handleScrollButtonStart, observerOptions);
+      firstObserver.observe(firstTab);
+
+      const handleScrollButtonEnd = (entries) => {
+        setDisplayEndScroll(!entries[0].isIntersecting);
+      };
+      const lastObserver = new IntersectionObserver(handleScrollButtonEnd, observerOptions);
+      lastObserver.observe(lastTab);
+
+      return () => {
+        firstObserver.disconnect();
+        lastObserver.disconnect();
+      };
+    }
+
+    return undefined;
+  }, [scrollable, scrollButtons, updateScrollObserver, childrenProp?.length]);
 
   React.useEffect(() => {
     setMounted(true);
@@ -637,7 +647,6 @@ const Tabs = React.forwardRef(function Tabs(inProps, ref) {
 
   React.useEffect(() => {
     updateIndicatorState();
-    updateScrollButtonState();
   });
 
   React.useEffect(() => {
@@ -763,7 +772,6 @@ const Tabs = React.forwardRef(function Tabs(inProps, ref) {
             : -scrollerStyle.scrollbarWidth,
         }}
         ref={tabsRef}
-        onScroll={handleTabsScroll}
       >
         {/* The tablist isn't interactive but the tabs are */}
         <FlexContainer
diff --git a/packages/mui-material/src/Tabs/Tabs.test.js b/packages/mui-material/src/Tabs/Tabs.test.js
index 16ecb2c42c39c4..03f0be8f8bdb14 100644
--- a/packages/mui-material/src/Tabs/Tabs.test.js
+++ b/packages/mui-material/src/Tabs/Tabs.test.js
@@ -8,6 +8,7 @@ import {
   fireEvent,
   screen,
   strictModeDoubleLoggingSuppressed,
+  waitFor,
 } from 'test/utils';
 import Tab from '@mui/material/Tab';
 import Tabs, { tabsClasses as classes } from '@mui/material/Tabs';
@@ -493,7 +494,6 @@ describe('<Tabs />', () => {
   });
 
   describe('prop: variant="scrollable"', () => {
-    clock.withFakeTimers();
     const tabs = (
       <Tabs value={0} style={{ width: 200 }} variant="scrollable">
         <Tab style={{ width: 120, minWidth: 'auto' }} />
@@ -509,34 +509,6 @@ describe('<Tabs />', () => {
       expect(container.querySelectorAll(selector)).to.have.lengthOf(1);
     });
 
-    it('should response to scroll events', function test() {
-      if (isJSDOM) {
-        this.skip();
-      }
-      const { container, forceUpdate, getByRole } = render(tabs);
-      const tablistContainer = getByRole('tablist').parentElement;
-
-      Object.defineProperty(tablistContainer, 'clientWidth', { value: 200 - 40 * 2 });
-      tablistContainer.scrollLeft = 10;
-      Object.defineProperty(tablistContainer, 'scrollWidth', { value: 216 });
-      Object.defineProperty(tablistContainer, 'getBoundingClientRect', {
-        value: () => ({
-          left: 0,
-          right: 50,
-        }),
-      });
-      forceUpdate();
-      clock.tick(1000);
-      expect(hasLeftScrollButton(container)).to.equal(true);
-      expect(hasRightScrollButton(container)).to.equal(true);
-      tablistContainer.scrollLeft = 0;
-      fireEvent.scroll(container.querySelector(`.${classes.scroller}.${classes.scrollableX}`));
-      clock.tick(166);
-
-      expect(hasLeftScrollButton(container)).to.equal(false);
-      expect(hasRightScrollButton(container)).to.equal(true);
-    });
-
     it('should get a scrollbar size listener', () => {
       const { setProps, getByRole } = render(
         <Tabs value={0}>
@@ -569,8 +541,6 @@ describe('<Tabs />', () => {
   });
 
   describe('prop: scrollButtons', () => {
-    clock.withFakeTimers();
-
     it('should render scroll buttons', () => {
       const { container } = render(
         <Tabs value={0} variant="scrollable" scrollButtons>
@@ -608,65 +578,27 @@ describe('<Tabs />', () => {
       expect(container.querySelectorAll(`.${classes.scrollButtonsHideMobile}`)).to.have.lengthOf(0);
     });
 
-    it('should handle window resize event', function test() {
-      if (isJSDOM) {
-        this.skip();
-      }
-
-      const { container, forceUpdate, getByRole } = render(
-        <Tabs value={0} variant="scrollable" scrollButtons style={{ width: 200 }}>
-          <Tab />
-          <Tab />
-          <Tab />
-        </Tabs>,
-      );
-
-      const tablistContainer = getByRole('tablist').parentElement;
-
-      Object.defineProperty(tablistContainer, 'clientWidth', { value: 200 - 40 * 2 });
-      tablistContainer.scrollLeft = 10;
-      Object.defineProperty(tablistContainer, 'scrollWidth', { value: 216 });
-      Object.defineProperty(tablistContainer, 'getBoundingClientRect', {
-        value: () => ({
-          left: 0,
-          right: 100,
-        }),
-      });
-      forceUpdate();
-      clock.tick(1000);
-      expect(hasLeftScrollButton(container)).to.equal(true);
-      expect(hasRightScrollButton(container)).to.equal(true);
-      tablistContainer.scrollLeft = 0;
-
-      act(() => {
-        window.dispatchEvent(new window.Event('resize', {}));
-      });
-      clock.tick(166);
-
-      expect(hasLeftScrollButton(container)).to.equal(false);
-      expect(hasRightScrollButton(container)).to.equal(true);
-    });
-
     describe('scroll button visibility states', () => {
-      it('should set neither left nor right scroll button state', () => {
-        const { container, forceUpdate, getByRole } = render(
+      it('should set neither left nor right scroll button state', function test() {
+        if (isJSDOM) {
+          this.skip();
+        }
+        const { container } = render(
           <Tabs value={0} variant="scrollable" scrollButtons style={{ width: 200 }}>
             <Tab style={{ width: 50, minWidth: 'auto' }} />
             <Tab style={{ width: 50, minWidth: 'auto' }} />
           </Tabs>,
         );
-        const tablistContainer = getByRole('tablist').parentElement;
-
-        Object.defineProperty(tablistContainer, 'clientWidth', { value: 200 - 40 * 2 });
-        Object.defineProperty(tablistContainer, 'scrollWidth', { value: 200 - 40 * 2 });
 
-        forceUpdate();
         expect(hasLeftScrollButton(container)).to.equal(false);
         expect(hasRightScrollButton(container)).to.equal(false);
       });
 
-      it('should set only left scroll button state', () => {
-        const { container, forceUpdate, getByRole } = render(
+      it('should set only left scroll button state', async function test() {
+        if (isJSDOM) {
+          this.skip();
+        }
+        const { container, getByRole } = render(
           <Tabs value={0} variant="scrollable" scrollButtons style={{ width: 200 }}>
             <Tab style={{ width: 120, minWidth: 'auto' }} />
             <Tab style={{ width: 120, minWidth: 'auto' }} />
@@ -675,17 +607,19 @@ describe('<Tabs />', () => {
         );
         const tablistContainer = getByRole('tablist').parentElement;
 
-        Object.defineProperty(tablistContainer, 'clientWidth', { value: 200 - 40 * 2 });
-        Object.defineProperty(tablistContainer, 'scrollWidth', { value: 216 });
-        tablistContainer.scrollLeft = 96;
+        tablistContainer.scrollLeft = 240;
 
-        forceUpdate();
-        expect(hasLeftScrollButton(container)).to.equal(true);
-        expect(hasRightScrollButton(container)).to.equal(false);
+        await waitFor(() => {
+          expect(hasLeftScrollButton(container)).to.equal(true);
+          expect(hasRightScrollButton(container)).to.equal(false);
+        });
       });
 
-      it('should set only right scroll button state', () => {
-        const { container, forceUpdate, getByRole } = render(
+      it('should set only right scroll button state', async function test() {
+        if (isJSDOM) {
+          this.skip();
+        }
+        const { container, getByRole } = render(
           <Tabs value={0} variant="scrollable" scrollButtons style={{ width: 200 }}>
             <Tab />
             <Tab />
@@ -694,17 +628,19 @@ describe('<Tabs />', () => {
         );
         const tablistContainer = getByRole('tablist').parentElement;
 
-        Object.defineProperty(tablistContainer, 'clientWidth', { value: 200 - 40 * 2 });
-        Object.defineProperty(tablistContainer, 'scrollWidth', { value: 216 });
         tablistContainer.scrollLeft = 0;
 
-        forceUpdate();
-        expect(hasLeftScrollButton(container)).to.equal(false);
-        expect(hasRightScrollButton(container)).to.equal(true);
+        await waitFor(() => {
+          expect(hasLeftScrollButton(container)).to.equal(false);
+          expect(hasRightScrollButton(container)).to.equal(true);
+        });
       });
 
-      it('should set both left and right scroll button state', () => {
-        const { container, forceUpdate, getByRole } = render(
+      it('should set both left and right scroll button state', async function test() {
+        if (isJSDOM) {
+          this.skip();
+        }
+        const { container, getByRole } = render(
           <Tabs value={0} variant="scrollable" scrollButtons style={{ width: 200 }}>
             <Tab style={{ width: 120, minWidth: 'auto' }} />
             <Tab style={{ width: 120, minWidth: 'auto' }} />
@@ -712,13 +648,12 @@ describe('<Tabs />', () => {
         );
         const tablistContainer = getByRole('tablist').parentElement;
 
-        Object.defineProperty(tablistContainer, 'clientWidth', { value: 200 - 40 * 2 });
-        Object.defineProperty(tablistContainer, 'scrollWidth', { value: 216 });
         tablistContainer.scrollLeft = 5;
 
-        forceUpdate();
-        expect(hasLeftScrollButton(container)).to.equal(true);
-        expect(hasRightScrollButton(container)).to.equal(true);
+        await waitFor(() => {
+          expect(hasLeftScrollButton(container)).to.equal(true);
+          expect(hasRightScrollButton(container)).to.equal(true);
+        });
       });
     });
   });
@@ -726,8 +661,12 @@ describe('<Tabs />', () => {
   describe('scroll button behavior', () => {
     clock.withFakeTimers();
 
-    it('should scroll visible items', () => {
-      const { container, forceUpdate, getByRole, getAllByRole } = render(
+    it('should scroll visible items', async function test() {
+      clock.restore();
+      if (isJSDOM) {
+        this.skip();
+      }
+      const { container, getByRole } = render(
         <Tabs value={0} variant="scrollable" scrollButtons style={{ width: 200 }}>
           <Tab style={{ width: 100, minWidth: 'auto' }} />
           <Tab style={{ width: 50, minWidth: 'auto' }} />
@@ -735,26 +674,24 @@ describe('<Tabs />', () => {
         </Tabs>,
       );
       const tablistContainer = getByRole('tablist').parentElement;
-      const tabs = getAllByRole('tab');
-      Object.defineProperty(tablistContainer, 'clientWidth', { value: 200 - 40 * 2 });
-      Object.defineProperty(tabs[0], 'clientWidth', { value: 100 });
-      Object.defineProperty(tabs[1], 'clientWidth', { value: 50 });
-      Object.defineProperty(tabs[2], 'clientWidth', { value: 100 });
-      Object.defineProperty(tablistContainer, 'scrollWidth', { value: 100 + 50 + 100 });
+
       tablistContainer.scrollLeft = 20;
-      forceUpdate();
-      clock.tick(1000);
-      expect(hasLeftScrollButton(container)).to.equal(true);
-      expect(hasRightScrollButton(container)).to.equal(true);
+
+      await waitFor(() => {
+        expect(hasLeftScrollButton(container)).to.equal(true);
+        expect(hasRightScrollButton(container)).to.equal(true);
+      });
 
       fireEvent.click(findScrollButton(container, 'left'));
-      clock.tick(1000);
-      expect(tablistContainer.scrollLeft).not.to.be.above(0);
+      await waitFor(() => {
+        expect(tablistContainer.scrollLeft).not.to.be.above(0);
+      });
 
       tablistContainer.scrollLeft = 0;
       fireEvent.click(findScrollButton(container, 'right'));
-      clock.tick(1000);
-      expect(tablistContainer.scrollLeft).equal(100);
+      await waitFor(() => {
+        expect(tablistContainer.scrollLeft).equal(100);
+      });
     });
 
     it('should horizontally scroll by width of partially visible item', () => {
@@ -1397,4 +1334,76 @@ describe('<Tabs />', () => {
       ]);
     });
   });
+
+  describe('dynamic tabs', () => {
+    const pause = (timeout) =>
+      new Promise((resolve) => {
+        setTimeout(() => {
+          resolve();
+        }, timeout);
+      });
+
+    // https://github.com/mui/material-ui/issues/31936
+    it('should not show scroll buttons if a tab added or removed in vertical mode', async function test() {
+      if (isJSDOM) {
+        this.skip();
+      }
+      function DynamicTabs() {
+        const [value, setValue] = React.useState(0);
+        const handleChange = (event, newValue) => {
+          setValue(newValue);
+        };
+        const [tabs, setTabs] = React.useState(['item1', 'item2']);
+        return (
+          <React.Fragment>
+            <button
+              data-testid="add"
+              onClick={() => {
+                setTabs([...tabs, `item${tabs.length + 1}`]);
+              }}
+            >
+              add
+            </button>
+            <button
+              data-testid="delete"
+              onClick={() => {
+                setTabs(tabs.slice(0, tabs.length - 1));
+                setValue(0);
+              }}
+            >
+              delete
+            </button>
+            <Tabs
+              onChange={handleChange}
+              value={value}
+              orientation="vertical"
+              variant="scrollable"
+              scrollButtons
+              style={{ width: '260px' }}
+            >
+              {tabs.map((label, index) => (
+                <Tab key={`tab${index}`} label={label} />
+              ))}
+            </Tabs>
+          </React.Fragment>
+        );
+      }
+      const { container, getByTestId, getAllByRole } = render(<DynamicTabs />);
+      const addButton = getByTestId('add');
+      const deleteButton = getByTestId('delete');
+
+      fireEvent.click(addButton);
+      expect(hasLeftScrollButton(container)).to.equal(false);
+      expect(hasRightScrollButton(container)).to.equal(false);
+
+      const tabs = getAllByRole('tab');
+      const lastTab = tabs[tabs.length - 1];
+      fireEvent.click(lastTab);
+      await pause(400);
+
+      fireEvent.click(deleteButton);
+      expect(hasLeftScrollButton(container)).to.equal(false);
+      expect(hasRightScrollButton(container)).to.equal(false);
+    });
+  });
 });
diff --git a/packages/mui-material/test/typescript/moduleAugmentation/paletteColors.spec.ts b/packages/mui-material/test/typescript/moduleAugmentation/paletteColors.spec.ts
index 0267313b73f831..797117ec41b7b4 100644
--- a/packages/mui-material/test/typescript/moduleAugmentation/paletteColors.spec.ts
+++ b/packages/mui-material/test/typescript/moduleAugmentation/paletteColors.spec.ts
@@ -28,6 +28,12 @@ declare module '@mui/material/styles' {
   }
 }
 
+declare module '@mui/material/Button' {
+  interface ButtonPropsColorOverrides {
+    neutral: true;
+  }
+}
+
 const theme = createTheme({
   status: {
     danger: '#e53e3e',
diff --git a/packages/rsc-builder/buildRsc.ts b/packages/rsc-builder/buildRsc.ts
index 9fa723f3a400d3..b8d79f9ddac1b2 100644
--- a/packages/rsc-builder/buildRsc.ts
+++ b/packages/rsc-builder/buildRsc.ts
@@ -1,14 +1,11 @@
 import * as yargs from 'yargs';
 import * as fse from 'fs-extra';
-import os from 'os';
 import path from 'path';
 import findComponents from '../api-docs-builder/utils/findComponents';
 import findHooks from '../api-docs-builder/utils/findHooks';
 
 type CommandOptions = { grep?: string };
 
-const { EOL } = os;
-
 const PROJECTS = [
   {
     name: 'base',
@@ -44,14 +41,17 @@ async function processFile(
   filename: string,
   options: {
     lineToPrepend?: string;
-    truncate?: boolean;
   } = {},
 ) {
-  const { lineToPrepend = `'use client';${EOL}`, truncate = true } = options;
+  const { lineToPrepend = `'use client';` } = options;
   const contents = await fse.readFile(filename, 'utf8');
 
-  const truncatedContents = truncate ? contents.split(/\r?\n/).slice(1).join('\n') : contents;
-  const newContents = `${lineToPrepend}${truncatedContents}`;
+  const lines = contents.split(/\r?\n/);
+  if (lines[0] === lineToPrepend) {
+    return;
+  }
+
+  const newContents = `${lineToPrepend}\n${contents}`;
 
   await fse.writeFile(filename, newContents);
 }
diff --git a/test/e2e/index.test.ts b/test/e2e/index.test.ts
index a00a3cf5455fbd..41ee58e532f1d8 100644
--- a/test/e2e/index.test.ts
+++ b/test/e2e/index.test.ts
@@ -232,7 +232,7 @@ describe('e2e', () => {
       await page.keyboard.down('ArrowDown'); // moves to 4th option
 
       const listbox = (await screen.getByRole('listbox'))!;
-      const focusedOption = (await listbox.$('.Joy-focused'))!;
+      const focusedOption = (await listbox.$('.Mui-focused'))!;
       const focusedOptionText = await focusedOption.innerHTML();
 
       expect(focusedOptionText).to.equal('four');
diff --git a/test/utils/createRenderer.tsx b/test/utils/createRenderer.tsx
index d4dd831f1b43f1..0385f0b301fd1f 100644
--- a/test/utils/createRenderer.tsx
+++ b/test/utils/createRenderer.tsx
@@ -357,6 +357,10 @@ interface Clock {
    * Runs the current test suite (i.e. `describe` block) with fake timers.
    */
   withFakeTimers(): void;
+  /**
+   * Restore the real timer
+   */
+  restore(): void;
 }
 
 type ClockConfig = undefined | number | Date;
@@ -426,6 +430,9 @@ function createClock(defaultMode: 'fake' | 'real', config: ClockConfig): Clock {
         mode = defaultMode;
       });
     },
+    restore() {
+      clock?.restore();
+    },
   };
 }
 
diff --git a/tslint.json b/tslint.json
index 18951b97548df0..218fda5ae6d022 100644
--- a/tslint.json
+++ b/tslint.json
@@ -3,7 +3,6 @@
   "extends": ["dtslint/dtslint.json"],
   "jsRules": {},
   "rules": {
-    "deprecation": true,
     // $ExpectError -> @ts-expect-error
     // $ExpectType -> `expectType` from `@mui/types`
     // Don't disable this rule unless you made sure `tsc` runs on the same files