diff --git a/babel.config.js b/babel.config.js
index 31279ecad0686..b67f02fa534d7 100644
--- a/babel.config.js
+++ b/babel.config.js
@@ -30,6 +30,7 @@ const defaultAlias = {
   '@mui/x-tree-view': resolveAliasPath('./packages/x-tree-view/src'),
   '@mui/x-tree-view-pro': resolveAliasPath('./packages/x-tree-view-pro/src'),
   '@mui/x-internals': resolveAliasPath('./packages/x-internals/src'),
+  '@mui/material-nextjs': '@mui/monorepo/packages/mui-material-nextjs/src',
   '@mui-internal/api-docs-builder': resolveAliasPath(
     './node_modules/@mui/monorepo/packages/api-docs-builder',
   ),
diff --git a/docs/data/date-pickers/custom-layout/AddComponent.tsx b/docs/data/date-pickers/custom-layout/AddComponent.tsx
index 837f63dd89fe8..2b398876c7d21 100644
--- a/docs/data/date-pickers/custom-layout/AddComponent.tsx
+++ b/docs/data/date-pickers/custom-layout/AddComponent.tsx
@@ -16,7 +16,6 @@ import {
   PickersLayoutRoot,
   PickersLayoutContentWrapper,
 } from '@mui/x-date-pickers/PickersLayout';
-import { DateView } from '@mui/x-date-pickers/models';
 import { PickersActionBarProps } from '@mui/x-date-pickers/PickersActionBar';
 import { usePickerActionsContext } from '@mui/x-date-pickers/hooks';
 
@@ -63,7 +62,7 @@ function RestaurantHeader() {
   );
 }
 
-function CustomLayout(props: PickersLayoutProps<Dayjs | null, DateView>) {
+function CustomLayout(props: PickersLayoutProps<Dayjs | null>) {
   const { toolbar, tabs, content, actionBar, ownerState } = usePickerLayout(props);
 
   return (
diff --git a/docs/data/migration/migration-pickers-v7/migration-pickers-v7.md b/docs/data/migration/migration-pickers-v7/migration-pickers-v7.md
index 62df8c1afa4c8..d7315974d17d4 100644
--- a/docs/data/migration/migration-pickers-v7/migration-pickers-v7.md
+++ b/docs/data/migration/migration-pickers-v7/migration-pickers-v7.md
@@ -364,55 +364,62 @@ This change causes a few breaking changes:
    );
   ```
 
-- The component passed to the `layout` slot no longer receives a `disabled` prop, instead you can use the `usePickerContext` hook:
+- The component passed to the `layout` slot no longer receives the `disabled` and `readOnly` props, instead you can use the `usePickerContext` hook:
 
   ```diff
-  -console.log(props.disabled);
   +import { usePickerContext } from '@mui/x-date-pickers/hooks';
-  +const { disabled } = usePickerContext();
-  +console.log(disabled);
-  ```
 
-- The component passed to the `layout` slot no longer receives a `readOnly` prop, instead you can use the `usePickerContext` hook:
+  -const { disabled } = props;
+  +const { disabled } = usePickerContext();
 
-  ```diff
-  -console.log(props.readOnly);
-  +import { usePickerContext } from '@mui/x-date-pickers/hooks';
+  -const { readOnly } = props;
   +const { readOnly } = usePickerContext();
-  +console.log(readOnly);
   ```
 
 - The component passed to the `layout` slot no longer receives an `isRtl` prop. If you need to access this information, you can use the `useRtl` hook from `@mui/system`:
 
   ```diff
   +import { useRtl } from '@mui/system/RtlProvider';
-   function CustomLayout(props) {
-  -  console.log(props.isRtl);
+
+  -  const { isRtl } = props;
   +  const isRtl = useRtl();
-  +  console.log(isRtl);
-   }
   ```
 
 - The component passed to the `layout` slot no longer receives the `orientation` and `isLandscape` props, instead you can use the `usePickerContext` hook:
 
   ```diff
-  -console.log(props.orientation);
   +import { usePickerContext } from '@mui/x-date-pickers/hooks';
+
+  -const { orientation } = props;
   +const { orientation } = usePickerContext();
-  +console.log(orientation);
-  -console.log(props.isLandscape);
-  +import { usePickerContext } from '@mui/x-date-pickers/hooks';
+
+  -const { isLandscape } = props;
   +const { orientation } = usePickerContext();
-  +console.log(orientation === 'landscape');
+  +const isLandscape = orientation === 'landscape';
   ```
 
 - The component passed to the `layout` slot no longer receives a `wrapperVariant` prop, instead you can use the `usePickerContext` hook:
 
   ```diff
-  -console.log(props.wrapperVariant);
   +import { usePickerContext } from '@mui/x-date-pickers/hooks';
+
+  -const { wrapperVariant } = props;
   +const { variant } = usePickerContext();
-  +console.log(variant);
+  ```
+
+- The component passed to the `layout` slot no longer receives the `view`, `views` and `onViewChange` props, instead you can use the `usePickerContext` hook:
+
+  ```diff
+  +import { usePickerContext } from '@mui/x-date-pickers/hooks';
+
+  -const { view } = props;
+  +const { view } = usePickerContext();
+
+  -const { views } = props;
+  +const { views } = usePickerContext();
+
+  -const { onViewChange } = props;
+  +const { onViewChange } = usePickerContext();
   ```
 
 - The component passed to the `layout` slot no longer receives the `onClear`, `onSetToday`, `onAccept`, `onCancel`, `onOpen`, `onClose` and `onDismiss` props, instead you can use the `usePickerActionsContext` or the `usePickerContext` hooks:
@@ -462,22 +469,48 @@ This change causes a few breaking changes:
 
 ### Slot: `toolbar`
 
-- The component passed to the `toolbar` slot no longer receives a `disabled` prop, instead you can use the `usePickerContext` hook:
+- The component passed to the `toolbar` slot no longer receives the `disabled` and `readOnly` props, instead you can use the `usePickerContext` hook:
 
   ```diff
-  -console.log(props.disabled);
   +import { usePickerContext } from '@mui/x-date-pickers/hooks';
+
+  -const { disabled } = props;
   +const { disabled } = usePickerContext();
-  +console.log(disabled);
+
+  -const { readOnly } = props;
+  +const { readOnly } = usePickerContext();
   ```
 
-- The component passed to the `toolbar` slot no longer receives a `readOnly` prop, instead you can use the `usePickerContext` hook:
+- The component passed to the `toolbar` slot no longer receives a `view`, `views` and `onViewChange` props, instead you can use the `usePickerContext` hook:
 
   ```diff
-  -console.log(props.readOnly);
   +import { usePickerContext } from '@mui/x-date-pickers/hooks';
-  +const { readOnly } = usePickerContext();
-  +console.log(readOnly);
+
+  -const { view } = props;
+  +const { view } = usePickerContext();
+
+  -const { views } = props;
+  +const { views } = usePickerContext();
+
+  -const { onViewChange } = props;
+  +const { onViewChange } = usePickerContext();
+  ```
+
+### Slot: `tabs`
+
+- The component passed to the `tabs` slot no longer receives a `view`, `views` and `onViewChange` props, instead you can use the `usePickerContext` hook:
+
+  ```diff
+  +import { usePickerContext } from '@mui/x-date-pickers/hooks';
+
+  -const { view } = props;
+  +const { view } = usePickerContext();
+
+  -const { views } = props;
+  +const { views } = usePickerContext();
+
+  -const { onViewChange } = props;
+  +const { onViewChange } = usePickerContext();
   ```
 
 ### Slot: `actionBar`
diff --git a/docs/next-env.d.ts b/docs/next-env.d.ts
index a4a7b3f5cfa2f..52e831b434248 100644
--- a/docs/next-env.d.ts
+++ b/docs/next-env.d.ts
@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.
+// see https://nextjs.org/docs/pages/api-reference/config/typescript for more information.
diff --git a/docs/package.json b/docs/package.json
index b1389e9b87cf5..aca4dfdc157a5 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -32,6 +32,7 @@
     "@mui/joy": "^5.0.0-beta.48",
     "@mui/lab": "^5.0.0-alpha.173",
     "@mui/material": "^5.16.11",
+    "@mui/material-nextjs": "^5.16.8",
     "@mui/styles": "^5.16.11",
     "@mui/system": "^5.16.8",
     "@mui/utils": "^5.16.8",
diff --git a/docs/pages/x/api/date-pickers/date-picker-toolbar.json b/docs/pages/x/api/date-pickers/date-picker-toolbar.json
index aa2ee2a36df1d..d45ecc4dc212b 100644
--- a/docs/pages/x/api/date-pickers/date-picker-toolbar.json
+++ b/docs/pages/x/api/date-pickers/date-picker-toolbar.json
@@ -1,24 +1,5 @@
 {
   "props": {
-    "onViewChange": {
-      "type": { "name": "func" },
-      "required": true,
-      "signature": { "type": "function(view: TView) => void", "describedArgs": ["view"] }
-    },
-    "view": {
-      "type": {
-        "name": "enum",
-        "description": "'day'<br>&#124;&nbsp;'month'<br>&#124;&nbsp;'year'"
-      },
-      "required": true
-    },
-    "views": {
-      "type": {
-        "name": "arrayOf",
-        "description": "Array&lt;'day'<br>&#124;&nbsp;'month'<br>&#124;&nbsp;'year'&gt;"
-      },
-      "required": true
-    },
     "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } },
     "hidden": { "type": { "name": "bool" }, "default": "`true` for Desktop, `false` for Mobile." },
     "sx": {
diff --git a/docs/pages/x/api/date-pickers/date-range-picker-toolbar.json b/docs/pages/x/api/date-pickers/date-range-picker-toolbar.json
index 8e907ede02236..b95d8610ead83 100644
--- a/docs/pages/x/api/date-pickers/date-range-picker-toolbar.json
+++ b/docs/pages/x/api/date-pickers/date-range-picker-toolbar.json
@@ -1,15 +1,5 @@
 {
   "props": {
-    "onViewChange": {
-      "type": { "name": "func" },
-      "required": true,
-      "signature": { "type": "function(view: TView) => void", "describedArgs": ["view"] }
-    },
-    "view": { "type": { "name": "enum", "description": "'day'" }, "required": true },
-    "views": {
-      "type": { "name": "arrayOf", "description": "Array&lt;'day'&gt;" },
-      "required": true
-    },
     "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } },
     "hidden": { "type": { "name": "bool" }, "default": "`true` for Desktop, `false` for Mobile." },
     "sx": {
diff --git a/docs/pages/x/api/date-pickers/date-time-picker-tabs.json b/docs/pages/x/api/date-pickers/date-time-picker-tabs.json
index 1b401f930604a..7c1e83a7debb6 100644
--- a/docs/pages/x/api/date-pickers/date-time-picker-tabs.json
+++ b/docs/pages/x/api/date-pickers/date-time-picker-tabs.json
@@ -1,17 +1,5 @@
 {
   "props": {
-    "onViewChange": {
-      "type": { "name": "func" },
-      "required": true,
-      "signature": { "type": "function(view: TView) => void", "describedArgs": ["view"] }
-    },
-    "view": {
-      "type": {
-        "name": "enum",
-        "description": "'day'<br>&#124;&nbsp;'hours'<br>&#124;&nbsp;'meridiem'<br>&#124;&nbsp;'minutes'<br>&#124;&nbsp;'month'<br>&#124;&nbsp;'seconds'<br>&#124;&nbsp;'year'"
-      },
-      "required": true
-    },
     "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } },
     "dateIcon": { "type": { "name": "node" }, "default": "DateRange" },
     "hidden": {
diff --git a/docs/pages/x/api/date-pickers/date-time-picker-toolbar.json b/docs/pages/x/api/date-pickers/date-time-picker-toolbar.json
index 5e4b5e44022b3..97fb4c4871116 100644
--- a/docs/pages/x/api/date-pickers/date-time-picker-toolbar.json
+++ b/docs/pages/x/api/date-pickers/date-time-picker-toolbar.json
@@ -1,17 +1,5 @@
 {
   "props": {
-    "onViewChange": {
-      "type": { "name": "func" },
-      "required": true,
-      "signature": { "type": "function(view: TView) => void", "describedArgs": ["view"] }
-    },
-    "views": {
-      "type": {
-        "name": "arrayOf",
-        "description": "Array&lt;'day'<br>&#124;&nbsp;'hours'<br>&#124;&nbsp;'meridiem'<br>&#124;&nbsp;'minutes'<br>&#124;&nbsp;'month'<br>&#124;&nbsp;'seconds'<br>&#124;&nbsp;'year'&gt;"
-      },
-      "required": true
-    },
     "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } },
     "hidden": { "type": { "name": "bool" }, "default": "`true` for Desktop, `false` for Mobile." },
     "sx": {
@@ -23,13 +11,7 @@
     },
     "toolbarFormat": { "type": { "name": "string" } },
     "toolbarPlaceholder": { "type": { "name": "node" }, "default": "\"––\"" },
-    "toolbarTitle": { "type": { "name": "node" } },
-    "view": {
-      "type": {
-        "name": "enum",
-        "description": "'day'<br>&#124;&nbsp;'hours'<br>&#124;&nbsp;'meridiem'<br>&#124;&nbsp;'minutes'<br>&#124;&nbsp;'month'<br>&#124;&nbsp;'seconds'<br>&#124;&nbsp;'year'"
-      }
-    }
+    "toolbarTitle": { "type": { "name": "node" } }
   },
   "name": "DateTimePickerToolbar",
   "imports": [
diff --git a/docs/pages/x/api/date-pickers/date-time-range-picker-tabs.json b/docs/pages/x/api/date-pickers/date-time-range-picker-tabs.json
index ddc60b796d52c..732d525f3e0bb 100644
--- a/docs/pages/x/api/date-pickers/date-time-range-picker-tabs.json
+++ b/docs/pages/x/api/date-pickers/date-time-range-picker-tabs.json
@@ -1,17 +1,5 @@
 {
   "props": {
-    "onViewChange": {
-      "type": { "name": "func" },
-      "required": true,
-      "signature": { "type": "function(view: TView) => void", "describedArgs": ["view"] }
-    },
-    "view": {
-      "type": {
-        "name": "enum",
-        "description": "'day'<br>&#124;&nbsp;'hours'<br>&#124;&nbsp;'meridiem'<br>&#124;&nbsp;'minutes'<br>&#124;&nbsp;'month'<br>&#124;&nbsp;'seconds'<br>&#124;&nbsp;'year'"
-      },
-      "required": true
-    },
     "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } },
     "dateIcon": { "type": { "name": "element" }, "default": "DateRangeIcon" },
     "hidden": {
diff --git a/docs/pages/x/api/date-pickers/date-time-range-picker-toolbar.json b/docs/pages/x/api/date-pickers/date-time-range-picker-toolbar.json
index c7b155134c015..3489711e1a703 100644
--- a/docs/pages/x/api/date-pickers/date-time-range-picker-toolbar.json
+++ b/docs/pages/x/api/date-pickers/date-time-range-picker-toolbar.json
@@ -1,24 +1,5 @@
 {
   "props": {
-    "onViewChange": {
-      "type": { "name": "func" },
-      "required": true,
-      "signature": { "type": "function(view: TView) => void", "describedArgs": ["view"] }
-    },
-    "view": {
-      "type": {
-        "name": "enum",
-        "description": "'day'<br>&#124;&nbsp;'hours'<br>&#124;&nbsp;'meridiem'<br>&#124;&nbsp;'minutes'<br>&#124;&nbsp;'seconds'"
-      },
-      "required": true
-    },
-    "views": {
-      "type": {
-        "name": "arrayOf",
-        "description": "Array&lt;'day'<br>&#124;&nbsp;'hours'<br>&#124;&nbsp;'meridiem'<br>&#124;&nbsp;'minutes'<br>&#124;&nbsp;'seconds'&gt;"
-      },
-      "required": true
-    },
     "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } },
     "hidden": { "type": { "name": "bool" }, "default": "`true` for Desktop, `false` for Mobile." },
     "sx": {
diff --git a/docs/pages/x/api/date-pickers/time-picker-toolbar.json b/docs/pages/x/api/date-pickers/time-picker-toolbar.json
index 0ac030abb5f11..649a49a01c186 100644
--- a/docs/pages/x/api/date-pickers/time-picker-toolbar.json
+++ b/docs/pages/x/api/date-pickers/time-picker-toolbar.json
@@ -1,24 +1,5 @@
 {
   "props": {
-    "onViewChange": {
-      "type": { "name": "func" },
-      "required": true,
-      "signature": { "type": "function(view: TView) => void", "describedArgs": ["view"] }
-    },
-    "view": {
-      "type": {
-        "name": "enum",
-        "description": "'hours'<br>&#124;&nbsp;'meridiem'<br>&#124;&nbsp;'minutes'<br>&#124;&nbsp;'seconds'"
-      },
-      "required": true
-    },
-    "views": {
-      "type": {
-        "name": "arrayOf",
-        "description": "Array&lt;'hours'<br>&#124;&nbsp;'meridiem'<br>&#124;&nbsp;'minutes'<br>&#124;&nbsp;'seconds'&gt;"
-      },
-      "required": true
-    },
     "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } },
     "hidden": { "type": { "name": "bool" }, "default": "`true` for Desktop, `false` for Mobile." },
     "sx": {
diff --git a/docs/src/modules/components/overview/CustomLayoutRangePicker.tsx b/docs/src/modules/components/overview/CustomLayoutRangePicker.tsx
index d6b757465b968..da7dd57266b0a 100644
--- a/docs/src/modules/components/overview/CustomLayoutRangePicker.tsx
+++ b/docs/src/modules/components/overview/CustomLayoutRangePicker.tsx
@@ -55,7 +55,7 @@ const shortcutsItems: PickersShortcutsItem<DateRange<Dayjs>>[] = [
   { label: 'Reset', getValue: () => [null, null] },
 ];
 
-interface CustomLayoutProps extends PickersLayoutProps<DateRange<Dayjs>, 'day'> {
+interface CustomLayoutProps extends PickersLayoutProps<DateRange<Dayjs>> {
   layout: Layout;
 }
 
diff --git a/docs/src/modules/components/overview/mainDemo/Clock.tsx b/docs/src/modules/components/overview/mainDemo/Clock.tsx
index 1b574dede42c1..dc3efca35696d 100644
--- a/docs/src/modules/components/overview/mainDemo/Clock.tsx
+++ b/docs/src/modules/components/overview/mainDemo/Clock.tsx
@@ -10,7 +10,6 @@ import {
   PickersLayoutRoot,
   PickersLayoutContentWrapper,
 } from '@mui/x-date-pickers/PickersLayout';
-import { TimeView } from '@mui/x-date-pickers/models';
 
 const StyledLayout = styled(PickersLayoutRoot)({
   overflow: 'auto',
@@ -31,7 +30,7 @@ const StyledLayout = styled(PickersLayoutRoot)({
   },
 });
 
-function CustomLayout(props: PickersLayoutProps<Dayjs | null, TimeView>) {
+function CustomLayout(props: PickersLayoutProps<Dayjs | null>) {
   const { actionBar, content, toolbar, ownerState } = usePickerLayout(props);
   return (
     <StyledLayout ownerState={ownerState}>
diff --git a/docs/src/modules/components/overview/mainDemo/DateRangeWithShortcuts.tsx b/docs/src/modules/components/overview/mainDemo/DateRangeWithShortcuts.tsx
index 5d0485b192d09..f1199ef6aa422 100644
--- a/docs/src/modules/components/overview/mainDemo/DateRangeWithShortcuts.tsx
+++ b/docs/src/modules/components/overview/mainDemo/DateRangeWithShortcuts.tsx
@@ -55,7 +55,7 @@ const shortcutsItems: PickersShortcutsItem<DateRange<Dayjs>>[] = [
   { label: 'Reset', getValue: () => [null, null] },
 ];
 
-interface CustomLayoutProps extends PickersLayoutProps<DateRange<Dayjs>, 'day'> {
+interface CustomLayoutProps extends PickersLayoutProps<DateRange<Dayjs>> {
   isHorizontal?: boolean;
 }
 function CustomLayout(props: CustomLayoutProps) {
diff --git a/docs/src/modules/components/overview/mainDemo/DigitalClock.tsx b/docs/src/modules/components/overview/mainDemo/DigitalClock.tsx
index d2dc94b2a1537..e2d30b7f8211c 100644
--- a/docs/src/modules/components/overview/mainDemo/DigitalClock.tsx
+++ b/docs/src/modules/components/overview/mainDemo/DigitalClock.tsx
@@ -13,7 +13,6 @@ import {
   PickersLayoutContentWrapper,
 } from '@mui/x-date-pickers/PickersLayout';
 import { renderMultiSectionDigitalClockTimeView } from '@mui/x-date-pickers/timeViewRenderers';
-import { TimeView } from '@mui/x-date-pickers/models';
 
 const StyledLayout = styled(PickersLayoutRoot)({
   overflow: 'auto',
@@ -24,7 +23,7 @@ const StyledLayout = styled(PickersLayoutRoot)({
   },
 });
 
-function CustomLayout(props: PickersLayoutProps<Dayjs | null, TimeView>) {
+function CustomLayout(props: PickersLayoutProps<Dayjs | null>) {
   const { actionBar, content, ownerState } = usePickerLayout(props);
   return (
     <StyledLayout ownerState={ownerState}>
diff --git a/docs/translations/api-docs/date-pickers/date-picker-toolbar/date-picker-toolbar.json b/docs/translations/api-docs/date-pickers/date-picker-toolbar/date-picker-toolbar.json
index 35ceea6728aab..d69f7f54c1b0c 100644
--- a/docs/translations/api-docs/date-pickers/date-picker-toolbar/date-picker-toolbar.json
+++ b/docs/translations/api-docs/date-pickers/date-picker-toolbar/date-picker-toolbar.json
@@ -3,19 +3,13 @@
   "propDescriptions": {
     "classes": { "description": "Override or extend the styles applied to the component." },
     "hidden": { "description": "If <code>true</code>, show the toolbar even in desktop mode." },
-    "onViewChange": {
-      "description": "Callback called when a toolbar is clicked",
-      "typeDescriptions": { "view": "The view to open" }
-    },
     "sx": {
       "description": "The system prop that allows defining system overrides as well as additional CSS styles."
     },
     "toolbarFormat": { "description": "Toolbar date format." },
     "toolbarPlaceholder": {
       "description": "Toolbar value placeholder—it is displayed when the value is empty."
-    },
-    "view": { "description": "Currently visible picker view." },
-    "views": { "description": "Available views." }
+    }
   },
   "classDescriptions": {
     "root": { "description": "Styles applied to the root element." },
diff --git a/docs/translations/api-docs/date-pickers/date-range-picker-toolbar/date-range-picker-toolbar.json b/docs/translations/api-docs/date-pickers/date-range-picker-toolbar/date-range-picker-toolbar.json
index 6198bb709b0e6..c812f7977b2cd 100644
--- a/docs/translations/api-docs/date-pickers/date-range-picker-toolbar/date-range-picker-toolbar.json
+++ b/docs/translations/api-docs/date-pickers/date-range-picker-toolbar/date-range-picker-toolbar.json
@@ -3,19 +3,13 @@
   "propDescriptions": {
     "classes": { "description": "Override or extend the styles applied to the component." },
     "hidden": { "description": "If <code>true</code>, show the toolbar even in desktop mode." },
-    "onViewChange": {
-      "description": "Callback called when a toolbar is clicked",
-      "typeDescriptions": { "view": "The view to open" }
-    },
     "sx": {
       "description": "The system prop that allows defining system overrides as well as additional CSS styles."
     },
     "toolbarFormat": { "description": "Toolbar date format." },
     "toolbarPlaceholder": {
       "description": "Toolbar value placeholder—it is displayed when the value is empty."
-    },
-    "view": { "description": "Currently visible picker view." },
-    "views": { "description": "Available views." }
+    }
   },
   "classDescriptions": {
     "container": {
diff --git a/docs/translations/api-docs/date-pickers/date-time-picker-tabs/date-time-picker-tabs.json b/docs/translations/api-docs/date-pickers/date-time-picker-tabs/date-time-picker-tabs.json
index 57e9f88d0d2c4..bde77f89c9696 100644
--- a/docs/translations/api-docs/date-pickers/date-time-picker-tabs/date-time-picker-tabs.json
+++ b/docs/translations/api-docs/date-pickers/date-time-picker-tabs/date-time-picker-tabs.json
@@ -4,15 +4,10 @@
     "classes": { "description": "Override or extend the styles applied to the component." },
     "dateIcon": { "description": "Date tab icon." },
     "hidden": { "description": "Toggles visibility of the tabs allowing view switching." },
-    "onViewChange": {
-      "description": "Callback called when a tab is clicked.",
-      "typeDescriptions": { "view": "The view to open" }
-    },
     "sx": {
       "description": "The system prop that allows defining system overrides as well as additional CSS styles."
     },
-    "timeIcon": { "description": "Time tab icon." },
-    "view": { "description": "Currently visible picker view." }
+    "timeIcon": { "description": "Time tab icon." }
   },
   "classDescriptions": { "root": { "description": "Styles applied to the root element." } }
 }
diff --git a/docs/translations/api-docs/date-pickers/date-time-picker-toolbar/date-time-picker-toolbar.json b/docs/translations/api-docs/date-pickers/date-time-picker-toolbar/date-time-picker-toolbar.json
index fa51d520fd070..1617f547fbfd6 100644
--- a/docs/translations/api-docs/date-pickers/date-time-picker-toolbar/date-time-picker-toolbar.json
+++ b/docs/translations/api-docs/date-pickers/date-time-picker-toolbar/date-time-picker-toolbar.json
@@ -3,10 +3,6 @@
   "propDescriptions": {
     "classes": { "description": "Override or extend the styles applied to the component." },
     "hidden": { "description": "If <code>true</code>, show the toolbar even in desktop mode." },
-    "onViewChange": {
-      "description": "Callback called when a toolbar is clicked",
-      "typeDescriptions": { "view": "The view to open" }
-    },
     "sx": {
       "description": "The system prop that allows defining system overrides as well as additional CSS styles."
     },
@@ -16,9 +12,7 @@
     },
     "toolbarTitle": {
       "description": "If provided, it will be used instead of <code>dateTimePickerToolbarTitle</code> from localization."
-    },
-    "view": { "description": "Currently visible picker view." },
-    "views": { "description": "Available views." }
+    }
   },
   "classDescriptions": {
     "ampmLabel": { "description": "Styles applied to {{nodeName}}.", "nodeName": "am/pm labels" },
diff --git a/docs/translations/api-docs/date-pickers/date-time-range-picker-tabs/date-time-range-picker-tabs.json b/docs/translations/api-docs/date-pickers/date-time-range-picker-tabs/date-time-range-picker-tabs.json
index 40d062cc2ac95..d75a7d177e62f 100644
--- a/docs/translations/api-docs/date-pickers/date-time-range-picker-tabs/date-time-range-picker-tabs.json
+++ b/docs/translations/api-docs/date-pickers/date-time-range-picker-tabs/date-time-range-picker-tabs.json
@@ -4,15 +4,10 @@
     "classes": { "description": "Override or extend the styles applied to the component." },
     "dateIcon": { "description": "Date tab icon." },
     "hidden": { "description": "Toggles visibility of the tabs allowing view switching." },
-    "onViewChange": {
-      "description": "Callback called when a tab is clicked.",
-      "typeDescriptions": { "view": "The view to open" }
-    },
     "sx": {
       "description": "The system prop that allows defining system overrides as well as additional CSS styles."
     },
-    "timeIcon": { "description": "Time tab icon." },
-    "view": { "description": "Currently visible picker view." }
+    "timeIcon": { "description": "Time tab icon." }
   },
   "classDescriptions": {
     "filler": {
diff --git a/docs/translations/api-docs/date-pickers/date-time-range-picker-toolbar/date-time-range-picker-toolbar.json b/docs/translations/api-docs/date-pickers/date-time-range-picker-toolbar/date-time-range-picker-toolbar.json
index 2819a2b5a12f8..839dbbc465ac8 100644
--- a/docs/translations/api-docs/date-pickers/date-time-range-picker-toolbar/date-time-range-picker-toolbar.json
+++ b/docs/translations/api-docs/date-pickers/date-time-range-picker-toolbar/date-time-range-picker-toolbar.json
@@ -3,19 +3,13 @@
   "propDescriptions": {
     "classes": { "description": "Override or extend the styles applied to the component." },
     "hidden": { "description": "If <code>true</code>, show the toolbar even in desktop mode." },
-    "onViewChange": {
-      "description": "Callback called when a toolbar is clicked",
-      "typeDescriptions": { "view": "The view to open" }
-    },
     "sx": {
       "description": "The system prop that allows defining system overrides as well as additional CSS styles."
     },
     "toolbarFormat": { "description": "Toolbar date format." },
     "toolbarPlaceholder": {
       "description": "Toolbar value placeholder—it is displayed when the value is empty."
-    },
-    "view": { "description": "Currently visible picker view." },
-    "views": { "description": "Available views." }
+    }
   },
   "classDescriptions": {
     "endToolbar": {
diff --git a/docs/translations/api-docs/date-pickers/time-picker-toolbar/time-picker-toolbar.json b/docs/translations/api-docs/date-pickers/time-picker-toolbar/time-picker-toolbar.json
index e0a4f0248d90c..d918f8d53050b 100644
--- a/docs/translations/api-docs/date-pickers/time-picker-toolbar/time-picker-toolbar.json
+++ b/docs/translations/api-docs/date-pickers/time-picker-toolbar/time-picker-toolbar.json
@@ -3,19 +3,13 @@
   "propDescriptions": {
     "classes": { "description": "Override or extend the styles applied to the component." },
     "hidden": { "description": "If <code>true</code>, show the toolbar even in desktop mode." },
-    "onViewChange": {
-      "description": "Callback called when a toolbar is clicked",
-      "typeDescriptions": { "view": "The view to open" }
-    },
     "sx": {
       "description": "The system prop that allows defining system overrides as well as additional CSS styles."
     },
     "toolbarFormat": { "description": "Toolbar date format." },
     "toolbarPlaceholder": {
       "description": "Toolbar value placeholder—it is displayed when the value is empty."
-    },
-    "view": { "description": "Currently visible picker view." },
-    "views": { "description": "Available views." }
+    }
   },
   "classDescriptions": {
     "ampmLabel": {
diff --git a/packages/x-data-grid-premium/src/hooks/features/rowGrouping/useGridRowGroupingPreProcessors.ts b/packages/x-data-grid-premium/src/hooks/features/rowGrouping/useGridRowGroupingPreProcessors.ts
index ac43f038695ab..435ac1ca1a7eb 100644
--- a/packages/x-data-grid-premium/src/hooks/features/rowGrouping/useGridRowGroupingPreProcessors.ts
+++ b/packages/x-data-grid-premium/src/hooks/features/rowGrouping/useGridRowGroupingPreProcessors.ts
@@ -116,10 +116,13 @@ export const useGridRowGroupingPreProcessors = (
       const groupingColDefs = getGroupingColDefs(columnsState);
       let newColumnFields: string[] = [];
       const newColumnsLookup: GridColumnRawLookup = {};
+      const prevGroupingfields: string[] = [];
 
       // We only keep the non-grouping columns
       columnsState.orderedFields.forEach((field) => {
-        if (!isGroupingColumn(field)) {
+        if (isGroupingColumn(field)) {
+          prevGroupingfields.push(field);
+        } else {
           newColumnFields.push(field);
           newColumnsLookup[field] = columnsState.lookup[field];
         }
@@ -135,14 +138,17 @@ export const useGridRowGroupingPreProcessors = (
 
         newColumnsLookup[groupingColDef.field] = groupingColDef;
       });
-      const startIndex = newColumnFields[0] === GRID_CHECKBOX_SELECTION_FIELD ? 1 : 0;
-      newColumnFields = [
-        ...newColumnFields.slice(0, startIndex),
-        ...groupingColDefs.map((colDef) => colDef.field),
-        ...newColumnFields.slice(startIndex),
-      ];
 
-      columnsState.orderedFields = newColumnFields;
+      if (prevGroupingfields.length !== groupingColDefs.length) {
+        const startIndex = newColumnFields[0] === GRID_CHECKBOX_SELECTION_FIELD ? 1 : 0;
+        newColumnFields = [
+          ...newColumnFields.slice(0, startIndex),
+          ...groupingColDefs.map((colDef) => colDef.field),
+          ...newColumnFields.slice(startIndex),
+        ];
+        columnsState.orderedFields = newColumnFields;
+      }
+
       columnsState.lookup = newColumnsLookup;
 
       return columnsState;
diff --git a/packages/x-data-grid-premium/src/tests/rowGrouping.DataGridPremium.test.tsx b/packages/x-data-grid-premium/src/tests/rowGrouping.DataGridPremium.test.tsx
index f30b9e4374c7a..6a0979cff342c 100644
--- a/packages/x-data-grid-premium/src/tests/rowGrouping.DataGridPremium.test.tsx
+++ b/packages/x-data-grid-premium/src/tests/rowGrouping.DataGridPremium.test.tsx
@@ -2632,6 +2632,58 @@ describe('<DataGridPremium /> - Row grouping', () => {
     });
   });
 
+  describe('column pinning', () => {
+    it('should keep the checkbox selection column position after column is unpinned when groupingColumnMode = "single"', () => {
+      const { setProps } = render(
+        <Test
+          checkboxSelection
+          initialState={{ rowGrouping: { model: ['category1'] } }}
+          defaultGroupingExpansionDepth={-1}
+        />,
+      );
+      const initialColumnOrder = ['', 'category1', 'id', 'category1', 'category2'];
+      expect(getColumnHeadersTextContent()).to.deep.equal(initialColumnOrder);
+      setProps({ pinnedColumns: { left: ['id'] } });
+      expect(getColumnHeadersTextContent()).to.deep.equal([
+        'id',
+        '',
+        'category1',
+        'category1',
+        'category2',
+      ]);
+      setProps({ pinnedColumns: { left: [] } });
+      expect(getColumnHeadersTextContent()).to.deep.equal(initialColumnOrder);
+    });
+
+    it('should keep the checkbox selection column position after column is unpinned when groupingColumnMode = "multiple"', () => {
+      const { setProps } = render(
+        <Test
+          checkboxSelection
+          initialState={{ rowGrouping: { model: ['category1', 'category2'] } }}
+          rowGroupingColumnMode="multiple"
+          defaultGroupingExpansionDepth={-1}
+        />,
+      );
+      const initialColumnOrder = ['', 'category1', 'category2', 'id', 'category1', 'category2'];
+      expect(getColumnHeadersTextContent()).to.deep.equal(initialColumnOrder);
+      setProps({
+        pinnedColumns: {
+          left: ['__row_group_by_columns_group_category2__', 'id'],
+        },
+      });
+      expect(getColumnHeadersTextContent()).to.deep.equal([
+        'category2',
+        'id',
+        '',
+        'category1',
+        'category1',
+        'category2',
+      ]);
+      setProps({ pinnedColumns: { left: [] } });
+      expect(getColumnHeadersTextContent()).to.deep.equal(initialColumnOrder);
+    });
+  });
+
   describe('apiRef: addRowGroupingCriteria', () => {
     clock.withFakeTimers();
 
diff --git a/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePickerToolbar.tsx b/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePickerToolbar.tsx
index 2ce9fb24f1d27..2019d54515ace 100644
--- a/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePickerToolbar.tsx
+++ b/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePickerToolbar.tsx
@@ -33,7 +33,7 @@ const useUtilityClasses = (classes: Partial<DateRangePickerToolbarClasses> | und
 
 export interface DateRangePickerToolbarProps
   extends ExportedDateRangePickerToolbarProps,
-    Omit<BaseToolbarProps<PickerRangeValue, 'day'>, 'onChange' | 'isLandscape'>,
+    Omit<BaseToolbarProps<PickerRangeValue>, 'onChange' | 'isLandscape'>,
     Pick<UseRangePositionResponse, 'rangePosition' | 'onRangePositionChange'> {}
 
 export interface ExportedDateRangePickerToolbarProps extends ExportedBaseToolbarProps {
@@ -87,9 +87,6 @@ const DateRangePickerToolbar = React.forwardRef(function DateRangePickerToolbar(
     toolbarFormat,
     className,
     classes: classesProp,
-    onViewChange,
-    view,
-    views,
     ...other
   } = props;
 
@@ -149,12 +146,6 @@ DateRangePickerToolbar.propTypes = {
    */
   hidden: PropTypes.bool,
   onRangePositionChange: PropTypes.func.isRequired,
-  /**
-   * Callback called when a toolbar is clicked
-   * @template TView
-   * @param {TView} view The view to open
-   */
-  onViewChange: PropTypes.func.isRequired,
   rangePosition: PropTypes.oneOf(['end', 'start']).isRequired,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
@@ -175,14 +166,6 @@ DateRangePickerToolbar.propTypes = {
    */
   toolbarPlaceholder: PropTypes.node,
   value: PropTypes.arrayOf(PropTypes.object).isRequired,
-  /**
-   * Currently visible picker view.
-   */
-  view: PropTypes.oneOf(['day']).isRequired,
-  /**
-   * Available views.
-   */
-  views: PropTypes.arrayOf(PropTypes.oneOf(['day'])).isRequired,
 } as any;
 
 export { DateRangePickerToolbar };
diff --git a/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePickerTabs.tsx b/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePickerTabs.tsx
index e2c0511949eba..88fef68210bc5 100644
--- a/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePickerTabs.tsx
+++ b/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePickerTabs.tsx
@@ -8,13 +8,12 @@ import useEventCallback from '@mui/utils/useEventCallback';
 import { TimeIcon, DateRangeIcon, ArrowLeftIcon, ArrowRightIcon } from '@mui/x-date-pickers/icons';
 import {
   DateOrTimeViewWithMeridiem,
-  BaseTabsProps,
   ExportedBaseTabsProps,
   isDatePickerView,
   usePickerPrivateContext,
 } from '@mui/x-date-pickers/internals';
 import { PickerOwnerState } from '@mui/x-date-pickers/models';
-import { usePickerTranslations } from '@mui/x-date-pickers/hooks';
+import { usePickerContext, usePickerTranslations } from '@mui/x-date-pickers/hooks';
 import IconButton from '@mui/material/IconButton';
 import Button from '@mui/material/Button';
 import {
@@ -66,7 +65,6 @@ export interface ExportedDateTimeRangePickerTabsProps extends ExportedBaseTabsPr
 
 export interface DateTimeRangePickerTabsProps
   extends ExportedDateTimeRangePickerTabsProps,
-    BaseTabsProps<DateOrTimeViewWithMeridiem>,
     Pick<UseRangePositionResponse, 'rangePosition' | 'onRangePositionChange'> {}
 
 const useUtilityClasses = (classes: Partial<DateTimeRangePickerTabsClasses> | undefined) => {
@@ -114,9 +112,7 @@ const DateTimeRangePickerTabs = function DateTimeRangePickerTabs(
   const props = useThemeProps({ props: inProps, name: 'MuiDateTimeRangePickerTabs' });
   const {
     dateIcon = <DateRangeIcon />,
-    onViewChange,
     timeIcon = <TimeIcon />,
-    view,
     hidden = typeof window === 'undefined' || window.innerHeight < 667,
     rangePosition,
     onRangePositionChange,
@@ -127,8 +123,12 @@ const DateTimeRangePickerTabs = function DateTimeRangePickerTabs(
 
   const translations = usePickerTranslations();
   const { ownerState } = usePickerPrivateContext();
+  const { view, onViewChange } = usePickerContext();
   const classes = useUtilityClasses(classesProp);
-  const value = React.useMemo(() => viewToTab(view, rangePosition), [view, rangePosition]);
+  const value = React.useMemo(
+    () => (view == null ? null : viewToTab(view, rangePosition)),
+    [view, rangePosition],
+  );
   const isPreviousHidden = value === 'start-date';
   const isNextHidden = value === 'end-time';
   const tabLabel = React.useMemo(() => {
@@ -161,13 +161,13 @@ const DateTimeRangePickerTabs = function DateTimeRangePickerTabs(
   });
 
   const changeToPreviousTab = useEventCallback(() => {
-    const previousTab = tabOptions[tabOptions.indexOf(value) - 1];
+    const previousTab = value == null ? tabOptions[0] : tabOptions[tabOptions.indexOf(value) - 1];
     onViewChange(tabToView(previousTab));
     handleRangePositionChange(previousTab);
   });
 
   const changeToNextTab = useEventCallback(() => {
-    const nextTab = tabOptions[tabOptions.indexOf(value) + 1];
+    const nextTab = value == null ? tabOptions[0] : tabOptions[tabOptions.indexOf(value) + 1];
     onViewChange(tabToView(nextTab));
     handleRangePositionChange(nextTab);
   });
@@ -176,6 +176,15 @@ const DateTimeRangePickerTabs = function DateTimeRangePickerTabs(
     return null;
   }
 
+  let startIcon: React.ReactNode;
+  if (view == null) {
+    startIcon = null;
+  } else if (isDatePickerView(view)) {
+    startIcon = dateIcon;
+  } else {
+    startIcon = timeIcon;
+  }
+
   return (
     <DateTimeRangePickerTabsRoot
       ownerState={ownerState}
@@ -194,11 +203,7 @@ const DateTimeRangePickerTabs = function DateTimeRangePickerTabs(
         <DateTimeRangePickerTabFiller className={classes.filler} />
       )}
 
-      <DateTimeRangePickerTab
-        startIcon={isDatePickerView(view) ? dateIcon : timeIcon}
-        className={classes.tabButton}
-        size="large"
-      >
+      <DateTimeRangePickerTab startIcon={startIcon} className={classes.tabButton} size="large">
         {tabLabel}
       </DateTimeRangePickerTab>
       {!isNextHidden ? (
@@ -237,12 +242,6 @@ DateTimeRangePickerTabs.propTypes = {
    */
   hidden: PropTypes.bool,
   onRangePositionChange: PropTypes.func.isRequired,
-  /**
-   * Callback called when a tab is clicked.
-   * @template TView
-   * @param {TView} view The view to open
-   */
-  onViewChange: PropTypes.func.isRequired,
   rangePosition: PropTypes.oneOf(['end', 'start']).isRequired,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
@@ -257,11 +256,6 @@ DateTimeRangePickerTabs.propTypes = {
    * @default TimeIcon
    */
   timeIcon: PropTypes.element,
-  /**
-   * Currently visible picker view.
-   */
-  view: PropTypes.oneOf(['day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'year'])
-    .isRequired,
 } as any;
 
 export { DateTimeRangePickerTabs };
diff --git a/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePickerToolbar.tsx b/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePickerToolbar.tsx
index bc2dcc282966a..64a761e663a09 100644
--- a/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePickerToolbar.tsx
+++ b/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePickerToolbar.tsx
@@ -12,7 +12,7 @@ import {
   PickerRangeValue,
   useToolbarOwnerState,
   PickerToolbarOwnerState,
-  DateTimePickerToolbarForceDesktopVariant,
+  DateTimePickerToolbarOverrideContext,
 } from '@mui/x-date-pickers/internals';
 import { usePickerContext, usePickerTranslations } from '@mui/x-date-pickers/hooks';
 import { PickerValidDate } from '@mui/x-date-pickers/models';
@@ -37,7 +37,7 @@ const useUtilityClasses = (classes: Partial<DateTimeRangePickerToolbarClasses> |
 type DateTimeRangeViews = Exclude<DateOrTimeViewWithMeridiem, 'year' | 'month'>;
 
 export interface DateTimeRangePickerToolbarProps
-  extends BaseToolbarProps<PickerRangeValue, DateTimeRangeViews>,
+  extends BaseToolbarProps<PickerRangeValue>,
     Pick<UseRangePositionResponse, 'rangePosition' | 'onRangePositionChange'>,
     ExportedDateTimeRangePickerToolbarProps {
   ampm?: boolean;
@@ -93,12 +93,9 @@ const DateTimeRangePickerToolbar = React.forwardRef(function DateTimeRangePicker
     onRangePositionChange,
     className,
     classes: classesProp,
-    onViewChange,
     onChange,
     classes: inClasses,
-    view,
     isLandscape,
-    views,
     ampm,
     hidden,
     toolbarFormat,
@@ -108,7 +105,7 @@ const DateTimeRangePickerToolbar = React.forwardRef(function DateTimeRangePicker
     ...other
   } = props;
 
-  const { disabled, readOnly } = usePickerContext();
+  const { disabled, readOnly, view, onViewChange, views } = usePickerContext<DateTimeRangeViews>();
   const translations = usePickerTranslations();
   const ownerState = useToolbarOwnerState();
   const classes = useUtilityClasses(classesProp);
@@ -124,8 +121,23 @@ const DateTimeRangePickerToolbar = React.forwardRef(function DateTimeRangePicker
     toolbarPlaceholder,
   };
 
-  const handleStartRangeViewChange = React.useCallback(
-    (newView: DateOrTimeViewWithMeridiem) => {
+  const handleOnChange = React.useCallback(
+    (newDate: PickerValidDate | null) => {
+      const { nextSelection, newRange } = calculateRangeChange({
+        newDate,
+        utils,
+        range: props.value,
+        rangePosition,
+        allowRangeFlip: true,
+      });
+      onRangePositionChange(nextSelection);
+      onChange(newRange);
+    },
+    [onChange, onRangePositionChange, props.value, rangePosition, utils],
+  );
+
+  const startOverrides = React.useMemo(() => {
+    const handleStartRangeViewChange = (newView: DateOrTimeViewWithMeridiem) => {
       if (newView === 'year' || newView === 'month') {
         return;
       }
@@ -133,12 +145,17 @@ const DateTimeRangePickerToolbar = React.forwardRef(function DateTimeRangePicker
         onRangePositionChange('start');
       }
       onViewChange(newView);
-    },
-    [onRangePositionChange, onViewChange, rangePosition],
-  );
+    };
+
+    return {
+      forceDesktopVariant: true,
+      onViewChange: handleStartRangeViewChange,
+      view: rangePosition === 'start' ? view : null,
+    };
+  }, [rangePosition, view, onRangePositionChange, onViewChange]);
 
-  const handleEndRangeViewChange = React.useCallback(
-    (newView: DateOrTimeViewWithMeridiem) => {
+  const endOverrides = React.useMemo(() => {
+    const handleEndRangeViewChange = (newView: DateOrTimeViewWithMeridiem) => {
       if (newView === 'year' || newView === 'month') {
         return;
       }
@@ -146,24 +163,14 @@ const DateTimeRangePickerToolbar = React.forwardRef(function DateTimeRangePicker
         onRangePositionChange('end');
       }
       onViewChange(newView);
-    },
-    [onRangePositionChange, onViewChange, rangePosition],
-  );
+    };
 
-  const handleOnChange = React.useCallback(
-    (newDate: PickerValidDate | null) => {
-      const { nextSelection, newRange } = calculateRangeChange({
-        newDate,
-        utils,
-        range: props.value,
-        rangePosition,
-        allowRangeFlip: true,
-      });
-      onRangePositionChange(nextSelection);
-      onChange(newRange);
-    },
-    [onChange, onRangePositionChange, props.value, rangePosition, utils],
-  );
+    return {
+      forceDesktopVariant: true,
+      onViewChange: handleEndRangeViewChange,
+      view: rangePosition === 'end' ? view : null,
+    };
+  }, [rangePosition, view, onRangePositionChange, onViewChange]);
 
   if (hidden) {
     return null;
@@ -177,30 +184,28 @@ const DateTimeRangePickerToolbar = React.forwardRef(function DateTimeRangePicker
       sx={sx}
       {...other}
     >
-      <DateTimePickerToolbarForceDesktopVariant.Provider value>
+      <DateTimePickerToolbarOverrideContext.Provider value={startOverrides}>
         <DateTimeRangePickerToolbarStart
           value={start}
-          onViewChange={handleStartRangeViewChange}
           toolbarTitle={translations.start}
           ownerState={ownerState}
-          view={rangePosition === 'start' ? view : undefined}
           className={classes.startToolbar}
           onChange={handleOnChange}
           titleId={titleId ? `${titleId}-start-toolbar` : undefined}
           {...commonToolbarProps}
         />
+      </DateTimePickerToolbarOverrideContext.Provider>
+      <DateTimePickerToolbarOverrideContext.Provider value={endOverrides}>
         <DateTimeRangePickerToolbarEnd
           value={end}
-          onViewChange={handleEndRangeViewChange}
           toolbarTitle={translations.end}
           ownerState={ownerState}
-          view={rangePosition === 'end' ? view : undefined}
           className={classes.endToolbar}
           onChange={handleOnChange}
           titleId={titleId ? `${titleId}-end-toolbar` : undefined}
           {...commonToolbarProps}
         />
-      </DateTimePickerToolbarForceDesktopVariant.Provider>
+      </DateTimePickerToolbarOverrideContext.Provider>
     </DateTimeRangePickerToolbarRoot>
   );
 }) as DateTimeRangePickerToolbarComponent;
@@ -224,12 +229,6 @@ DateTimeRangePickerToolbar.propTypes = {
   isLandscape: PropTypes.bool.isRequired,
   onChange: PropTypes.func.isRequired,
   onRangePositionChange: PropTypes.func.isRequired,
-  /**
-   * Callback called when a toolbar is clicked
-   * @template TView
-   * @param {TView} view The view to open
-   */
-  onViewChange: PropTypes.func.isRequired,
   rangePosition: PropTypes.oneOf(['end', 'start']).isRequired,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
@@ -250,16 +249,6 @@ DateTimeRangePickerToolbar.propTypes = {
    */
   toolbarPlaceholder: PropTypes.node,
   value: PropTypes.arrayOf(PropTypes.object).isRequired,
-  /**
-   * Currently visible picker view.
-   */
-  view: PropTypes.oneOf(['day', 'hours', 'meridiem', 'minutes', 'seconds']).isRequired,
-  /**
-   * Available views.
-   */
-  views: PropTypes.arrayOf(
-    PropTypes.oneOf(['day', 'hours', 'meridiem', 'minutes', 'seconds']).isRequired,
-  ).isRequired,
 } as any;
 
 export { DateTimeRangePickerToolbar };
diff --git a/packages/x-date-pickers-pro/src/DesktopDateRangePicker/DesktopDateRangePicker.types.ts b/packages/x-date-pickers-pro/src/DesktopDateRangePicker/DesktopDateRangePicker.types.ts
index 5b238ebbf61d7..0ee5c02e826f3 100644
--- a/packages/x-date-pickers-pro/src/DesktopDateRangePicker/DesktopDateRangePicker.types.ts
+++ b/packages/x-date-pickers-pro/src/DesktopDateRangePicker/DesktopDateRangePicker.types.ts
@@ -12,14 +12,11 @@ import {
 
 export interface DesktopDateRangePickerSlots
   extends BaseDateRangePickerSlots,
-    MakeOptional<UseDesktopRangePickerSlots<'day'>, 'field'> {}
+    MakeOptional<UseDesktopRangePickerSlots, 'field'> {}
 
 export interface DesktopDateRangePickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean>
   extends BaseDateRangePickerSlotProps,
-    Omit<
-      UseDesktopRangePickerSlotProps<'day', TEnableAccessibleFieldDOMStructure>,
-      'tabs' | 'toolbar'
-    > {}
+    Omit<UseDesktopRangePickerSlotProps<TEnableAccessibleFieldDOMStructure>, 'tabs' | 'toolbar'> {}
 
 export interface DesktopDateRangePickerProps<
   TEnableAccessibleFieldDOMStructure extends boolean = true,
diff --git a/packages/x-date-pickers-pro/src/DesktopDateTimeRangePicker/DesktopDateTimeRangePicker.types.ts b/packages/x-date-pickers-pro/src/DesktopDateTimeRangePicker/DesktopDateTimeRangePicker.types.ts
index 0cd82589c67bd..a62e765b35c4e 100644
--- a/packages/x-date-pickers-pro/src/DesktopDateTimeRangePicker/DesktopDateTimeRangePicker.types.ts
+++ b/packages/x-date-pickers-pro/src/DesktopDateTimeRangePicker/DesktopDateTimeRangePicker.types.ts
@@ -9,19 +9,15 @@ import {
   BaseDateTimeRangePickerSlots,
   BaseDateTimeRangePickerSlotProps,
 } from '../DateTimeRangePicker/shared';
-import { DateTimeRangePickerView } from '../internals/models';
 
 export interface DesktopDateTimeRangePickerSlots
   extends BaseDateTimeRangePickerSlots,
-    MakeOptional<UseDesktopRangePickerSlots<DateTimeRangePickerView>, 'field'> {}
+    MakeOptional<UseDesktopRangePickerSlots, 'field'> {}
 
 export interface DesktopDateTimeRangePickerSlotProps<
   TEnableAccessibleFieldDOMStructure extends boolean,
 > extends BaseDateTimeRangePickerSlotProps,
-    Omit<
-      UseDesktopRangePickerSlotProps<DateTimeRangePickerView, TEnableAccessibleFieldDOMStructure>,
-      'tabs' | 'toolbar'
-    > {}
+    Omit<UseDesktopRangePickerSlotProps<TEnableAccessibleFieldDOMStructure>, 'tabs' | 'toolbar'> {}
 
 export interface DesktopDateTimeRangePickerProps<
   TEnableAccessibleFieldDOMStructure extends boolean = true,
diff --git a/packages/x-date-pickers-pro/src/MobileDateRangePicker/MobileDateRangePicker.types.ts b/packages/x-date-pickers-pro/src/MobileDateRangePicker/MobileDateRangePicker.types.ts
index 567a57d4495c3..1394be24521eb 100644
--- a/packages/x-date-pickers-pro/src/MobileDateRangePicker/MobileDateRangePicker.types.ts
+++ b/packages/x-date-pickers-pro/src/MobileDateRangePicker/MobileDateRangePicker.types.ts
@@ -12,14 +12,11 @@ import {
 
 export interface MobileDateRangePickerSlots
   extends BaseDateRangePickerSlots,
-    MakeOptional<UseMobileRangePickerSlots<'day'>, 'field'> {}
+    MakeOptional<UseMobileRangePickerSlots, 'field'> {}
 
 export interface MobileDateRangePickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean>
   extends BaseDateRangePickerSlotProps,
-    Omit<
-      UseMobileRangePickerSlotProps<'day', TEnableAccessibleFieldDOMStructure>,
-      'tabs' | 'toolbar'
-    > {}
+    Omit<UseMobileRangePickerSlotProps<TEnableAccessibleFieldDOMStructure>, 'tabs' | 'toolbar'> {}
 
 export interface MobileDateRangePickerProps<
   TEnableAccessibleFieldDOMStructure extends boolean = true,
diff --git a/packages/x-date-pickers-pro/src/MobileDateTimeRangePicker/MobileDateTimeRangePicker.types.ts b/packages/x-date-pickers-pro/src/MobileDateTimeRangePicker/MobileDateTimeRangePicker.types.ts
index 4dd3305f8d9b4..e3db572d44998 100644
--- a/packages/x-date-pickers-pro/src/MobileDateTimeRangePicker/MobileDateTimeRangePicker.types.ts
+++ b/packages/x-date-pickers-pro/src/MobileDateTimeRangePicker/MobileDateTimeRangePicker.types.ts
@@ -9,19 +9,15 @@ import {
   BaseDateTimeRangePickerSlots,
   BaseDateTimeRangePickerSlotProps,
 } from '../DateTimeRangePicker/shared';
-import { DateTimeRangePickerView } from '../internals/models';
 
 export interface MobileDateTimeRangePickerSlots
   extends BaseDateTimeRangePickerSlots,
-    MakeOptional<UseMobileRangePickerSlots<DateTimeRangePickerView>, 'field'> {}
+    MakeOptional<UseMobileRangePickerSlots, 'field'> {}
 
 export interface MobileDateTimeRangePickerSlotProps<
   TEnableAccessibleFieldDOMStructure extends boolean,
 > extends BaseDateTimeRangePickerSlotProps,
-    Omit<
-      UseMobileRangePickerSlotProps<DateTimeRangePickerView, TEnableAccessibleFieldDOMStructure>,
-      'tabs' | 'toolbar'
-    > {}
+    Omit<UseMobileRangePickerSlotProps<TEnableAccessibleFieldDOMStructure>, 'tabs' | 'toolbar'> {}
 
 export interface MobileDateTimeRangePickerProps<
   TEnableAccessibleFieldDOMStructure extends boolean = true,
diff --git a/packages/x-date-pickers-pro/src/StaticDateRangePicker/StaticDateRangePicker.types.ts b/packages/x-date-pickers-pro/src/StaticDateRangePicker/StaticDateRangePicker.types.ts
index 071fd9b1f2156..a705718f8ecd2 100644
--- a/packages/x-date-pickers-pro/src/StaticDateRangePicker/StaticDateRangePicker.types.ts
+++ b/packages/x-date-pickers-pro/src/StaticDateRangePicker/StaticDateRangePicker.types.ts
@@ -12,11 +12,11 @@ import {
 
 export interface StaticDateRangePickerSlots
   extends BaseDateRangePickerSlots,
-    UseStaticRangePickerSlots<'day'> {}
+    UseStaticRangePickerSlots {}
 
 export interface StaticDateRangePickerSlotProps
   extends BaseDateRangePickerSlotProps,
-    Omit<UseStaticRangePickerSlotProps<'day'>, 'toolbar'> {}
+    Omit<UseStaticRangePickerSlotProps, 'toolbar'> {}
 
 export interface StaticDateRangePickerProps
   extends BaseDateRangePickerProps,
diff --git a/packages/x-date-pickers-pro/src/internals/hooks/models/useRangePicker.ts b/packages/x-date-pickers-pro/src/internals/hooks/models/useRangePicker.ts
index 9564e78e3c579..1002b2db6766b 100644
--- a/packages/x-date-pickers-pro/src/internals/hooks/models/useRangePicker.ts
+++ b/packages/x-date-pickers-pro/src/internals/hooks/models/useRangePicker.ts
@@ -21,14 +21,12 @@ import {
   RangePickerFieldSlotProps,
 } from '../useEnrichedRangePickerFieldProps';
 
-export interface UseRangePickerSlots<TView extends DateOrTimeViewWithMeridiem>
-  extends ExportedPickersLayoutSlots<PickerRangeValue, TView>,
+export interface UseRangePickerSlots
+  extends ExportedPickersLayoutSlots<PickerRangeValue>,
     RangePickerFieldSlots {}
 
-export interface UseRangePickerSlotProps<
-  TView extends DateOrTimeViewWithMeridiem,
-  TEnableAccessibleFieldDOMStructure extends boolean,
-> extends ExportedPickersLayoutSlotProps<PickerRangeValue, TView>,
+export interface UseRangePickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean>
+  extends ExportedPickersLayoutSlotProps<PickerRangeValue>,
     RangePickerFieldSlotProps<TEnableAccessibleFieldDOMStructure> {
   tabs?: ExportedBaseTabsProps;
   toolbar?: ExportedBaseToolbarProps;
diff --git a/packages/x-date-pickers-pro/src/internals/hooks/useDesktopRangePicker/useDesktopRangePicker.tsx b/packages/x-date-pickers-pro/src/internals/hooks/useDesktopRangePicker/useDesktopRangePicker.tsx
index e4910f76bb6a4..f3133425b48c5 100644
--- a/packages/x-date-pickers-pro/src/internals/hooks/useDesktopRangePicker/useDesktopRangePicker.tsx
+++ b/packages/x-date-pickers-pro/src/internals/hooks/useDesktopRangePicker/useDesktopRangePicker.tsx
@@ -110,8 +110,8 @@ export const useDesktopRangePicker = <
   });
 
   React.useEffect(() => {
-    if (layoutProps.view) {
-      initialView.current = layoutProps.view;
+    if (providerProps.contextValue.view) {
+      initialView.current = providerProps.contextValue.view;
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
@@ -186,12 +186,15 @@ export const useDesktopRangePicker = <
     startFieldRef,
     endFieldRef,
     singleInputFieldRef,
-    currentView: layoutProps.view !== props.openTo ? layoutProps.view : undefined,
+    currentView:
+      providerProps.contextValue.view !== props.openTo
+        ? providerProps.contextValue.view
+        : undefined,
     initialView: initialView.current ?? undefined,
-    onViewChange: layoutProps.onViewChange,
+    onViewChange: providerProps.contextValue.onViewChange,
   });
 
-  const slotPropsForLayout: PickersLayoutSlotProps<PickerRangeValue, TView> = {
+  const slotPropsForLayout: PickersLayoutSlotProps<PickerRangeValue> = {
     ...slotProps,
     tabs: {
       ...slotProps?.tabs,
diff --git a/packages/x-date-pickers-pro/src/internals/hooks/useDesktopRangePicker/useDesktopRangePicker.types.ts b/packages/x-date-pickers-pro/src/internals/hooks/useDesktopRangePicker/useDesktopRangePicker.types.ts
index 3b49eff80e25b..0761f8b4a6715 100644
--- a/packages/x-date-pickers-pro/src/internals/hooks/useDesktopRangePicker/useDesktopRangePicker.types.ts
+++ b/packages/x-date-pickers-pro/src/internals/hooks/useDesktopRangePicker/useDesktopRangePicker.types.ts
@@ -13,14 +13,10 @@ import {
   UseRangePickerSlots,
 } from '../models/useRangePicker';
 
-export interface UseDesktopRangePickerSlots<TView extends DateOrTimeViewWithMeridiem>
-  extends UseRangePickerSlots<TView>,
-    PickersPopperSlots {}
+export interface UseDesktopRangePickerSlots extends UseRangePickerSlots, PickersPopperSlots {}
 
-export interface UseDesktopRangePickerSlotProps<
-  TView extends DateOrTimeViewWithMeridiem,
-  TEnableAccessibleFieldDOMStructure extends boolean,
-> extends UseRangePickerSlotProps<TView, TEnableAccessibleFieldDOMStructure>,
+export interface UseDesktopRangePickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean>
+  extends UseRangePickerSlotProps<TEnableAccessibleFieldDOMStructure>,
     PickersPopperSlotProps {}
 
 export interface DesktopRangeOnlyPickerProps extends RangeOnlyPickerProps {
@@ -45,12 +41,12 @@ export interface UseDesktopRangePickerProps<
    * Overridable component slots.
    * @default {}
    */
-  slots: UseDesktopRangePickerSlots<TView>;
+  slots: UseDesktopRangePickerSlots;
   /**
    * The props used for each component slot.
    * @default {}
    */
-  slotProps?: UseDesktopRangePickerSlotProps<TView, TEnableAccessibleFieldDOMStructure>;
+  slotProps?: UseDesktopRangePickerSlotProps<TEnableAccessibleFieldDOMStructure>;
 }
 
 export interface DesktopRangePickerAdditionalViewProps extends RangePickerAdditionalViewProps {}
diff --git a/packages/x-date-pickers-pro/src/internals/hooks/useMobileRangePicker/useMobileRangePicker.tsx b/packages/x-date-pickers-pro/src/internals/hooks/useMobileRangePicker/useMobileRangePicker.tsx
index 8164a5da2fea9..bd1c7725cd011 100644
--- a/packages/x-date-pickers-pro/src/internals/hooks/useMobileRangePicker/useMobileRangePicker.tsx
+++ b/packages/x-date-pickers-pro/src/internals/hooks/useMobileRangePicker/useMobileRangePicker.tsx
@@ -161,7 +161,7 @@ export const useMobileRangePicker = <
     singleInputFieldRef,
   });
 
-  const slotPropsForLayout: PickersLayoutSlotProps<PickerRangeValue, TView> = {
+  const slotPropsForLayout: PickersLayoutSlotProps<PickerRangeValue> = {
     ...innerSlotProps,
     tabs: {
       ...innerSlotProps?.tabs,
diff --git a/packages/x-date-pickers-pro/src/internals/hooks/useMobileRangePicker/useMobileRangePicker.types.ts b/packages/x-date-pickers-pro/src/internals/hooks/useMobileRangePicker/useMobileRangePicker.types.ts
index fb6d4901af27e..3d77b15fdff50 100644
--- a/packages/x-date-pickers-pro/src/internals/hooks/useMobileRangePicker/useMobileRangePicker.types.ts
+++ b/packages/x-date-pickers-pro/src/internals/hooks/useMobileRangePicker/useMobileRangePicker.types.ts
@@ -13,14 +13,10 @@ import {
   UseRangePickerSlots,
 } from '../models/useRangePicker';
 
-export interface UseMobileRangePickerSlots<TView extends DateOrTimeViewWithMeridiem>
-  extends UseRangePickerSlots<TView>,
-    PickersModalDialogSlots {}
+export interface UseMobileRangePickerSlots extends UseRangePickerSlots, PickersModalDialogSlots {}
 
-export interface UseMobileRangePickerSlotProps<
-  TView extends DateOrTimeViewWithMeridiem,
-  TEnableAccessibleFieldDOMStructure extends boolean,
-> extends UseRangePickerSlotProps<TView, TEnableAccessibleFieldDOMStructure>,
+export interface UseMobileRangePickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean>
+  extends UseRangePickerSlotProps<TEnableAccessibleFieldDOMStructure>,
     PickersModalDialogSlotProps {}
 
 export interface MobileRangeOnlyPickerProps extends RangeOnlyPickerProps {}
@@ -35,12 +31,12 @@ export interface UseMobileRangePickerProps<
    * Overridable component slots.
    * @default {}
    */
-  slots: UseMobileRangePickerSlots<TView>;
+  slots: UseMobileRangePickerSlots;
   /**
    * The props used for each component slot.
    * @default {}
    */
-  slotProps?: UseMobileRangePickerSlotProps<TView, TEnableAccessibleFieldDOMStructure>;
+  slotProps?: UseMobileRangePickerSlotProps<TEnableAccessibleFieldDOMStructure>;
 }
 
 export interface MobileRangePickerAdditionalViewProps extends RangePickerAdditionalViewProps {}
diff --git a/packages/x-date-pickers-pro/src/internals/hooks/useStaticRangePicker/useStaticRangePicker.tsx b/packages/x-date-pickers-pro/src/internals/hooks/useStaticRangePicker/useStaticRangePicker.tsx
index c37b8aa219039..3d4d0d6f00326 100644
--- a/packages/x-date-pickers-pro/src/internals/hooks/useStaticRangePicker/useStaticRangePicker.tsx
+++ b/packages/x-date-pickers-pro/src/internals/hooks/useStaticRangePicker/useStaticRangePicker.tsx
@@ -57,7 +57,7 @@ export const useStaticRangePicker = <
   });
 
   const Layout = slots?.layout ?? PickerStaticLayout;
-  const slotPropsForLayout: PickersLayoutSlotProps<PickerRangeValue, TView> = {
+  const slotPropsForLayout: PickersLayoutSlotProps<PickerRangeValue> = {
     ...slotProps,
     toolbar: {
       ...slotProps?.toolbar,
diff --git a/packages/x-date-pickers-pro/src/internals/hooks/useStaticRangePicker/useStaticRangePicker.types.ts b/packages/x-date-pickers-pro/src/internals/hooks/useStaticRangePicker/useStaticRangePicker.types.ts
index b4c62b6437d0a..8a92b17eefdcc 100644
--- a/packages/x-date-pickers-pro/src/internals/hooks/useStaticRangePicker/useStaticRangePicker.types.ts
+++ b/packages/x-date-pickers-pro/src/internals/hooks/useStaticRangePicker/useStaticRangePicker.types.ts
@@ -13,11 +13,10 @@ import {
 } from '@mui/x-date-pickers/PickersLayout';
 import { UseRangePositionProps } from '../useRangePosition';
 
-export interface UseStaticRangePickerSlots<TView extends DateOrTimeViewWithMeridiem>
-  extends ExportedPickersLayoutSlots<PickerRangeValue, TView> {}
+export interface UseStaticRangePickerSlots extends ExportedPickersLayoutSlots<PickerRangeValue> {}
 
-export interface UseStaticRangePickerSlotProps<TView extends DateOrTimeViewWithMeridiem>
-  extends ExportedPickersLayoutSlotProps<PickerRangeValue, TView> {
+export interface UseStaticRangePickerSlotProps
+  extends ExportedPickersLayoutSlotProps<PickerRangeValue> {
   toolbar?: ExportedBaseToolbarProps;
 }
 
@@ -33,12 +32,12 @@ export interface UseStaticRangePickerProps<
    * Overridable components.
    * @default {}
    */
-  slots?: UseStaticRangePickerSlots<TView>;
+  slots?: UseStaticRangePickerSlots;
   /**
    * The props used for each component slot.
    * @default {}
    */
-  slotProps?: UseStaticRangePickerSlotProps<TView>;
+  slotProps?: UseStaticRangePickerSlotProps;
 }
 
 export interface UseStaticRangePickerParams<
diff --git a/packages/x-date-pickers/src/DatePicker/DatePickerToolbar.tsx b/packages/x-date-pickers/src/DatePicker/DatePickerToolbar.tsx
index bfcde2a512468..380abbc098e10 100644
--- a/packages/x-date-pickers/src/DatePicker/DatePickerToolbar.tsx
+++ b/packages/x-date-pickers/src/DatePicker/DatePickerToolbar.tsx
@@ -9,7 +9,6 @@ import { PickersToolbar } from '../internals/components/PickersToolbar';
 import { usePickerTranslations } from '../hooks/usePickerTranslations';
 import { useUtils } from '../internals/hooks/useUtils';
 import { BaseToolbarProps, ExportedBaseToolbarProps } from '../internals/models/props/toolbar';
-import { DateView } from '../models';
 import {
   DatePickerToolbarClasses,
   getDatePickerToolbarUtilityClass,
@@ -20,9 +19,11 @@ import {
   PickerToolbarOwnerState,
   useToolbarOwnerState,
 } from '../internals/hooks/useToolbarOwnerState';
+import { usePickerContext } from '../hooks';
+import { DateView } from '../models/views';
 
 export interface DatePickerToolbarProps
-  extends BaseToolbarProps<PickerValue, DateView>,
+  extends BaseToolbarProps<PickerValue>,
     ExportedDatePickerToolbarProps {}
 
 export interface ExportedDatePickerToolbarProps extends ExportedBaseToolbarProps {
@@ -87,14 +88,12 @@ export const DatePickerToolbar = React.forwardRef(function DatePickerToolbar(
     onChange,
     toolbarFormat,
     toolbarPlaceholder = '––',
-    views,
     className,
     classes: classesProp,
-    onViewChange,
-    view,
     ...other
   } = props;
   const utils = useUtils();
+  const { views } = usePickerContext<DateView>();
   const translations = usePickerTranslations();
   const ownerState = useToolbarOwnerState();
   const classes = useUtilityClasses(classesProp);
@@ -147,12 +146,6 @@ DatePickerToolbar.propTypes = {
   hidden: PropTypes.bool,
   isLandscape: PropTypes.bool.isRequired,
   onChange: PropTypes.func.isRequired,
-  /**
-   * Callback called when a toolbar is clicked
-   * @template TView
-   * @param {TView} view The view to open
-   */
-  onViewChange: PropTypes.func.isRequired,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
@@ -172,12 +165,4 @@ DatePickerToolbar.propTypes = {
    */
   toolbarPlaceholder: PropTypes.node,
   value: PropTypes.object,
-  /**
-   * Currently visible picker view.
-   */
-  view: PropTypes.oneOf(['day', 'month', 'year']).isRequired,
-  /**
-   * Available views.
-   */
-  views: PropTypes.arrayOf(PropTypes.oneOf(['day', 'month', 'year']).isRequired).isRequired,
 } as any;
diff --git a/packages/x-date-pickers/src/DateTimePicker/DateTimePicker.types.ts b/packages/x-date-pickers/src/DateTimePicker/DateTimePicker.types.ts
index 1013150e535b1..a8d562209c310 100644
--- a/packages/x-date-pickers/src/DateTimePicker/DateTimePicker.types.ts
+++ b/packages/x-date-pickers/src/DateTimePicker/DateTimePicker.types.ts
@@ -19,11 +19,11 @@ import { ExportedYearCalendarProps } from '../YearCalendar/YearCalendar.types';
 
 export interface DateTimePickerSlots
   extends DesktopDateTimePickerSlots,
-    MobileDateTimePickerSlots<DateOrTimeViewWithMeridiem> {}
+    MobileDateTimePickerSlots {}
 
 export interface DateTimePickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean>
   extends DesktopDateTimePickerSlotProps<TEnableAccessibleFieldDOMStructure>,
-    MobileDateTimePickerSlotProps<DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure> {}
+    MobileDateTimePickerSlotProps<TEnableAccessibleFieldDOMStructure> {}
 
 export interface DateTimePickerProps<TEnableAccessibleFieldDOMStructure extends boolean = true>
   extends DesktopDateTimePickerProps<TEnableAccessibleFieldDOMStructure>,
diff --git a/packages/x-date-pickers/src/DateTimePicker/DateTimePickerTabs.tsx b/packages/x-date-pickers/src/DateTimePicker/DateTimePickerTabs.tsx
index 480365be10cfb..2ae198b28f762 100644
--- a/packages/x-date-pickers/src/DateTimePicker/DateTimePickerTabs.tsx
+++ b/packages/x-date-pickers/src/DateTimePicker/DateTimePickerTabs.tsx
@@ -13,10 +13,11 @@ import {
   DateTimePickerTabsClasses,
   getDateTimePickerTabsUtilityClass,
 } from './dateTimePickerTabsClasses';
-import { BaseTabsProps, ExportedBaseTabsProps } from '../internals/models/props/tabs';
+import { ExportedBaseTabsProps } from '../internals/models/props/tabs';
 import { isDatePickerView } from '../internals/utils/date-utils';
 import { usePickerPrivateContext } from '../internals/hooks/usePickerPrivateContext';
 import { PickerOwnerState } from '../models/pickers';
+import { usePickerContext } from '../hooks';
 
 type TabValue = 'date' | 'time';
 
@@ -36,7 +37,7 @@ const tabToView = (tab: TabValue): DateOrTimeViewWithMeridiem => {
   return 'hours';
 };
 
-export interface ExportedDateTimePickerTabsProps extends ExportedBaseTabsProps {
+export interface DateTimePickerTabsProps extends ExportedBaseTabsProps {
   /**
    * Toggles visibility of the tabs allowing view switching.
    * @default `window.innerHeight < 667` for `DesktopDateTimePicker` and `MobileDateTimePicker`, `displayStaticWrapperAs === 'desktop'` for `StaticDateTimePicker`
@@ -58,10 +59,6 @@ export interface ExportedDateTimePickerTabsProps extends ExportedBaseTabsProps {
   classes?: Partial<DateTimePickerTabsClasses>;
 }
 
-export interface DateTimePickerTabsProps
-  extends ExportedDateTimePickerTabsProps,
-    BaseTabsProps<DateOrTimeViewWithMeridiem> {}
-
 const useUtilityClasses = (classes: Partial<DateTimePickerTabsClasses> | undefined) => {
   const slots = {
     root: ['root'],
@@ -99,9 +96,7 @@ const DateTimePickerTabs = function DateTimePickerTabs(inProps: DateTimePickerTa
   const props = useThemeProps({ props: inProps, name: 'MuiDateTimePickerTabs' });
   const {
     dateIcon = <DateRangeIcon />,
-    onViewChange,
     timeIcon = <TimeIcon />,
-    view,
     hidden = typeof window === 'undefined' || window.innerHeight < 667,
     className,
     classes: classesProp,
@@ -110,6 +105,7 @@ const DateTimePickerTabs = function DateTimePickerTabs(inProps: DateTimePickerTa
 
   const translations = usePickerTranslations();
   const { ownerState } = usePickerPrivateContext();
+  const { view, onViewChange } = usePickerContext();
   const classes = useUtilityClasses(classesProp);
 
   const handleChange = (event: React.SyntheticEvent, value: TabValue) => {
@@ -124,7 +120,7 @@ const DateTimePickerTabs = function DateTimePickerTabs(inProps: DateTimePickerTa
     <DateTimePickerTabsRoot
       ownerState={ownerState}
       variant="fullWidth"
-      value={viewToTab(view)}
+      value={viewToTab(view!)}
       onChange={handleChange}
       className={clsx(className, classes.root)}
       sx={sx}
@@ -163,12 +159,6 @@ DateTimePickerTabs.propTypes = {
    * @default `window.innerHeight < 667` for `DesktopDateTimePicker` and `MobileDateTimePicker`, `displayStaticWrapperAs === 'desktop'` for `StaticDateTimePicker`
    */
   hidden: PropTypes.bool,
-  /**
-   * Callback called when a tab is clicked.
-   * @template TView
-   * @param {TView} view The view to open
-   */
-  onViewChange: PropTypes.func.isRequired,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
@@ -182,11 +172,6 @@ DateTimePickerTabs.propTypes = {
    * @default Time
    */
   timeIcon: PropTypes.node,
-  /**
-   * Currently visible picker view.
-   */
-  view: PropTypes.oneOf(['day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'year'])
-    .isRequired,
 } as any;
 
 export { DateTimePickerTabs };
diff --git a/packages/x-date-pickers/src/DateTimePicker/DateTimePickerToolbar.tsx b/packages/x-date-pickers/src/DateTimePicker/DateTimePickerToolbar.tsx
index 23f3c5f03ede3..0c276412cdb3a 100644
--- a/packages/x-date-pickers/src/DateTimePicker/DateTimePickerToolbar.tsx
+++ b/packages/x-date-pickers/src/DateTimePicker/DateTimePickerToolbar.tsx
@@ -5,7 +5,6 @@ import PropTypes from 'prop-types';
 import { styled, useThemeProps } from '@mui/material/styles';
 import composeClasses from '@mui/utils/composeClasses';
 import { shouldForwardProp } from '@mui/system/createStyled';
-import { MakeOptional } from '@mui/x-internals/types';
 import { PickersToolbarText } from '../internals/components/PickersToolbarText';
 import { PickersToolbar } from '../internals/components/PickersToolbar';
 import { PickersToolbarButton } from '../internals/components/PickersToolbarButton';
@@ -39,7 +38,7 @@ export interface ExportedDateTimePickerToolbarProps extends ExportedBaseToolbarP
 
 export interface DateTimePickerToolbarProps
   extends ExportedDateTimePickerToolbarProps,
-    MakeOptional<BaseToolbarProps<PickerValue, DateOrTimeViewWithMeridiem>, 'view'> {
+    BaseToolbarProps<PickerValue> {
   /**
    * If provided, it will be used instead of `dateTimePickerToolbarTitle` from localization.
    */
@@ -235,10 +234,15 @@ const DateTimePickerToolbarAmPmSelection = styled('div', {
 });
 
 /**
- * If this context value is set to true, the toolbar will always be rendered in the desktop mode.
+ * If `forceDesktopVariant` is set to `true`, the toolbar will always be rendered in the desktop mode.
+ * If `onViewChange` is defined, the toolbar will call it instead of calling the default handler from `usePickerContext`.
  * This is used by the Date Time Range Picker Toolbar.
  */
-export const DateTimePickerToolbarForceDesktopVariant = React.createContext(false);
+export const DateTimePickerToolbarOverrideContext = React.createContext<{
+  forceDesktopVariant: boolean;
+  onViewChange: (view: DateOrTimeViewWithMeridiem) => void;
+  view: DateOrTimeViewWithMeridiem | null;
+} | null>(null);
 
 /**
  * Demos:
@@ -257,31 +261,38 @@ function DateTimePickerToolbar(inProps: DateTimePickerToolbarProps) {
     ampmInClock,
     value,
     onChange,
-    view,
     isLandscape,
-    onViewChange,
     toolbarFormat,
     toolbarPlaceholder = '––',
-    views,
     toolbarTitle: inToolbarTitle,
     className,
     classes: classesProp,
     ...other
   } = props;
 
-  const { disabled, readOnly, variant } = usePickerContext();
+  const {
+    disabled,
+    readOnly,
+    variant,
+    view: viewCtx,
+    onViewChange: onViewChangeCtx,
+    views,
+  } = usePickerContext();
   const ownerState = useToolbarOwnerState();
   const classes = useUtilityClasses(classesProp, ownerState);
   const utils = useUtils();
   const { meridiemMode, handleMeridiemChange } = useMeridiemMode(value, ampm, onChange);
   const translations = usePickerTranslations();
-  const forceDesktopVariant = React.useContext(DateTimePickerToolbarForceDesktopVariant);
+  const overrides = React.useContext(DateTimePickerToolbarOverrideContext);
 
-  const toolbarVariant = forceDesktopVariant ? 'desktop' : variant;
+  const toolbarVariant = overrides?.forceDesktopVariant ? 'desktop' : variant;
   const isDesktop = toolbarVariant === 'desktop';
   const showAmPmControl = Boolean(ampm && !ampmInClock);
   const toolbarTitle = inToolbarTitle ?? translations.dateTimePickerToolbarTitle;
 
+  const view = overrides ? overrides.view : viewCtx;
+  const onViewChange = overrides ? overrides.onViewChange : onViewChangeCtx;
+
   const formatHours = (time: PickerValidDate) =>
     ampm ? utils.format(time, 'hours12h') : utils.format(time, 'hours24h');
 
@@ -446,12 +457,6 @@ DateTimePickerToolbar.propTypes = {
   hidden: PropTypes.bool,
   isLandscape: PropTypes.bool.isRequired,
   onChange: PropTypes.func.isRequired,
-  /**
-   * Callback called when a toolbar is clicked
-   * @template TView
-   * @param {TView} view The view to open
-   */
-  onViewChange: PropTypes.func.isRequired,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
@@ -475,16 +480,6 @@ DateTimePickerToolbar.propTypes = {
    */
   toolbarTitle: PropTypes.node,
   value: PropTypes.object,
-  /**
-   * Currently visible picker view.
-   */
-  view: PropTypes.oneOf(['day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'year']),
-  /**
-   * Available views.
-   */
-  views: PropTypes.arrayOf(
-    PropTypes.oneOf(['day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'year']).isRequired,
-  ).isRequired,
 } as any;
 
 export { DateTimePickerToolbar };
diff --git a/packages/x-date-pickers/src/DateTimePicker/shared.tsx b/packages/x-date-pickers/src/DateTimePicker/shared.tsx
index a4f52ac694d6a..fef86bebde7ab 100644
--- a/packages/x-date-pickers/src/DateTimePicker/shared.tsx
+++ b/packages/x-date-pickers/src/DateTimePicker/shared.tsx
@@ -11,11 +11,7 @@ import {
 import { TimeClockSlots, TimeClockSlotProps } from '../TimeClock/TimeClock.types';
 import { BasePickerInputProps } from '../internals/models/props/basePickerProps';
 import { applyDefaultDate } from '../internals/utils/date-utils';
-import {
-  DateTimePickerTabs,
-  DateTimePickerTabsProps,
-  ExportedDateTimePickerTabsProps,
-} from './DateTimePickerTabs';
+import { DateTimePickerTabs, DateTimePickerTabsProps } from './DateTimePickerTabs';
 import { LocalizedComponent, PickersInputLocaleText } from '../locales/utils/pickersLocaleTextApi';
 import {
   DateTimePickerToolbar,
@@ -50,7 +46,7 @@ export interface BaseDateTimePickerSlotProps extends DateCalendarSlotProps, Time
   /**
    * Props passed down to the tabs component.
    */
-  tabs?: ExportedDateTimePickerTabsProps;
+  tabs?: DateTimePickerTabsProps;
   /**
    * Props passed down to the toolbar component.
    */
diff --git a/packages/x-date-pickers/src/DesktopDatePicker/DesktopDatePicker.types.ts b/packages/x-date-pickers/src/DesktopDatePicker/DesktopDatePicker.types.ts
index 168d39f4a34bd..737f91ae3f46c 100644
--- a/packages/x-date-pickers/src/DesktopDatePicker/DesktopDatePicker.types.ts
+++ b/packages/x-date-pickers/src/DesktopDatePicker/DesktopDatePicker.types.ts
@@ -9,16 +9,15 @@ import {
   BaseDatePickerSlots,
   BaseDatePickerSlotProps,
 } from '../DatePicker/shared';
-import { DateView } from '../models';
 import { ExportedYearCalendarProps } from '../YearCalendar/YearCalendar.types';
 
 export interface DesktopDatePickerSlots
   extends BaseDatePickerSlots,
-    MakeOptional<UseDesktopPickerSlots<DateView>, 'field' | 'openPickerIcon'> {}
+    MakeOptional<UseDesktopPickerSlots, 'field' | 'openPickerIcon'> {}
 
 export interface DesktopDatePickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean>
   extends BaseDatePickerSlotProps,
-    ExportedUseDesktopPickerSlotProps<DateView, TEnableAccessibleFieldDOMStructure> {}
+    ExportedUseDesktopPickerSlotProps<TEnableAccessibleFieldDOMStructure> {}
 
 export interface DesktopDatePickerProps<TEnableAccessibleFieldDOMStructure extends boolean = true>
   extends BaseDatePickerProps,
diff --git a/packages/x-date-pickers/src/DesktopDateTimePicker/DesktopDateTimePicker.types.ts b/packages/x-date-pickers/src/DesktopDateTimePicker/DesktopDateTimePicker.types.ts
index 2d46378b7296d..ab5bb47fd4a93 100644
--- a/packages/x-date-pickers/src/DesktopDateTimePicker/DesktopDateTimePicker.types.ts
+++ b/packages/x-date-pickers/src/DesktopDateTimePicker/DesktopDateTimePicker.types.ts
@@ -21,16 +21,13 @@ import { ExportedYearCalendarProps } from '../YearCalendar/YearCalendar.types';
 
 export interface DesktopDateTimePickerSlots
   extends BaseDateTimePickerSlots,
-    MakeOptional<UseDesktopPickerSlots<DateOrTimeViewWithMeridiem>, 'field' | 'openPickerIcon'>,
+    MakeOptional<UseDesktopPickerSlots, 'field' | 'openPickerIcon'>,
     DigitalClockSlots,
     MultiSectionDigitalClockSlots {}
 
 export interface DesktopDateTimePickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean>
   extends BaseDateTimePickerSlotProps,
-    ExportedUseDesktopPickerSlotProps<
-      DateOrTimeViewWithMeridiem,
-      TEnableAccessibleFieldDOMStructure
-    >,
+    ExportedUseDesktopPickerSlotProps<TEnableAccessibleFieldDOMStructure>,
     DigitalClockSlotProps,
     MultiSectionDigitalClockSlotProps {}
 
diff --git a/packages/x-date-pickers/src/DesktopDateTimePicker/DesktopDateTimePickerLayout.tsx b/packages/x-date-pickers/src/DesktopDateTimePicker/DesktopDateTimePickerLayout.tsx
index da1ccf8aac91f..cafef574827f0 100644
--- a/packages/x-date-pickers/src/DesktopDateTimePicker/DesktopDateTimePickerLayout.tsx
+++ b/packages/x-date-pickers/src/DesktopDateTimePicker/DesktopDateTimePickerLayout.tsx
@@ -9,15 +9,11 @@ import {
   pickersLayoutClasses,
   usePickerLayout,
 } from '../PickersLayout';
-import { DateOrTimeViewWithMeridiem } from '../internals/models/common';
 import { usePickerContext } from '../hooks/usePickerContext';
 import { PickerValidValue } from '../internals/models';
 
-type DesktopDateTimePickerLayoutComponent = (<
-  TValue extends PickerValidValue,
-  TView extends DateOrTimeViewWithMeridiem,
->(
-  props: PickersLayoutProps<TValue, TView> & React.RefAttributes<HTMLDivElement>,
+type DesktopDateTimePickerLayoutComponent = (<TValue extends PickerValidValue>(
+  props: PickersLayoutProps<TValue> & React.RefAttributes<HTMLDivElement>,
 ) => React.JSX.Element) & { propTypes?: any };
 
 /**
@@ -25,8 +21,7 @@ type DesktopDateTimePickerLayoutComponent = (<
  */
 const DesktopDateTimePickerLayout = React.forwardRef(function DesktopDateTimePickerLayout<
   TValue extends PickerValidValue,
-  TView extends DateOrTimeViewWithMeridiem,
->(props: PickersLayoutProps<TValue, TView>, ref: React.Ref<HTMLDivElement>) {
+>(props: PickersLayoutProps<TValue>, ref: React.Ref<HTMLDivElement>) {
   const { toolbar, tabs, content, actionBar, shortcuts, ownerState } = usePickerLayout(props);
   const { orientation } = usePickerContext();
   const { sx, className, classes } = props;
@@ -75,7 +70,6 @@ DesktopDateTimePickerLayout.propTypes = {
   isValid: PropTypes.func.isRequired,
   onChange: PropTypes.func.isRequired,
   onSelectShortcut: PropTypes.func.isRequired,
-  onViewChange: PropTypes.func.isRequired,
   /**
    * The props used for each component slot.
    * @default {}
@@ -95,10 +89,6 @@ DesktopDateTimePickerLayout.propTypes = {
     PropTypes.object,
   ]),
   value: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object]),
-  view: PropTypes.oneOf(['day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'year']),
-  views: PropTypes.arrayOf(
-    PropTypes.oneOf(['day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'year']).isRequired,
-  ).isRequired,
 } as any;
 
 export { DesktopDateTimePickerLayout };
diff --git a/packages/x-date-pickers/src/DesktopTimePicker/DesktopTimePicker.types.ts b/packages/x-date-pickers/src/DesktopTimePicker/DesktopTimePicker.types.ts
index 91f223ad80e69..c3eecd985273e 100644
--- a/packages/x-date-pickers/src/DesktopTimePicker/DesktopTimePicker.types.ts
+++ b/packages/x-date-pickers/src/DesktopTimePicker/DesktopTimePicker.types.ts
@@ -20,13 +20,13 @@ import { TimeView } from '../models';
 
 export interface DesktopTimePickerSlots
   extends BaseTimePickerSlots,
-    MakeOptional<UseDesktopPickerSlots<TimeViewWithMeridiem>, 'field' | 'openPickerIcon'>,
+    MakeOptional<UseDesktopPickerSlots, 'field' | 'openPickerIcon'>,
     DigitalClockSlots,
     MultiSectionDigitalClockSlots {}
 
 export interface DesktopTimePickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean>
   extends BaseTimePickerSlotProps,
-    ExportedUseDesktopPickerSlotProps<TimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure>,
+    ExportedUseDesktopPickerSlotProps<TEnableAccessibleFieldDOMStructure>,
     DigitalClockSlotProps,
     MultiSectionDigitalClockSlotProps {}
 
diff --git a/packages/x-date-pickers/src/MobileDatePicker/MobileDatePicker.types.ts b/packages/x-date-pickers/src/MobileDatePicker/MobileDatePicker.types.ts
index f826ccce7d7af..60e59a4ff631c 100644
--- a/packages/x-date-pickers/src/MobileDatePicker/MobileDatePicker.types.ts
+++ b/packages/x-date-pickers/src/MobileDatePicker/MobileDatePicker.types.ts
@@ -9,15 +9,14 @@ import {
   BaseDatePickerSlots,
   BaseDatePickerSlotProps,
 } from '../DatePicker/shared';
-import { DateView } from '../models';
 
 export interface MobileDatePickerSlots
   extends BaseDatePickerSlots,
-    MakeOptional<UseMobilePickerSlots<DateView>, 'field'> {}
+    MakeOptional<UseMobilePickerSlots, 'field'> {}
 
 export interface MobileDatePickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean>
   extends BaseDatePickerSlotProps,
-    ExportedUseMobilePickerSlotProps<DateView, TEnableAccessibleFieldDOMStructure> {}
+    ExportedUseMobilePickerSlotProps<TEnableAccessibleFieldDOMStructure> {}
 
 export interface MobileDatePickerProps<TEnableAccessibleFieldDOMStructure extends boolean = true>
   extends BaseDatePickerProps,
diff --git a/packages/x-date-pickers/src/MobileDateTimePicker/MobileDateTimePicker.types.ts b/packages/x-date-pickers/src/MobileDateTimePicker/MobileDateTimePicker.types.ts
index 6ba454d95810a..1ee7a59f95185 100644
--- a/packages/x-date-pickers/src/MobileDateTimePicker/MobileDateTimePicker.types.ts
+++ b/packages/x-date-pickers/src/MobileDateTimePicker/MobileDateTimePicker.types.ts
@@ -12,15 +12,13 @@ import {
 import { DateOrTimeView } from '../models';
 import { DateOrTimeViewWithMeridiem } from '../internals/models';
 
-export interface MobileDateTimePickerSlots<TView extends DateOrTimeViewWithMeridiem>
+export interface MobileDateTimePickerSlots
   extends BaseDateTimePickerSlots,
-    MakeOptional<UseMobilePickerSlots<TView>, 'field'> {}
+    MakeOptional<UseMobilePickerSlots, 'field'> {}
 
-export interface MobileDateTimePickerSlotProps<
-  TView extends DateOrTimeViewWithMeridiem,
-  TEnableAccessibleFieldDOMStructure extends boolean,
-> extends BaseDateTimePickerSlotProps,
-    ExportedUseMobilePickerSlotProps<TView, TEnableAccessibleFieldDOMStructure> {}
+export interface MobileDateTimePickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean>
+  extends BaseDateTimePickerSlotProps,
+    ExportedUseMobilePickerSlotProps<TEnableAccessibleFieldDOMStructure> {}
 
 export interface MobileDateTimePickerProps<
   TView extends DateOrTimeViewWithMeridiem = DateOrTimeView,
@@ -31,10 +29,10 @@ export interface MobileDateTimePickerProps<
    * Overridable component slots.
    * @default {}
    */
-  slots?: MobileDateTimePickerSlots<TView>;
+  slots?: MobileDateTimePickerSlots;
   /**
    * The props used for each component slot.
    * @default {}
    */
-  slotProps?: MobileDateTimePickerSlotProps<TView, TEnableAccessibleFieldDOMStructure>;
+  slotProps?: MobileDateTimePickerSlotProps<TEnableAccessibleFieldDOMStructure>;
 }
diff --git a/packages/x-date-pickers/src/MobileTimePicker/MobileTimePicker.types.ts b/packages/x-date-pickers/src/MobileTimePicker/MobileTimePicker.types.ts
index 1304bfb6d8b46..0ac529a2bef99 100644
--- a/packages/x-date-pickers/src/MobileTimePicker/MobileTimePicker.types.ts
+++ b/packages/x-date-pickers/src/MobileTimePicker/MobileTimePicker.types.ts
@@ -12,15 +12,13 @@ import {
 import { TimeView } from '../models';
 import { TimeViewWithMeridiem } from '../internals/models';
 
-export interface MobileTimePickerSlots<TView extends TimeViewWithMeridiem>
+export interface MobileTimePickerSlots
   extends BaseTimePickerSlots,
-    MakeOptional<UseMobilePickerSlots<TView>, 'field'> {}
+    MakeOptional<UseMobilePickerSlots, 'field'> {}
 
-export interface MobileTimePickerSlotProps<
-  TView extends TimeViewWithMeridiem,
-  TEnableAccessibleFieldDOMStructure extends boolean,
-> extends BaseTimePickerSlotProps,
-    ExportedUseMobilePickerSlotProps<TView, TEnableAccessibleFieldDOMStructure> {}
+export interface MobileTimePickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean>
+  extends BaseTimePickerSlotProps,
+    ExportedUseMobilePickerSlotProps<TEnableAccessibleFieldDOMStructure> {}
 
 export interface MobileTimePickerProps<
   TView extends TimeViewWithMeridiem = TimeView,
@@ -31,10 +29,10 @@ export interface MobileTimePickerProps<
    * Overridable component slots.
    * @default {}
    */
-  slots?: MobileTimePickerSlots<TView>;
+  slots?: MobileTimePickerSlots;
   /**
    * The props used for each component slot.
    * @default {}
    */
-  slotProps?: MobileTimePickerSlotProps<TView, TEnableAccessibleFieldDOMStructure>;
+  slotProps?: MobileTimePickerSlotProps<TEnableAccessibleFieldDOMStructure>;
 }
diff --git a/packages/x-date-pickers/src/PickersLayout/PickersLayout.tsx b/packages/x-date-pickers/src/PickersLayout/PickersLayout.tsx
index 7a7908fc3d900..bccc518ae565e 100644
--- a/packages/x-date-pickers/src/PickersLayout/PickersLayout.tsx
+++ b/packages/x-date-pickers/src/PickersLayout/PickersLayout.tsx
@@ -11,7 +11,7 @@ import {
   PickersLayoutClasses,
 } from './pickersLayoutClasses';
 import usePickerLayout from './usePickerLayout';
-import { DateOrTimeViewWithMeridiem, PickerValidValue } from '../internals/models';
+import { PickerValidValue } from '../internals/models';
 import { usePickerContext } from '../hooks/usePickerContext';
 
 const useUtilityClasses = (
@@ -87,11 +87,8 @@ export const PickersLayoutContentWrapper = styled('div', {
   flexDirection: 'column',
 });
 
-type PickersLayoutComponent = (<
-  TValue extends PickerValidValue,
-  TView extends DateOrTimeViewWithMeridiem,
->(
-  props: PickersLayoutProps<TValue, TView> & React.RefAttributes<HTMLDivElement>,
+type PickersLayoutComponent = (<TValue extends PickerValidValue>(
+  props: PickersLayoutProps<TValue> & React.RefAttributes<HTMLDivElement>,
 ) => React.JSX.Element) & { propTypes?: any };
 
 /**
@@ -103,10 +100,10 @@ type PickersLayoutComponent = (<
  *
  * - [PickersLayout API](https://mui.com/x/api/date-pickers/pickers-layout/)
  */
-const PickersLayout = React.forwardRef(function PickersLayout<
-  TValue extends PickerValidValue,
-  TView extends DateOrTimeViewWithMeridiem,
->(inProps: PickersLayoutProps<TValue, TView>, ref: React.Ref<HTMLDivElement>) {
+const PickersLayout = React.forwardRef(function PickersLayout<TValue extends PickerValidValue>(
+  inProps: PickersLayoutProps<TValue>,
+  ref: React.Ref<HTMLDivElement>,
+) {
   const props = useThemeProps({ props: inProps, name: 'MuiPickersLayout' });
 
   const { toolbar, content, tabs, actionBar, shortcuts, ownerState } = usePickerLayout(props);
@@ -156,7 +153,6 @@ PickersLayout.propTypes = {
   isValid: PropTypes.func.isRequired,
   onChange: PropTypes.func.isRequired,
   onSelectShortcut: PropTypes.func.isRequired,
-  onViewChange: PropTypes.func.isRequired,
   /**
    * The props used for each component slot.
    * @default {}
@@ -176,10 +172,6 @@ PickersLayout.propTypes = {
     PropTypes.object,
   ]),
   value: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object]),
-  view: PropTypes.oneOf(['day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'year']),
-  views: PropTypes.arrayOf(
-    PropTypes.oneOf(['day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'year']).isRequired,
-  ).isRequired,
 } as any;
 
 export { PickersLayout };
diff --git a/packages/x-date-pickers/src/PickersLayout/PickersLayout.types.ts b/packages/x-date-pickers/src/PickersLayout/PickersLayout.types.ts
index b6382d370840c..c7e2e388edce4 100644
--- a/packages/x-date-pickers/src/PickersLayout/PickersLayout.types.ts
+++ b/packages/x-date-pickers/src/PickersLayout/PickersLayout.types.ts
@@ -3,9 +3,8 @@ import { SxProps, Theme } from '@mui/material/styles';
 import { SlotComponentProps } from '@mui/utils';
 import { PickersActionBar, PickersActionBarProps } from '../PickersActionBar';
 import { BaseToolbarProps, ExportedBaseToolbarProps } from '../internals/models/props/toolbar';
-import { BaseTabsProps, ExportedBaseTabsProps } from '../internals/models/props/tabs';
+import { ExportedBaseTabsProps } from '../internals/models/props/tabs';
 import { PickersLayoutClasses } from './pickersLayoutClasses';
-import { DateOrTimeViewWithMeridiem } from '../internals/models/common';
 import { PickersShortcutsProps } from '../PickersShortcuts';
 import {
   ExportedPickersShortcutProps,
@@ -13,13 +12,9 @@ import {
 } from '../PickersShortcuts/PickersShortcuts';
 import { PickerOwnerState } from '../models';
 import { PickerValidValue } from '../internals/models';
-import { UsePickerViewsLayoutResponse } from '../internals/hooks/usePicker/usePickerViews';
 import { UsePickerValueLayoutResponse } from '../internals/hooks/usePicker/usePickerValue.types';
 
-export interface ExportedPickersLayoutSlots<
-  TValue extends PickerValidValue,
-  TView extends DateOrTimeViewWithMeridiem,
-> {
+export interface ExportedPickersLayoutSlots<TValue extends PickerValidValue> {
   /**
    * Custom component for the action bar, it is placed below the picker views.
    * @default PickersActionBar
@@ -35,7 +30,7 @@ export interface ExportedPickersLayoutSlots<
    * It wraps the toolbar, views, action bar, and shortcuts.
    */
   layout?: React.JSXElementConstructor<
-    PickersLayoutProps<TValue, TView> & React.RefAttributes<HTMLDivElement>
+    PickersLayoutProps<TValue> & React.RefAttributes<HTMLDivElement>
   >;
 }
 
@@ -49,10 +44,7 @@ export interface PickerLayoutOwnerState extends PickerOwnerState {
   layoutDirection: 'ltr' | 'rtl';
 }
 
-export interface ExportedPickersLayoutSlotProps<
-  TValue extends PickerValidValue,
-  TView extends DateOrTimeViewWithMeridiem,
-> {
+export interface ExportedPickersLayoutSlotProps<TValue extends PickerValidValue> {
   /**
    * Props passed down to the action bar component.
    */
@@ -64,28 +56,24 @@ export interface ExportedPickersLayoutSlotProps<
   /**
    * Props passed down to the layoutRoot component.
    */
-  layout?: Partial<PickersLayoutProps<TValue, TView>>;
+  layout?: Partial<PickersLayoutProps<TValue>>;
 }
 
-export interface PickersLayoutSlots<
-  TValue extends PickerValidValue,
-  TView extends DateOrTimeViewWithMeridiem,
-> extends ExportedPickersLayoutSlots<TValue, TView> {
+export interface PickersLayoutSlots<TValue extends PickerValidValue>
+  extends ExportedPickersLayoutSlots<TValue> {
   /**
    * Tabs enabling toggling between views.
    */
-  tabs?: React.ElementType<BaseTabsProps<TView>>;
+  tabs?: React.ElementType<{}>;
   /**
    * Custom component for the toolbar.
    * It is placed above the picker views.
    */
-  toolbar?: React.JSXElementConstructor<BaseToolbarProps<TValue, TView>>;
+  toolbar?: React.JSXElementConstructor<BaseToolbarProps<TValue>>;
 }
 
-export interface PickersLayoutSlotProps<
-  TValue extends PickerValidValue,
-  TView extends DateOrTimeViewWithMeridiem,
-> extends ExportedPickersLayoutSlotProps<TValue, TView> {
+export interface PickersLayoutSlotProps<TValue extends PickerValidValue>
+  extends ExportedPickersLayoutSlotProps<TValue> {
   /**
    * Props passed down to the tabs component.
    */
@@ -96,11 +84,8 @@ export interface PickersLayoutSlotProps<
   toolbar?: ExportedBaseToolbarProps;
 }
 
-export interface PickersLayoutProps<
-  TValue extends PickerValidValue,
-  TView extends DateOrTimeViewWithMeridiem,
-> extends UsePickerViewsLayoutResponse<TView>,
-    UsePickerValueLayoutResponse<TValue> {
+export interface PickersLayoutProps<TValue extends PickerValidValue>
+  extends UsePickerValueLayoutResponse<TValue> {
   className?: string;
   children?: React.ReactNode;
   /**
@@ -115,12 +100,12 @@ export interface PickersLayoutProps<
    * Overridable component slots.
    * @default {}
    */
-  slots?: PickersLayoutSlots<TValue, TView>;
+  slots?: PickersLayoutSlots<TValue>;
   /**
    * The props used for each component slot.
    * @default {}
    */
-  slotProps?: PickersLayoutSlotProps<TValue, TView>;
+  slotProps?: PickersLayoutSlotProps<TValue>;
 }
 
 export interface SubComponents<TValue extends PickerValidValue> {
diff --git a/packages/x-date-pickers/src/PickersLayout/usePickerLayout.tsx b/packages/x-date-pickers/src/PickersLayout/usePickerLayout.tsx
index 200e0f7e6895e..33cc7113d0dc0 100644
--- a/packages/x-date-pickers/src/PickersLayout/usePickerLayout.tsx
+++ b/packages/x-date-pickers/src/PickersLayout/usePickerLayout.tsx
@@ -8,13 +8,13 @@ import { PickerLayoutOwnerState, PickersLayoutProps, SubComponents } from './Pic
 import { getPickersLayoutUtilityClass, PickersLayoutClasses } from './pickersLayoutClasses';
 import { PickersShortcuts } from '../PickersShortcuts';
 import { BaseToolbarProps } from '../internals/models/props/toolbar';
-import { DateOrTimeViewWithMeridiem, PickerValidValue } from '../internals/models';
+import { PickerValidValue } from '../internals/models';
 import { usePickerPrivateContext } from '../internals/hooks/usePickerPrivateContext';
 import { usePickerContext } from '../hooks';
 
-function toolbarHasView<TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem>(
-  toolbarProps: BaseToolbarProps<TValue, TView> | any,
-): toolbarProps is BaseToolbarProps<TValue, TView> {
+function toolbarHasView<TValue extends PickerValidValue>(
+  toolbarProps: BaseToolbarProps<TValue> | any,
+): toolbarProps is BaseToolbarProps<TValue> {
   return toolbarProps.view !== null;
 }
 
@@ -40,17 +40,14 @@ interface UsePickerLayoutResponse<TValue extends PickerValidValue> extends SubCo
   ownerState: PickerLayoutOwnerState;
 }
 
-const usePickerLayout = <TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem>(
-  props: PickersLayoutProps<TValue, TView>,
+const usePickerLayout = <TValue extends PickerValidValue>(
+  props: PickersLayoutProps<TValue>,
 ): UsePickerLayoutResponse<TValue> => {
   const { ownerState: pickerOwnerState } = usePickerPrivateContext();
-  const { variant, orientation } = usePickerContext();
+  const { variant, orientation, view } = usePickerContext();
   const isRtl = useRtl();
 
   const {
-    view,
-    views,
-    onViewChange,
     value,
     onChange,
     onSelectShortcut,
@@ -93,9 +90,6 @@ const usePickerLayout = <TValue extends PickerValidValue, TView extends DateOrTi
       isLandscape: orientation === 'landscape', // Will be removed in a follow up PR?
       onChange,
       value,
-      view,
-      onViewChange,
-      views,
     },
     className: classes.toolbar,
     ownerState,
@@ -107,10 +101,7 @@ const usePickerLayout = <TValue extends PickerValidValue, TView extends DateOrTi
 
   // Tabs
   const Tabs = slots?.tabs;
-  const tabs =
-    view && Tabs ? (
-      <Tabs view={view} onViewChange={onViewChange} className={classes.tabs} {...slotProps?.tabs} />
-    ) : null;
+  const tabs = view && Tabs ? <Tabs className={classes.tabs} {...slotProps?.tabs} /> : null;
 
   // Shortcuts
   const Shortcuts = slots?.shortcuts ?? PickersShortcuts;
diff --git a/packages/x-date-pickers/src/StaticDatePicker/StaticDatePicker.types.ts b/packages/x-date-pickers/src/StaticDatePicker/StaticDatePicker.types.ts
index 27271bbcca561..00dc03e4ca024 100644
--- a/packages/x-date-pickers/src/StaticDatePicker/StaticDatePicker.types.ts
+++ b/packages/x-date-pickers/src/StaticDatePicker/StaticDatePicker.types.ts
@@ -9,15 +9,12 @@ import {
   UseStaticPickerSlots,
   UseStaticPickerSlotProps,
 } from '../internals/hooks/useStaticPicker';
-import { DateView } from '../models';
 
-export interface StaticDatePickerSlots
-  extends BaseDatePickerSlots,
-    UseStaticPickerSlots<DateView> {}
+export interface StaticDatePickerSlots extends BaseDatePickerSlots, UseStaticPickerSlots {}
 
 export interface StaticDatePickerSlotProps
   extends BaseDatePickerSlotProps,
-    UseStaticPickerSlotProps<DateView> {}
+    UseStaticPickerSlotProps {}
 
 export interface StaticDatePickerProps
   extends BaseDatePickerProps,
diff --git a/packages/x-date-pickers/src/StaticDateTimePicker/StaticDateTimePicker.types.ts b/packages/x-date-pickers/src/StaticDateTimePicker/StaticDateTimePicker.types.ts
index c6591da17a8bf..3cf70d0b8241c 100644
--- a/packages/x-date-pickers/src/StaticDateTimePicker/StaticDateTimePicker.types.ts
+++ b/packages/x-date-pickers/src/StaticDateTimePicker/StaticDateTimePicker.types.ts
@@ -11,13 +11,11 @@ import {
 } from '../internals/hooks/useStaticPicker';
 import { DateOrTimeView } from '../models';
 
-export interface StaticDateTimePickerSlots
-  extends BaseDateTimePickerSlots,
-    UseStaticPickerSlots<DateOrTimeView> {}
+export interface StaticDateTimePickerSlots extends BaseDateTimePickerSlots, UseStaticPickerSlots {}
 
 export interface StaticDateTimePickerSlotProps
   extends BaseDateTimePickerSlotProps,
-    UseStaticPickerSlotProps<DateOrTimeView> {}
+    UseStaticPickerSlotProps {}
 
 export interface StaticDateTimePickerProps
   extends BaseDateTimePickerProps<DateOrTimeView>,
diff --git a/packages/x-date-pickers/src/StaticTimePicker/StaticTimePicker.types.ts b/packages/x-date-pickers/src/StaticTimePicker/StaticTimePicker.types.ts
index 8de99acfe5c1c..fcba7c012813a 100644
--- a/packages/x-date-pickers/src/StaticTimePicker/StaticTimePicker.types.ts
+++ b/packages/x-date-pickers/src/StaticTimePicker/StaticTimePicker.types.ts
@@ -11,13 +11,11 @@ import {
 } from '../internals/hooks/useStaticPicker';
 import { TimeView } from '../models';
 
-export interface StaticTimePickerSlots
-  extends BaseTimePickerSlots,
-    UseStaticPickerSlots<TimeView> {}
+export interface StaticTimePickerSlots extends BaseTimePickerSlots, UseStaticPickerSlots {}
 
 export interface StaticTimePickerSlotProps
   extends BaseTimePickerSlotProps,
-    UseStaticPickerSlotProps<TimeView> {}
+    UseStaticPickerSlotProps {}
 
 export interface StaticTimePickerProps
   extends BaseTimePickerProps<TimeView>,
diff --git a/packages/x-date-pickers/src/TimePicker/TimePicker.types.ts b/packages/x-date-pickers/src/TimePicker/TimePicker.types.ts
index 03ce715b6e850..c4fc53a2cb751 100644
--- a/packages/x-date-pickers/src/TimePicker/TimePicker.types.ts
+++ b/packages/x-date-pickers/src/TimePicker/TimePicker.types.ts
@@ -12,13 +12,11 @@ import {
 import { TimeValidationError } from '../models';
 import { ValidateTimeProps } from '../validation/validateTime';
 
-export interface TimePickerSlots
-  extends DesktopTimePickerSlots,
-    MobileTimePickerSlots<TimeViewWithMeridiem> {}
+export interface TimePickerSlots extends DesktopTimePickerSlots, MobileTimePickerSlots {}
 
 export interface TimePickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean>
   extends DesktopTimePickerSlotProps<TEnableAccessibleFieldDOMStructure>,
-    MobileTimePickerSlotProps<TimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure> {}
+    MobileTimePickerSlotProps<TEnableAccessibleFieldDOMStructure> {}
 
 export interface TimePickerProps<TEnableAccessibleFieldDOMStructure extends boolean = true>
   extends DesktopTimePickerProps<TEnableAccessibleFieldDOMStructure>,
diff --git a/packages/x-date-pickers/src/TimePicker/TimePickerToolbar.tsx b/packages/x-date-pickers/src/TimePicker/TimePickerToolbar.tsx
index f7e3130bdb76b..3dce9ed968566 100644
--- a/packages/x-date-pickers/src/TimePicker/TimePickerToolbar.tsx
+++ b/packages/x-date-pickers/src/TimePicker/TimePickerToolbar.tsx
@@ -27,7 +27,7 @@ import {
 } from '../internals/hooks/useToolbarOwnerState';
 
 export interface TimePickerToolbarProps
-  extends BaseToolbarProps<PickerValue, TimeViewWithMeridiem>,
+  extends BaseToolbarProps<PickerValue>,
     ExportedTimePickerToolbarProps {
   ampm?: boolean;
   ampmInClock?: boolean;
@@ -160,9 +160,6 @@ function TimePickerToolbar(inProps: TimePickerToolbarProps) {
     value,
     isLandscape,
     onChange,
-    view,
-    onViewChange,
-    views,
     className,
     classes: classesProp,
     ...other
@@ -171,7 +168,8 @@ function TimePickerToolbar(inProps: TimePickerToolbarProps) {
   const translations = usePickerTranslations();
   const ownerState = useToolbarOwnerState();
   const classes = useUtilityClasses(classesProp, ownerState);
-  const { disabled, readOnly } = usePickerContext();
+  const { disabled, readOnly, view, onViewChange, views } =
+    usePickerContext<TimeViewWithMeridiem>();
 
   const showAmPmControl = Boolean(ampm && !ampmInClock && views.includes('hours'));
   const { meridiemMode, handleMeridiemChange } = useMeridiemMode(value, ampm, onChange);
@@ -280,12 +278,6 @@ TimePickerToolbar.propTypes = {
   hidden: PropTypes.bool,
   isLandscape: PropTypes.bool.isRequired,
   onChange: PropTypes.func.isRequired,
-  /**
-   * Callback called when a toolbar is clicked
-   * @template TView
-   * @param {TView} view The view to open
-   */
-  onViewChange: PropTypes.func.isRequired,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
@@ -305,15 +297,6 @@ TimePickerToolbar.propTypes = {
    */
   toolbarPlaceholder: PropTypes.node,
   value: PropTypes.object,
-  /**
-   * Currently visible picker view.
-   */
-  view: PropTypes.oneOf(['hours', 'meridiem', 'minutes', 'seconds']).isRequired,
-  /**
-   * Available views.
-   */
-  views: PropTypes.arrayOf(PropTypes.oneOf(['hours', 'meridiem', 'minutes', 'seconds']).isRequired)
-    .isRequired,
 } as any;
 
 export { TimePickerToolbar };
diff --git a/packages/x-date-pickers/src/hooks/usePickerContext.ts b/packages/x-date-pickers/src/hooks/usePickerContext.ts
index ba3d36ed8854a..61d4ffe9f4b11 100644
--- a/packages/x-date-pickers/src/hooks/usePickerContext.ts
+++ b/packages/x-date-pickers/src/hooks/usePickerContext.ts
@@ -1,12 +1,15 @@
 'use client';
 import * as React from 'react';
-import { PickerContext } from '../internals/components/PickerProvider';
+import { PickerContext, PickerContextValue } from '../internals/components/PickerProvider';
+import { DateOrTimeViewWithMeridiem } from '../internals/models';
 
 /**
  * Returns the context passed by the picker that wraps the current component.
  */
-export const usePickerContext = () => {
-  const value = React.useContext(PickerContext);
+export const usePickerContext = <
+  TView extends DateOrTimeViewWithMeridiem = DateOrTimeViewWithMeridiem,
+>() => {
+  const value = React.useContext(PickerContext) as PickerContextValue<TView>;
   if (value == null) {
     throw new Error(
       [
diff --git a/packages/x-date-pickers/src/internals/components/PickerProvider.tsx b/packages/x-date-pickers/src/internals/components/PickerProvider.tsx
index 191e45601a0fc..95238191b4a0e 100644
--- a/packages/x-date-pickers/src/internals/components/PickerProvider.tsx
+++ b/packages/x-date-pickers/src/internals/components/PickerProvider.tsx
@@ -2,14 +2,15 @@ import * as React from 'react';
 import { PickerOwnerState } from '../../models';
 import { PickersInputLocaleText } from '../../locales';
 import { LocalizationProvider } from '../../LocalizationProvider';
-import { PickerOrientation, PickerVariant } from '../models';
+import { DateOrTimeViewWithMeridiem, PickerOrientation, PickerVariant } from '../models';
 import type {
   UsePickerValueActionsContextValue,
   UsePickerValueContextValue,
   UsePickerValuePrivateContextValue,
 } from '../hooks/usePicker/usePickerValue.types';
+import { UsePickerViewsContextValue } from '../hooks/usePicker/usePickerViews';
 
-export const PickerContext = React.createContext<PickerContextValue | null>(null);
+export const PickerContext = React.createContext<PickerContextValue<any> | null>(null);
 
 export const PickerActionsContext = React.createContext<PickerActionsContextValue | null>(null);
 
@@ -47,14 +48,17 @@ export function PickerProvider(props: PickerProviderProps) {
 }
 
 export interface PickerProviderProps {
-  contextValue: PickerContextValue;
+  contextValue: PickerContextValue<any>;
   actionsContextValue: PickerActionsContextValue;
   privateContextValue: PickerPrivateContextValue;
   localeText: PickersInputLocaleText | undefined;
   children: React.ReactNode;
 }
 
-export interface PickerContextValue extends UsePickerValueContextValue {
+export interface PickerContextValue<
+  TView extends DateOrTimeViewWithMeridiem = DateOrTimeViewWithMeridiem,
+> extends UsePickerValueContextValue,
+    UsePickerViewsContextValue<TView> {
   /**
    * `true` if the picker is disabled, `false` otherwise.
    */
diff --git a/packages/x-date-pickers/src/internals/components/PickersToolbar.tsx b/packages/x-date-pickers/src/internals/components/PickersToolbar.tsx
index a63d819df0aa7..cee826d3cd7de 100644
--- a/packages/x-date-pickers/src/internals/components/PickersToolbar.tsx
+++ b/packages/x-date-pickers/src/internals/components/PickersToolbar.tsx
@@ -6,13 +6,11 @@ import composeClasses from '@mui/utils/composeClasses';
 import { shouldForwardProp } from '@mui/system/createStyled';
 import { BaseToolbarProps } from '../models/props/toolbar';
 import { getPickersToolbarUtilityClass, PickersToolbarClasses } from './pickersToolbarClasses';
-import { DateOrTimeViewWithMeridiem, PickerValidValue } from '../models';
+import { PickerValidValue } from '../models';
 import { PickerToolbarOwnerState, useToolbarOwnerState } from '../hooks/useToolbarOwnerState';
 
-export interface PickersToolbarProps<
-  TValue extends PickerValidValue,
-  TView extends DateOrTimeViewWithMeridiem,
-> extends Pick<BaseToolbarProps<TValue, TView>, 'isLandscape' | 'hidden' | 'titleId'> {
+export interface PickersToolbarProps<TValue extends PickerValidValue>
+  extends Pick<BaseToolbarProps<TValue>, 'isLandscape' | 'hidden' | 'titleId'> {
   className?: string;
   landscapeDirection?: 'row' | 'column';
   toolbarTitle: React.ReactNode;
@@ -86,21 +84,13 @@ const PickersToolbarContent = styled('div', {
   ],
 });
 
-type PickersToolbarComponent = (<
-  TValue extends PickerValidValue,
-  TView extends DateOrTimeViewWithMeridiem,
->(
-  props: React.PropsWithChildren<PickersToolbarProps<TValue, TView>> &
-    React.RefAttributes<HTMLDivElement>,
+type PickersToolbarComponent = (<TValue extends PickerValidValue>(
+  props: React.PropsWithChildren<PickersToolbarProps<TValue>> & React.RefAttributes<HTMLDivElement>,
 ) => React.JSX.Element) & { propTypes?: any };
 
 export const PickersToolbar = React.forwardRef(function PickersToolbar<
   TValue extends PickerValidValue,
-  TView extends DateOrTimeViewWithMeridiem,
->(
-  inProps: React.PropsWithChildren<PickersToolbarProps<TValue, TView>>,
-  ref: React.Ref<HTMLDivElement>,
-) {
+>(inProps: React.PropsWithChildren<PickersToolbarProps<TValue>>, ref: React.Ref<HTMLDivElement>) {
   const props = useThemeProps({ props: inProps, name: 'MuiPickersToolbar' });
   const {
     children,
diff --git a/packages/x-date-pickers/src/internals/hooks/useDesktopPicker/useDesktopPicker.types.ts b/packages/x-date-pickers/src/internals/hooks/useDesktopPicker/useDesktopPicker.types.ts
index 114e346a36e14..dc08d3ab261bc 100644
--- a/packages/x-date-pickers/src/internals/hooks/useDesktopPicker/useDesktopPicker.types.ts
+++ b/packages/x-date-pickers/src/internals/hooks/useDesktopPicker/useDesktopPicker.types.ts
@@ -31,12 +31,12 @@ import {
 import { PickersTextFieldProps } from '../../../PickersTextField';
 import { UsePickerProviderNonStaticProps } from '../usePicker/usePickerProvider';
 
-export interface UseDesktopPickerSlots<TView extends DateOrTimeViewWithMeridiem>
+export interface UseDesktopPickerSlots
   extends Pick<
       PickersPopperSlots,
       'desktopPaper' | 'desktopTransition' | 'desktopTrapFocus' | 'popper'
     >,
-    ExportedPickersLayoutSlots<PickerValue, TView>,
+    ExportedPickersLayoutSlots<PickerValue>,
     UseClearableFieldSlots {
   /**
    * Component used to enter the date with the keyboard.
@@ -63,17 +63,14 @@ export interface UseDesktopPickerSlots<TView extends DateOrTimeViewWithMeridiem>
   openPickerIcon: React.ElementType;
 }
 
-export interface UseDesktopPickerSlotProps<
-  TView extends DateOrTimeViewWithMeridiem,
-  TEnableAccessibleFieldDOMStructure extends boolean,
-> extends ExportedUseDesktopPickerSlotProps<TView, TEnableAccessibleFieldDOMStructure>,
-    Pick<PickersLayoutSlotProps<PickerValue, TView>, 'toolbar'> {}
+export interface UseDesktopPickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean>
+  extends ExportedUseDesktopPickerSlotProps<TEnableAccessibleFieldDOMStructure>,
+    Pick<PickersLayoutSlotProps<PickerValue>, 'toolbar'> {}
 
 export interface ExportedUseDesktopPickerSlotProps<
-  TView extends DateOrTimeViewWithMeridiem,
   TEnableAccessibleFieldDOMStructure extends boolean,
 > extends PickersPopperSlotProps,
-    ExportedPickersLayoutSlotProps<PickerValue, TView>,
+    ExportedPickersLayoutSlotProps<PickerValue>,
     UseClearableFieldSlotProps {
   field?: SlotComponentPropsFromProps<
     PickerFieldSlotProps<PickerValue, TEnableAccessibleFieldDOMStructure>,
@@ -113,12 +110,12 @@ export interface UseDesktopPickerProps<
    * Overridable component slots.
    * @default {}
    */
-  slots: UseDesktopPickerSlots<TView>;
+  slots: UseDesktopPickerSlots;
   /**
    * The props used for each component slot.
    * @default {}
    */
-  slotProps?: UseDesktopPickerSlotProps<TView, TEnableAccessibleFieldDOMStructure>;
+  slotProps?: UseDesktopPickerSlotProps<TEnableAccessibleFieldDOMStructure>;
 }
 
 export interface UseDesktopPickerParams<
diff --git a/packages/x-date-pickers/src/internals/hooks/useMobilePicker/useMobilePicker.types.ts b/packages/x-date-pickers/src/internals/hooks/useMobilePicker/useMobilePicker.types.ts
index edbfeef65b9df..c01b00e785df8 100644
--- a/packages/x-date-pickers/src/internals/hooks/useMobilePicker/useMobilePicker.types.ts
+++ b/packages/x-date-pickers/src/internals/hooks/useMobilePicker/useMobilePicker.types.ts
@@ -28,9 +28,9 @@ import { DateOrTimeViewWithMeridiem, PickerValue } from '../../models';
 import { PickersTextFieldProps } from '../../../PickersTextField';
 import { UsePickerProviderNonStaticProps } from '../usePicker/usePickerProvider';
 
-export interface UseMobilePickerSlots<TView extends DateOrTimeViewWithMeridiem>
+export interface UseMobilePickerSlots
   extends PickersModalDialogSlots,
-    ExportedPickersLayoutSlots<PickerValue, TView> {
+    ExportedPickersLayoutSlots<PickerValue> {
   /**
    * Component used to enter the date with the keyboard.
    */
@@ -43,10 +43,9 @@ export interface UseMobilePickerSlots<TView extends DateOrTimeViewWithMeridiem>
 }
 
 export interface ExportedUseMobilePickerSlotProps<
-  TView extends DateOrTimeViewWithMeridiem,
   TEnableAccessibleFieldDOMStructure extends boolean,
 > extends PickersModalDialogSlotProps,
-    ExportedPickersLayoutSlotProps<PickerValue, TView> {
+    ExportedPickersLayoutSlotProps<PickerValue> {
   field?: SlotComponentPropsFromProps<
     PickerFieldSlotProps<PickerValue, TEnableAccessibleFieldDOMStructure>,
     {},
@@ -59,11 +58,9 @@ export interface ExportedUseMobilePickerSlotProps<
   >;
 }
 
-export interface UseMobilePickerSlotProps<
-  TView extends DateOrTimeViewWithMeridiem,
-  TEnableAccessibleFieldDOMStructure extends boolean,
-> extends ExportedUseMobilePickerSlotProps<TView, TEnableAccessibleFieldDOMStructure>,
-    Pick<PickersLayoutSlotProps<PickerValue, TView>, 'toolbar'> {}
+export interface UseMobilePickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean>
+  extends ExportedUseMobilePickerSlotProps<TEnableAccessibleFieldDOMStructure>,
+    Pick<PickersLayoutSlotProps<PickerValue>, 'toolbar'> {}
 
 export interface MobileOnlyPickerProps
   extends BaseNonStaticPickerProps,
@@ -82,12 +79,12 @@ export interface UseMobilePickerProps<
    * Overridable component slots.
    * @default {}
    */
-  slots: UseMobilePickerSlots<TView>;
+  slots: UseMobilePickerSlots;
   /**
    * The props used for each component slot.
    * @default {}
    */
-  slotProps?: UseMobilePickerSlotProps<TView, TEnableAccessibleFieldDOMStructure>;
+  slotProps?: UseMobilePickerSlotProps<TEnableAccessibleFieldDOMStructure>;
 }
 
 export interface UseMobilePickerParams<
diff --git a/packages/x-date-pickers/src/internals/hooks/usePicker/usePicker.ts b/packages/x-date-pickers/src/internals/hooks/usePicker/usePicker.ts
index 444ed5c24a8be..46d94bdfa4897 100644
--- a/packages/x-date-pickers/src/internals/hooks/usePicker/usePicker.ts
+++ b/packages/x-date-pickers/src/internals/hooks/usePicker/usePicker.ts
@@ -73,7 +73,6 @@ export const usePicker = <
 
     // Picker layout
     layoutProps: {
-      ...pickerViewsResponse.layoutProps,
       ...pickerValueResponse.layoutProps,
     },
 
diff --git a/packages/x-date-pickers/src/internals/hooks/usePicker/usePicker.types.ts b/packages/x-date-pickers/src/internals/hooks/usePicker/usePicker.types.ts
index a7717e8860d2e..34a81c4e0bf44 100644
--- a/packages/x-date-pickers/src/internals/hooks/usePicker/usePicker.types.ts
+++ b/packages/x-date-pickers/src/internals/hooks/usePicker/usePicker.types.ts
@@ -66,8 +66,7 @@ export interface UsePickerResponse<
     Pick<UsePickerViewsResponse<TView>, 'shouldRestoreFocus' | 'renderCurrentView'> {
   ownerState: PickerOwnerState;
   providerProps: UsePickerProviderReturnValue;
-  layoutProps: UsePickerValueResponse<TValue, TError>['layoutProps'] &
-    UsePickerViewsResponse<TView>['layoutProps'];
+  layoutProps: UsePickerValueResponse<TValue, TError>['layoutProps'];
   // TODO v8: Remove in https://github.com/mui/mui-x/pull/15671
   hasUIView: boolean;
 }
diff --git a/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerProvider.ts b/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerProvider.ts
index 1ced411b7ae6e..1d9260a09ee98 100644
--- a/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerProvider.ts
+++ b/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerProvider.ts
@@ -101,15 +101,23 @@ export function usePickerProvider<
     ],
   );
 
-  const contextValue = React.useMemo<PickerContextValue>(
+  const contextValue = React.useMemo<PickerContextValue<TView>>(
     () => ({
       ...paramsFromUsePickerValue.contextValue,
+      ...paramsFromUsePickerViews.contextValue,
       disabled: props.disabled ?? false,
       readOnly: props.readOnly ?? false,
       variant,
       orientation,
     }),
-    [paramsFromUsePickerValue.contextValue, variant, orientation, props.disabled, props.readOnly],
+    [
+      paramsFromUsePickerValue.contextValue,
+      paramsFromUsePickerViews.contextValue,
+      variant,
+      orientation,
+      props.disabled,
+      props.readOnly,
+    ],
   );
 
   const privateContextValue = React.useMemo<PickerPrivateContextValue>(
diff --git a/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerViews.ts b/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerViews.ts
index d6199b9725c59..375d13abaf27f 100644
--- a/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerViews.ts
+++ b/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerViews.ts
@@ -120,19 +120,30 @@ export interface UsePickerViewParams<
 export interface UsePickerViewsResponse<TView extends DateOrTimeViewWithMeridiem> {
   renderCurrentView: () => React.ReactNode;
   shouldRestoreFocus: () => boolean;
-  layoutProps: UsePickerViewsLayoutResponse<TView>;
   provider: UsePickerViewsProviderParams<TView>;
 }
 
-export interface UsePickerViewsLayoutResponse<TView extends DateOrTimeViewWithMeridiem> {
+export interface UsePickerViewsContextValue<TView extends DateOrTimeViewWithMeridiem> {
+  /**
+   * Available views.
+   */
+  views: readonly TView[];
+  /**
+   * View currently rendered.
+   */
   view: TView | null;
+  /**
+   * Callback called when the view to render changes
+   * @template TView
+   * @param {TView} view The view to render
+   */
   onViewChange: (view: TView) => void;
-  views: readonly TView[];
 }
 
 export interface UsePickerViewsProviderParams<TView extends DateOrTimeViewWithMeridiem> {
   hasUIView: boolean;
   views: readonly TView[];
+  contextValue: UsePickerViewsContextValue<TView>;
 }
 
 /**
@@ -257,20 +268,23 @@ export const usePickerViews = <
     setFocusedView(newView, true);
   }, [open]); // eslint-disable-line react-hooks/exhaustive-deps
 
-  const layoutProps: UsePickerViewsLayoutResponse<TView> = {
-    views,
-    view: popperView,
-    onViewChange: setView,
-  };
+  const contextValue = React.useMemo<UsePickerViewsContextValue<TView>>(
+    () => ({
+      views,
+      view: popperView,
+      onViewChange: setView,
+    }),
+    [views, popperView, setView],
+  );
 
   const providerParams: UsePickerViewsProviderParams<TView> = {
     hasUIView,
     views,
+    contextValue,
   };
 
   return {
     shouldRestoreFocus,
-    layoutProps,
     provider: providerParams,
     renderCurrentView: () => {
       if (popperView == null) {
diff --git a/packages/x-date-pickers/src/internals/hooks/useStaticPicker/useStaticPicker.types.ts b/packages/x-date-pickers/src/internals/hooks/useStaticPicker/useStaticPicker.types.ts
index aecb74e3eae81..c6c4c52d70c90 100644
--- a/packages/x-date-pickers/src/internals/hooks/useStaticPicker/useStaticPicker.types.ts
+++ b/packages/x-date-pickers/src/internals/hooks/useStaticPicker/useStaticPicker.types.ts
@@ -8,11 +8,9 @@ import { UsePickerParams } from '../usePicker';
 import { UsePickerViewsProps } from '../usePicker/usePickerViews';
 import { DateOrTimeViewWithMeridiem, PickerValue } from '../../models';
 
-export interface UseStaticPickerSlots<TView extends DateOrTimeViewWithMeridiem>
-  extends ExportedPickersLayoutSlots<PickerValue, TView> {}
+export interface UseStaticPickerSlots extends ExportedPickersLayoutSlots<PickerValue> {}
 
-export interface UseStaticPickerSlotProps<TView extends DateOrTimeViewWithMeridiem>
-  extends ExportedPickersLayoutSlotProps<PickerValue, TView> {}
+export interface UseStaticPickerSlotProps extends ExportedPickersLayoutSlotProps<PickerValue> {}
 
 export interface StaticOnlyPickerProps {
   /**
@@ -43,12 +41,12 @@ export interface UseStaticPickerProps<
    * Overridable component slots.
    * @default {}
    */
-  slots?: UseStaticPickerSlots<TView>;
+  slots?: UseStaticPickerSlots;
   /**
    * The props used for each component slot.
    * @default {}
    */
-  slotProps?: UseStaticPickerSlotProps<TView>;
+  slotProps?: UseStaticPickerSlotProps;
 }
 
 export interface UseStaticPickerParams<
diff --git a/packages/x-date-pickers/src/internals/index.ts b/packages/x-date-pickers/src/internals/index.ts
index 71f1671a2c784..17226de88c7f3 100644
--- a/packages/x-date-pickers/src/internals/index.ts
+++ b/packages/x-date-pickers/src/internals/index.ts
@@ -107,7 +107,7 @@ export type {
   BaseNonStaticPickerProps,
 } from './models/props/basePickerProps';
 export type { BaseClockProps, DesktopOnlyTimePickerProps, AmPmProps } from './models/props/time';
-export type { BaseTabsProps, ExportedBaseTabsProps } from './models/props/tabs';
+export type { ExportedBaseTabsProps } from './models/props/tabs';
 export type { BaseToolbarProps, ExportedBaseToolbarProps } from './models/props/toolbar';
 export type { FormProps } from './models/formProps';
 export type {
@@ -171,4 +171,4 @@ export { useCalendarState } from '../DateCalendar/useCalendarState';
 
 export { isInternalTimeView, isTimeView } from './utils/time-utils';
 
-export { DateTimePickerToolbarForceDesktopVariant } from '../DateTimePicker/DateTimePickerToolbar';
+export { DateTimePickerToolbarOverrideContext } from '../DateTimePicker/DateTimePickerToolbar';
diff --git a/packages/x-date-pickers/src/internals/models/props/tabs.ts b/packages/x-date-pickers/src/internals/models/props/tabs.ts
index 576939e81aa94..676454a85c059 100644
--- a/packages/x-date-pickers/src/internals/models/props/tabs.ts
+++ b/packages/x-date-pickers/src/internals/models/props/tabs.ts
@@ -1,19 +1,5 @@
 import { SxProps } from '@mui/system';
 import { Theme } from '@mui/material/styles';
-import { DateOrTimeViewWithMeridiem } from '../common';
-
-export interface BaseTabsProps<TView extends DateOrTimeViewWithMeridiem> {
-  /**
-   * Currently visible picker view.
-   */
-  view: TView;
-  /**
-   * Callback called when a tab is clicked.
-   * @template TView
-   * @param {TView} view The view to open
-   */
-  onViewChange: (view: TView) => void;
-}
 
 export interface ExportedBaseTabsProps {
   className?: string;
diff --git a/packages/x-date-pickers/src/internals/models/props/toolbar.ts b/packages/x-date-pickers/src/internals/models/props/toolbar.ts
index 9b0a82632df99..9b7727766c688 100644
--- a/packages/x-date-pickers/src/internals/models/props/toolbar.ts
+++ b/packages/x-date-pickers/src/internals/models/props/toolbar.ts
@@ -1,30 +1,13 @@
 import * as React from 'react';
 import { SxProps } from '@mui/system';
 import { Theme } from '@mui/material/styles';
-import { DateOrTimeViewWithMeridiem } from '../common';
 import { PickerValidValue } from '../value';
 
-export interface BaseToolbarProps<
-  TValue extends PickerValidValue,
-  TView extends DateOrTimeViewWithMeridiem,
-> extends ExportedBaseToolbarProps {
+export interface BaseToolbarProps<TValue extends PickerValidValue>
+  extends ExportedBaseToolbarProps {
   isLandscape: boolean;
   onChange: (newValue: TValue) => void;
   value: TValue;
-  /**
-   * Currently visible picker view.
-   */
-  view: TView;
-  /**
-   * Callback called when a toolbar is clicked
-   * @template TView
-   * @param {TView} view The view to open
-   */
-  onViewChange: (view: TView) => void;
-  /**
-   * Available views.
-   */
-  views: readonly TView[];
   titleId?: string;
 }
 
diff --git a/packages/x-date-pickers/src/themeAugmentation/props.d.ts b/packages/x-date-pickers/src/themeAugmentation/props.d.ts
index 453152c396646..c630c3c86e2e4 100644
--- a/packages/x-date-pickers/src/themeAugmentation/props.d.ts
+++ b/packages/x-date-pickers/src/themeAugmentation/props.d.ts
@@ -17,7 +17,6 @@ import { PickerPopperProps } from '../internals/components/PickersPopper';
 import { PickersToolbarProps } from '../internals/components/PickersToolbar';
 import { PickersToolbarButtonProps } from '../internals/components/PickersToolbarButton';
 import { ExportedPickersToolbarTextProps } from '../internals/components/PickersToolbarText';
-import { DateOrTimeView } from '../models';
 
 import { DatePickerProps } from '../DatePicker';
 import { ExportedDatePickerToolbarProps } from '../DatePicker/DatePickerToolbar';
@@ -77,10 +76,10 @@ export interface PickersComponentsPropsList {
   MuiPickersFadeTransitionGroup: PickersFadeTransitionGroupProps;
   MuiPickersPopper: PickerPopperProps;
   MuiPickersSlideTransition: ExportedSlideTransitionProps;
-  MuiPickersToolbar: PickersToolbarProps<PickerValidValue, DateOrTimeView>;
+  MuiPickersToolbar: PickersToolbarProps<PickerValidValue>;
   MuiPickersToolbarButton: PickersToolbarButtonProps;
   MuiPickersToolbarText: ExportedPickersToolbarTextProps;
-  MuiPickersLayout: PickersLayoutProps<PickerValidValue, DateOrTimeView>;
+  MuiPickersLayout: PickersLayoutProps<PickerValidValue>;
   MuiTimeClock: TimeClockProps;
   MuiTimeField: TimeFieldProps<any>;
   MuiTimePickerToolbar: ExportedTimePickerToolbarProps;
diff --git a/packages/x-date-pickers/src/themeAugmentation/themeAugmentation.spec.ts b/packages/x-date-pickers/src/themeAugmentation/themeAugmentation.spec.ts
index a622d4fda8e29..b32594f9dcfc6 100644
--- a/packages/x-date-pickers/src/themeAugmentation/themeAugmentation.spec.ts
+++ b/packages/x-date-pickers/src/themeAugmentation/themeAugmentation.spec.ts
@@ -213,7 +213,7 @@ createTheme({
     },
     MuiDateTimePickerTabs: {
       defaultProps: {
-        view: 'day',
+        hidden: true,
         // @ts-expect-error invalid MuiDateTimePicker prop
         someRandomProp: true,
       },
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 25a9db4e0e577..058a1f47988fa 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -440,6 +440,9 @@ importers:
       '@mui/material':
         specifier: ^5.16.11
         version: 5.16.11(@emotion/react@11.14.0(@types/react@18.3.17)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.17)(react@18.3.1))(@types/react@18.3.17)(react@18.3.1))(@types/react@18.3.17)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@mui/material-nextjs':
+        specifier: ^5.16.8
+        version: 5.16.8(@emotion/cache@11.14.0)(@emotion/server@11.11.0)(@mui/material@5.16.11(@emotion/react@11.14.0(@types/react@18.3.17)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.17)(react@18.3.1))(@types/react@18.3.17)(react@18.3.1))(@types/react@18.3.17)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.17)(next@15.1.1(@babel/core@7.26.0)(@playwright/test@1.49.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)
       '@mui/styles':
         specifier: ^5.16.11
         version: 5.16.11(@types/react@18.3.17)(react@18.3.1)
@@ -3181,6 +3184,24 @@ packages:
       '@types/react':
         optional: true
 
+  '@mui/material-nextjs@5.16.8':
+    resolution: {integrity: sha512-UJhXaizQWrl3a5uXeCYyAHITXZnRBJJFCarccXk04gH5+NS9UArNl20mG6emyuPwV67UDh8DBNUSjpHd1pTVGg==}
+    engines: {node: '>=12.0.0'}
+    peerDependencies:
+      '@emotion/cache': ^11.11.0
+      '@emotion/server': ^11.11.0
+      '@mui/material': ^5.0.0
+      '@types/react': ^17.0.0 || ^18.0.0 || ^19.0.0
+      next: ^13.0.0 || ^14.0.0
+      react: ^17.0.0 || ^18.0.0 || ^19.0.0
+    peerDependenciesMeta:
+      '@emotion/cache':
+        optional: true
+      '@emotion/server':
+        optional: true
+      '@types/react':
+        optional: true
+
   '@mui/material@5.16.11':
     resolution: {integrity: sha512-uoc67oecKdnVKaMHBVE433YrMuxQs22xY5nIjRb5sAPB+GaeZQWp8brQ3/adeH6k2IDa8+9i2IVd4fNLuvHSvA==}
     engines: {node: '>=12.0.0'}
@@ -12142,6 +12163,17 @@ snapshots:
       '@emotion/styled': 11.14.0(@emotion/react@11.14.0(@types/react@18.3.17)(react@18.3.1))(@types/react@18.3.17)(react@18.3.1)
       '@types/react': 18.3.17
 
+  '@mui/material-nextjs@5.16.8(@emotion/cache@11.14.0)(@emotion/server@11.11.0)(@mui/material@5.16.11(@emotion/react@11.14.0(@types/react@18.3.17)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.17)(react@18.3.1))(@types/react@18.3.17)(react@18.3.1))(@types/react@18.3.17)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.17)(next@15.1.1(@babel/core@7.26.0)(@playwright/test@1.49.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@babel/runtime': 7.26.0
+      '@mui/material': 5.16.11(@emotion/react@11.14.0(@types/react@18.3.17)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.17)(react@18.3.1))(@types/react@18.3.17)(react@18.3.1))(@types/react@18.3.17)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      next: 15.1.1(@babel/core@7.26.0)(@playwright/test@1.49.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react: 18.3.1
+    optionalDependencies:
+      '@emotion/cache': 11.14.0
+      '@emotion/server': 11.11.0
+      '@types/react': 18.3.17
+
   '@mui/material@5.16.11(@emotion/react@11.14.0(@types/react@18.3.17)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.17)(react@18.3.1))(@types/react@18.3.17)(react@18.3.1))(@types/react@18.3.17)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@babel/runtime': 7.26.0
diff --git a/renovate.json b/renovate.json
index 38f4e54f1c4b9..eb56e266d6d03 100644
--- a/renovate.json
+++ b/renovate.json
@@ -88,6 +88,7 @@
         "@mui/joy",
         "@mui/lab",
         "@mui/material",
+        "@mui/material-nextjs",
         "@mui/styles",
         "@mui/system",
         "@mui/types",
diff --git a/scripts/useMaterialUIv6.mjs b/scripts/useMaterialUIv6.mjs
index e730521d69f8f..abc2fe55845b4 100644
--- a/scripts/useMaterialUIv6.mjs
+++ b/scripts/useMaterialUIv6.mjs
@@ -9,6 +9,7 @@ const pnpmUpdate = childProcess.spawnSync(
     '@mui/system@6.x',
     '@mui/icons-material@6.x',
     '@mui/utils@6.x',
+    '@mui/material-nextjs@6.x',
     '@mui/styles@6.x',
     '@mui/lab@latest',
   ],
diff --git a/webpackBaseConfig.js b/webpackBaseConfig.js
index fc0446a9ae48d..2ada3fe5f14ad 100644
--- a/webpackBaseConfig.js
+++ b/webpackBaseConfig.js
@@ -21,6 +21,10 @@ module.exports = {
       '@mui/x-tree-view-pro': path.resolve(__dirname, './packages/x-tree-view-pro/src'),
       '@mui/x-license': path.resolve(__dirname, './packages/x-license/src'),
       '@mui/x-internals': path.resolve(__dirname, './packages/x-internals/src'),
+      '@mui/material-nextjs': path.resolve(
+        __dirname,
+        './node_modules/@mui/monorepo/packages/mui-material-nextjs/src',
+      ),
       docs: path.resolve(__dirname, './node_modules/@mui/monorepo/docs'),
       docsx: path.resolve(__dirname, './docs'),
     },