diff --git a/docs/data/date-pickers/date-range-picker/BasicDateRangePicker.js b/docs/data/date-pickers/date-range-picker/BasicDateRangePicker.js
index 65d20083e3bce..5d83c76ca4430 100644
--- a/docs/data/date-pickers/date-range-picker/BasicDateRangePicker.js
+++ b/docs/data/date-pickers/date-range-picker/BasicDateRangePicker.js
@@ -1,30 +1,12 @@
 import * as React from 'react';
-
-import TextField from '@mui/material/TextField';
-import Box from '@mui/material/Box';
 import { LocalizationProvider } from '@mui/x-date-pickers-pro';
 import { AdapterDayjs } from '@mui/x-date-pickers-pro/AdapterDayjs';
-import { DateRangePicker } from '@mui/x-date-pickers-pro/DateRangePicker';
+import { Unstable_NextDateRangePicker as NextDateRangePicker } from '@mui/x-date-pickers-pro/NextDateRangePicker';
 
 export default function BasicDateRangePicker() {
-  const [value, setValue] = React.useState([null, null]);
-
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs}>
-      <DateRangePicker
-        localeText={{ start: 'Check-in', end: 'Check-out' }}
-        value={value}
-        onChange={(newValue) => {
-          setValue(newValue);
-        }}
-        renderInput={(startProps, endProps) => (
-          <React.Fragment>
-            <TextField {...startProps} />
-            <Box sx={{ mx: 2 }}> to </Box>
-            <TextField {...endProps} />
-          </React.Fragment>
-        )}
-      />
+      <NextDateRangePicker localeText={{ start: 'Check-in', end: 'Check-out' }} />
     </LocalizationProvider>
   );
 }
diff --git a/docs/data/date-pickers/date-range-picker/BasicDateRangePicker.tsx b/docs/data/date-pickers/date-range-picker/BasicDateRangePicker.tsx
index 7fe6ca71a6818..5d83c76ca4430 100644
--- a/docs/data/date-pickers/date-range-picker/BasicDateRangePicker.tsx
+++ b/docs/data/date-pickers/date-range-picker/BasicDateRangePicker.tsx
@@ -1,30 +1,12 @@
 import * as React from 'react';
-import { Dayjs } from 'dayjs';
-import TextField from '@mui/material/TextField';
-import Box from '@mui/material/Box';
 import { LocalizationProvider } from '@mui/x-date-pickers-pro';
 import { AdapterDayjs } from '@mui/x-date-pickers-pro/AdapterDayjs';
-import { DateRangePicker, DateRange } from '@mui/x-date-pickers-pro/DateRangePicker';
+import { Unstable_NextDateRangePicker as NextDateRangePicker } from '@mui/x-date-pickers-pro/NextDateRangePicker';
 
 export default function BasicDateRangePicker() {
-  const [value, setValue] = React.useState<DateRange<Dayjs>>([null, null]);
-
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs}>
-      <DateRangePicker
-        localeText={{ start: 'Check-in', end: 'Check-out' }}
-        value={value}
-        onChange={(newValue) => {
-          setValue(newValue);
-        }}
-        renderInput={(startProps, endProps) => (
-          <React.Fragment>
-            <TextField {...startProps} />
-            <Box sx={{ mx: 2 }}> to </Box>
-            <TextField {...endProps} />
-          </React.Fragment>
-        )}
-      />
+      <NextDateRangePicker localeText={{ start: 'Check-in', end: 'Check-out' }} />
     </LocalizationProvider>
   );
 }
diff --git a/docs/data/date-pickers/date-range-picker/BasicDateRangePicker.tsx.preview b/docs/data/date-pickers/date-range-picker/BasicDateRangePicker.tsx.preview
index 7487f9854fbeb..264e0eb2d3603 100644
--- a/docs/data/date-pickers/date-range-picker/BasicDateRangePicker.tsx.preview
+++ b/docs/data/date-pickers/date-range-picker/BasicDateRangePicker.tsx.preview
@@ -1,16 +1,3 @@
 <LocalizationProvider dateAdapter={AdapterDayjs}>
-  <DateRangePicker
-    localeText={{ start: 'Check-in', end: 'Check-out' }}
-    value={value}
-    onChange={(newValue) => {
-      setValue(newValue);
-    }}
-    renderInput={(startProps, endProps) => (
-      <React.Fragment>
-        <TextField {...startProps} />
-        <Box sx={{ mx: 2 }}> to </Box>
-        <TextField {...endProps} />
-      </React.Fragment>
-    )}
-  />
+  <NextDateRangePicker localeText={{ start: 'Check-in', end: 'Check-out' }} />
 </LocalizationProvider>
\ No newline at end of file
diff --git a/docs/data/date-pickers/date-range-picker/CalendarsDateRangePicker.js b/docs/data/date-pickers/date-range-picker/CalendarsDateRangePicker.js
index 0cc957b720db1..d62d5d7b19e8d 100644
--- a/docs/data/date-pickers/date-range-picker/CalendarsDateRangePicker.js
+++ b/docs/data/date-pickers/date-range-picker/CalendarsDateRangePicker.js
@@ -1,64 +1,43 @@
 import * as React from 'react';
-
+import PropTypes from 'prop-types';
+import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
-import TextField from '@mui/material/TextField';
 import { LocalizationProvider } from '@mui/x-date-pickers-pro';
 import { AdapterDayjs } from '@mui/x-date-pickers-pro/AdapterDayjs';
-import { DateRangePicker } from '@mui/x-date-pickers-pro/DateRangePicker';
-import Box from '@mui/material/Box';
+import { Unstable_NextDateRangePicker as NextDateRangePicker } from '@mui/x-date-pickers-pro/NextDateRangePicker';
 
-export default function CalendarsDateRangePicker() {
-  const [value, setValue] = React.useState([null, null]);
+function GridItem({ label, children, spacing = 1 }) {
+  return (
+    <Box sx={{ display: 'flex', flexDirection: 'column' }}>
+      <Typography variant="body2" sx={{ mb: spacing }}>
+        {label}
+      </Typography>
+      {children}
+    </Box>
+  );
+}
 
+GridItem.propTypes = {
+  children: PropTypes.node,
+  label: PropTypes.string.isRequired,
+  spacing: PropTypes.number,
+};
+
+export default function CalendarsDateRangePicker() {
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs}>
-      <div>
-        <Typography sx={{ mt: 2, mb: 1 }}>1 calendar </Typography>
-        <DateRangePicker
-          calendars={1}
-          value={value}
-          onChange={(newValue) => {
-            setValue(newValue);
-          }}
-          renderInput={(startProps, endProps) => (
-            <React.Fragment>
-              <TextField {...startProps} />
-              <Box sx={{ mx: 2 }}> to </Box>
-              <TextField {...endProps} />
-            </React.Fragment>
-          )}
-        />
-        <Typography sx={{ mt: 2, mb: 1 }}>2 calendars</Typography>
-        <DateRangePicker
-          calendars={2}
-          value={value}
-          onChange={(newValue) => {
-            setValue(newValue);
-          }}
-          renderInput={(startProps, endProps) => (
-            <React.Fragment>
-              <TextField {...startProps} />
-              <Box sx={{ mx: 2 }}> to </Box>
-              <TextField {...endProps} />
-            </React.Fragment>
-          )}
-        />
-        <Typography sx={{ mt: 2, mb: 1 }}>3 calendars</Typography>
-        <DateRangePicker
-          calendars={3}
-          value={value}
-          onChange={(newValue) => {
-            setValue(newValue);
-          }}
-          renderInput={(startProps, endProps) => (
-            <React.Fragment>
-              <TextField {...startProps} />
-              <Box sx={{ mx: 2 }}> to </Box>
-              <TextField {...endProps} />
-            </React.Fragment>
-          )}
-        />
-      </div>
+      <Stack spacing={4}>
+        <GridItem label="1 calendar" spacing={2}>
+          <NextDateRangePicker calendars={1} />
+        </GridItem>
+        <GridItem label="2 calendars" spacing={2}>
+          <NextDateRangePicker calendars={2} />
+        </GridItem>
+        <GridItem label="3 calendars" spacing={2}>
+          <NextDateRangePicker calendars={3} />
+        </GridItem>
+      </Stack>
     </LocalizationProvider>
   );
 }
diff --git a/docs/data/date-pickers/date-range-picker/CalendarsDateRangePicker.tsx b/docs/data/date-pickers/date-range-picker/CalendarsDateRangePicker.tsx
index fe54c278d497a..38313cba3575f 100644
--- a/docs/data/date-pickers/date-range-picker/CalendarsDateRangePicker.tsx
+++ b/docs/data/date-pickers/date-range-picker/CalendarsDateRangePicker.tsx
@@ -1,64 +1,44 @@
 import * as React from 'react';
-import { Dayjs } from 'dayjs';
+import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
-import TextField from '@mui/material/TextField';
 import { LocalizationProvider } from '@mui/x-date-pickers-pro';
 import { AdapterDayjs } from '@mui/x-date-pickers-pro/AdapterDayjs';
-import { DateRangePicker, DateRange } from '@mui/x-date-pickers-pro/DateRangePicker';
-import Box from '@mui/material/Box';
+import { Unstable_NextDateRangePicker as NextDateRangePicker } from '@mui/x-date-pickers-pro/NextDateRangePicker';
 
-export default function CalendarsDateRangePicker() {
-  const [value, setValue] = React.useState<DateRange<Dayjs>>([null, null]);
+function GridItem({
+  label,
+  children,
+  spacing = 1,
+}: {
+  label: string;
+  children: React.ReactNode;
+  spacing?: number;
+}) {
+  return (
+    <Box sx={{ display: 'flex', flexDirection: 'column' }}>
+      <Typography variant="body2" sx={{ mb: spacing }}>
+        {label}
+      </Typography>
+      {children}
+    </Box>
+  );
+}
 
+export default function CalendarsDateRangePicker() {
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs}>
-      <div>
-        <Typography sx={{ mt: 2, mb: 1 }}>1 calendar </Typography>
-        <DateRangePicker
-          calendars={1}
-          value={value}
-          onChange={(newValue) => {
-            setValue(newValue);
-          }}
-          renderInput={(startProps, endProps) => (
-            <React.Fragment>
-              <TextField {...startProps} />
-              <Box sx={{ mx: 2 }}> to </Box>
-              <TextField {...endProps} />
-            </React.Fragment>
-          )}
-        />
-        <Typography sx={{ mt: 2, mb: 1 }}>2 calendars</Typography>
-        <DateRangePicker
-          calendars={2}
-          value={value}
-          onChange={(newValue) => {
-            setValue(newValue);
-          }}
-          renderInput={(startProps, endProps) => (
-            <React.Fragment>
-              <TextField {...startProps} />
-              <Box sx={{ mx: 2 }}> to </Box>
-              <TextField {...endProps} />
-            </React.Fragment>
-          )}
-        />
-        <Typography sx={{ mt: 2, mb: 1 }}>3 calendars</Typography>
-        <DateRangePicker
-          calendars={3}
-          value={value}
-          onChange={(newValue) => {
-            setValue(newValue);
-          }}
-          renderInput={(startProps, endProps) => (
-            <React.Fragment>
-              <TextField {...startProps} />
-              <Box sx={{ mx: 2 }}> to </Box>
-              <TextField {...endProps} />
-            </React.Fragment>
-          )}
-        />
-      </div>
+      <Stack spacing={4}>
+        <GridItem label="1 calendar" spacing={2}>
+          <NextDateRangePicker calendars={1} />
+        </GridItem>
+        <GridItem label="2 calendars" spacing={2}>
+          <NextDateRangePicker calendars={2} />
+        </GridItem>
+        <GridItem label="3 calendars" spacing={2}>
+          <NextDateRangePicker calendars={3} />
+        </GridItem>
+      </Stack>
     </LocalizationProvider>
   );
 }
diff --git a/docs/data/date-pickers/date-range-picker/CalendarsDateRangePicker.tsx.preview b/docs/data/date-pickers/date-range-picker/CalendarsDateRangePicker.tsx.preview
new file mode 100644
index 0000000000000..34b8a946be9e3
--- /dev/null
+++ b/docs/data/date-pickers/date-range-picker/CalendarsDateRangePicker.tsx.preview
@@ -0,0 +1,13 @@
+<LocalizationProvider dateAdapter={AdapterDayjs}>
+  <Stack spacing={4}>
+    <GridItem label="1 calendar" spacing={2}>
+      <NextDateRangePicker calendars={1} />
+    </GridItem>
+    <GridItem label="2 calendars" spacing={2}>
+      <NextDateRangePicker calendars={2} />
+    </GridItem>
+    <GridItem label="3 calendars" spacing={2}>
+      <NextDateRangePicker calendars={3} />
+    </GridItem>
+  </Stack>
+</LocalizationProvider>
\ No newline at end of file
diff --git a/docs/data/date-pickers/date-range-picker/CustomDateRangePickerDay.js b/docs/data/date-pickers/date-range-picker/CustomDateRangePickerDay.js
index 4a587fd877046..62e2e7c01fa01 100644
--- a/docs/data/date-pickers/date-range-picker/CustomDateRangePickerDay.js
+++ b/docs/data/date-pickers/date-range-picker/CustomDateRangePickerDay.js
@@ -1,10 +1,9 @@
 import * as React from 'react';
+import dayjs from 'dayjs';
 import { styled } from '@mui/material/styles';
-import Box from '@mui/material/Box';
-import TextField from '@mui/material/TextField';
 import { LocalizationProvider } from '@mui/x-date-pickers-pro';
 import { AdapterDayjs } from '@mui/x-date-pickers-pro/AdapterDayjs';
-import { StaticDateRangePicker } from '@mui/x-date-pickers-pro/StaticDateRangePicker';
+import { Unstable_StaticNextDateRangePicker as StaticNextDateRangePicker } from '@mui/x-date-pickers-pro/StaticNextDateRangePicker';
 import { DateRangePickerDay as MuiDateRangePickerDay } from '@mui/x-date-pickers-pro/DateRangePickerDay';
 
 const DateRangePickerDay = styled(MuiDateRangePickerDay)(
@@ -36,23 +35,12 @@ const DateRangePickerDay = styled(MuiDateRangePickerDay)(
 );
 
 export default function CustomDateRangePickerDay() {
-  const [value, setValue] = React.useState([null, null]);
-
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs}>
-      <StaticDateRangePicker
+      <StaticNextDateRangePicker
         displayStaticWrapperAs="desktop"
-        label="date range"
-        value={value}
-        onChange={(newValue) => setValue(newValue)}
+        defaultValue={[dayjs('2022-04-07'), dayjs('2022-04-10')]}
         components={{ Day: DateRangePickerDay }}
-        renderInput={(startProps, endProps) => (
-          <React.Fragment>
-            <TextField {...startProps} />
-            <Box sx={{ mx: 2 }}> to </Box>
-            <TextField {...endProps} />
-          </React.Fragment>
-        )}
       />
     </LocalizationProvider>
   );
diff --git a/docs/data/date-pickers/date-range-picker/CustomDateRangePickerDay.tsx b/docs/data/date-pickers/date-range-picker/CustomDateRangePickerDay.tsx
index f3dfec278bbc0..dc270bce8dd07 100644
--- a/docs/data/date-pickers/date-range-picker/CustomDateRangePickerDay.tsx
+++ b/docs/data/date-pickers/date-range-picker/CustomDateRangePickerDay.tsx
@@ -1,16 +1,13 @@
 import * as React from 'react';
+import dayjs, { Dayjs } from 'dayjs';
 import { styled } from '@mui/material/styles';
-import Box from '@mui/material/Box';
-import TextField from '@mui/material/TextField';
 import { LocalizationProvider } from '@mui/x-date-pickers-pro';
 import { AdapterDayjs } from '@mui/x-date-pickers-pro/AdapterDayjs';
-import { StaticDateRangePicker } from '@mui/x-date-pickers-pro/StaticDateRangePicker';
+import { Unstable_StaticNextDateRangePicker as StaticNextDateRangePicker } from '@mui/x-date-pickers-pro/StaticNextDateRangePicker';
 import {
   DateRangePickerDay as MuiDateRangePickerDay,
   DateRangePickerDayProps,
 } from '@mui/x-date-pickers-pro/DateRangePickerDay';
-import { DateRange } from '@mui/x-date-pickers-pro/DateRangePicker';
-import { Dayjs } from 'dayjs';
 
 const DateRangePickerDay = styled(MuiDateRangePickerDay)(
   ({
@@ -41,23 +38,12 @@ const DateRangePickerDay = styled(MuiDateRangePickerDay)(
 ) as React.ComponentType<DateRangePickerDayProps<Dayjs>>;
 
 export default function CustomDateRangePickerDay() {
-  const [value, setValue] = React.useState<DateRange<Dayjs>>([null, null]);
-
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs}>
-      <StaticDateRangePicker
+      <StaticNextDateRangePicker
         displayStaticWrapperAs="desktop"
-        label="date range"
-        value={value}
-        onChange={(newValue) => setValue(newValue)}
+        defaultValue={[dayjs('2022-04-07'), dayjs('2022-04-10')]}
         components={{ Day: DateRangePickerDay }}
-        renderInput={(startProps, endProps) => (
-          <React.Fragment>
-            <TextField {...startProps} />
-            <Box sx={{ mx: 2 }}> to </Box>
-            <TextField {...endProps} />
-          </React.Fragment>
-        )}
       />
     </LocalizationProvider>
   );
diff --git a/docs/data/date-pickers/date-range-picker/CustomDateRangePickerDay.tsx.preview b/docs/data/date-pickers/date-range-picker/CustomDateRangePickerDay.tsx.preview
index 6354ffb70eef4..827afece1d2d3 100644
--- a/docs/data/date-pickers/date-range-picker/CustomDateRangePickerDay.tsx.preview
+++ b/docs/data/date-pickers/date-range-picker/CustomDateRangePickerDay.tsx.preview
@@ -1,16 +1,7 @@
 <LocalizationProvider dateAdapter={AdapterDayjs}>
-  <StaticDateRangePicker
+  <StaticNextDateRangePicker
     displayStaticWrapperAs="desktop"
-    label="date range"
-    value={value}
-    onChange={(newValue) => setValue(newValue)}
+    defaultValue={[dayjs('2022-04-07'), dayjs('2022-04-10')]}
     components={{ Day: DateRangePickerDay }}
-    renderInput={(startProps, endProps) => (
-      <React.Fragment>
-        <TextField {...startProps} />
-        <Box sx={{ mx: 2 }}> to </Box>
-        <TextField {...endProps} />
-      </React.Fragment>
-    )}
   />
 </LocalizationProvider>
\ No newline at end of file
diff --git a/docs/data/date-pickers/date-range-picker/CustomInputs.js b/docs/data/date-pickers/date-range-picker/CustomInputs.js
new file mode 100644
index 0000000000000..f9492c2d43117
--- /dev/null
+++ b/docs/data/date-pickers/date-range-picker/CustomInputs.js
@@ -0,0 +1,47 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import dayjs from 'dayjs';
+import Box from '@mui/material/Box';
+
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { Unstable_NextDateRangePicker as NextDateRangePicker } from '@mui/x-date-pickers-pro/NextDateRangePicker';
+
+function BrowserInput(props) {
+  const { inputProps, InputProps, ownerState, ...other } = props;
+
+  return (
+    <Box sx={{ display: 'flex', alignItems: 'center' }}>
+      <input {...inputProps} {...other} />
+      {InputProps?.endAdornment}
+    </Box>
+  );
+}
+
+BrowserInput.propTypes = {
+  /**
+   * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element.
+   */
+  inputProps: PropTypes.object,
+  /**
+   * Props applied to the Input element.
+   * It will be a [`FilledInput`](/material-ui/api/filled-input/),
+   * [`OutlinedInput`](/material-ui/api/outlined-input/) or [`Input`](/material-ui/api/input/)
+   * component depending on the `variant` prop value.
+   */
+  InputProps: PropTypes.object,
+  ownerState: PropTypes.any,
+};
+
+export default function CustomInputs() {
+  return (
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <NextDateRangePicker
+        defaultValue={[dayjs('2022-04-07'), dayjs('2022-04-10')]}
+        components={{
+          Input: BrowserInput,
+        }}
+      />
+    </LocalizationProvider>
+  );
+}
diff --git a/docs/data/date-pickers/date-range-picker/CustomInputs.tsx b/docs/data/date-pickers/date-range-picker/CustomInputs.tsx
new file mode 100644
index 0000000000000..e4699780f9356
--- /dev/null
+++ b/docs/data/date-pickers/date-range-picker/CustomInputs.tsx
@@ -0,0 +1,35 @@
+import * as React from 'react';
+import dayjs from 'dayjs';
+import Box from '@mui/material/Box';
+import { TextFieldProps } from '@mui/material/TextField';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { Unstable_NextDateRangePicker as NextDateRangePicker } from '@mui/x-date-pickers-pro/NextDateRangePicker';
+
+type BrowserInputProps = TextFieldProps & {
+  ownerState?: any;
+};
+
+function BrowserInput(props: BrowserInputProps) {
+  const { inputProps, InputProps, ownerState, ...other } = props;
+
+  return (
+    <Box sx={{ display: 'flex', alignItems: 'center' }}>
+      <input {...inputProps} {...(other as any)} />
+      {InputProps?.endAdornment}
+    </Box>
+  );
+}
+
+export default function CustomInputs() {
+  return (
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <NextDateRangePicker
+        defaultValue={[dayjs('2022-04-07'), dayjs('2022-04-10')]}
+        components={{
+          Input: BrowserInput,
+        }}
+      />
+    </LocalizationProvider>
+  );
+}
diff --git a/docs/data/date-pickers/date-range-picker/CustomInputs.tsx.preview b/docs/data/date-pickers/date-range-picker/CustomInputs.tsx.preview
new file mode 100644
index 0000000000000..c89b426f5ef31
--- /dev/null
+++ b/docs/data/date-pickers/date-range-picker/CustomInputs.tsx.preview
@@ -0,0 +1,8 @@
+<LocalizationProvider dateAdapter={AdapterDayjs}>
+  <NextDateRangePicker
+    defaultValue={[dayjs('2022-04-07'), dayjs('2022-04-10')]}
+    components={{
+      Input: BrowserInput,
+    }}
+  />
+</LocalizationProvider>
\ No newline at end of file
diff --git a/docs/data/date-pickers/date-range-picker/DateRangePickerValue.js b/docs/data/date-pickers/date-range-picker/DateRangePickerValue.js
new file mode 100644
index 0000000000000..4e4e877f1012d
--- /dev/null
+++ b/docs/data/date-pickers/date-range-picker/DateRangePickerValue.js
@@ -0,0 +1,52 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import dayjs from 'dayjs';
+import Typography from '@mui/material/Typography';
+import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+
+import { Unstable_NextDateRangePicker as NextDateRangePicker } from '@mui/x-date-pickers-pro/NextDateRangePicker';
+
+function GridItem({ label, children, spacing = 1 }) {
+  return (
+    <Box sx={{ display: 'flex', flexDirection: 'column' }}>
+      <Typography variant="body2" sx={{ mb: spacing }}>
+        {label}
+      </Typography>
+      {children}
+    </Box>
+  );
+}
+
+GridItem.propTypes = {
+  children: PropTypes.node,
+  label: PropTypes.string.isRequired,
+  spacing: PropTypes.number,
+};
+
+export default function DateRangePickerValue() {
+  const [value, setValue] = React.useState([
+    dayjs('2022-04-07'),
+    dayjs('2022-04-10'),
+  ]);
+
+  return (
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <Stack spacing={4}>
+        <GridItem label="Uncontrolled picker" spacing={2}>
+          <NextDateRangePicker
+            defaultValue={[dayjs('2022-04-07'), dayjs('2022-04-10')]}
+          />
+        </GridItem>
+        <GridItem label="Controlled picker" spacing={2}>
+          <NextDateRangePicker
+            value={value}
+            onChange={(newValue) => setValue(newValue)}
+          />
+        </GridItem>
+      </Stack>
+    </LocalizationProvider>
+  );
+}
diff --git a/docs/data/date-pickers/date-range-picker/DateRangePickerValue.tsx b/docs/data/date-pickers/date-range-picker/DateRangePickerValue.tsx
new file mode 100644
index 0000000000000..0b507eeb887b2
--- /dev/null
+++ b/docs/data/date-pickers/date-range-picker/DateRangePickerValue.tsx
@@ -0,0 +1,53 @@
+import * as React from 'react';
+import dayjs, { Dayjs } from 'dayjs';
+import Typography from '@mui/material/Typography';
+import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { DateRange } from '@mui/x-date-pickers-pro/DateRangePicker';
+import { Unstable_NextDateRangePicker as NextDateRangePicker } from '@mui/x-date-pickers-pro/NextDateRangePicker';
+
+function GridItem({
+  label,
+  children,
+  spacing = 1,
+}: {
+  label: string;
+  children: React.ReactNode;
+  spacing?: number;
+}) {
+  return (
+    <Box sx={{ display: 'flex', flexDirection: 'column' }}>
+      <Typography variant="body2" sx={{ mb: spacing }}>
+        {label}
+      </Typography>
+      {children}
+    </Box>
+  );
+}
+
+export default function DateRangePickerValue() {
+  const [value, setValue] = React.useState<DateRange<Dayjs>>([
+    dayjs('2022-04-07'),
+    dayjs('2022-04-10'),
+  ]);
+
+  return (
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <Stack spacing={4}>
+        <GridItem label="Uncontrolled picker" spacing={2}>
+          <NextDateRangePicker
+            defaultValue={[dayjs('2022-04-07'), dayjs('2022-04-10')]}
+          />
+        </GridItem>
+        <GridItem label="Controlled picker" spacing={2}>
+          <NextDateRangePicker
+            value={value}
+            onChange={(newValue) => setValue(newValue)}
+          />
+        </GridItem>
+      </Stack>
+    </LocalizationProvider>
+  );
+}
diff --git a/docs/data/date-pickers/date-range-picker/DateRangePickerValue.tsx.preview b/docs/data/date-pickers/date-range-picker/DateRangePickerValue.tsx.preview
new file mode 100644
index 0000000000000..8bf63612159c0
--- /dev/null
+++ b/docs/data/date-pickers/date-range-picker/DateRangePickerValue.tsx.preview
@@ -0,0 +1,15 @@
+<LocalizationProvider dateAdapter={AdapterDayjs}>
+  <Stack spacing={4}>
+    <GridItem label="Uncontrolled picker" spacing={2}>
+      <NextDateRangePicker
+        defaultValue={[dayjs('2022-04-07'), dayjs('2022-04-10')]}
+      />
+    </GridItem>
+    <GridItem label="Controlled picker" spacing={2}>
+      <NextDateRangePicker
+        value={value}
+        onChange={(newValue) => setValue(newValue)}
+      />
+    </GridItem>
+  </Stack>
+</LocalizationProvider>
\ No newline at end of file
diff --git a/docs/data/date-pickers/date-range-picker/FormPropsDateRangePickers.js b/docs/data/date-pickers/date-range-picker/FormPropsDateRangePickers.js
index 7d8b543ae4292..6db3499ffae80 100644
--- a/docs/data/date-pickers/date-range-picker/FormPropsDateRangePickers.js
+++ b/docs/data/date-pickers/date-range-picker/FormPropsDateRangePickers.js
@@ -1,49 +1,40 @@
 import * as React from 'react';
-
-import TextField from '@mui/material/TextField';
-import { LocalizationProvider } from '@mui/x-date-pickers-pro';
-import { AdapterDayjs } from '@mui/x-date-pickers-pro/AdapterDayjs';
-import { DateRangePicker } from '@mui/x-date-pickers-pro/DateRangePicker';
+import PropTypes from 'prop-types';
+import Typography from '@mui/material/Typography';
 import Box from '@mui/material/Box';
 import Stack from '@mui/material/Stack';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { Unstable_NextDateRangePicker as NextDateRangePicker } from '@mui/x-date-pickers-pro/NextDateRangePicker';
 
-export default function FormPropsDateRangePickers() {
-  const [value, setValue] = React.useState([null, null]);
+function GridItem({ label, children, spacing = 1 }) {
+  return (
+    <Box sx={{ display: 'flex', flexDirection: 'column' }}>
+      <Typography variant="body2" sx={{ mb: spacing }}>
+        {label}
+      </Typography>
+      {children}
+    </Box>
+  );
+}
+
+GridItem.propTypes = {
+  children: PropTypes.node,
+  label: PropTypes.string.isRequired,
+  spacing: PropTypes.number,
+};
 
+export default function FormPropsDateRangePickers() {
   return (
-    <Stack spacing={3}>
-      <LocalizationProvider dateAdapter={AdapterDayjs}>
-        <DateRangePicker
-          localeText={{ start: 'Disabled start', end: 'Disabled end' }}
-          disabled
-          value={value}
-          onChange={(newValue) => {
-            setValue(newValue);
-          }}
-          renderInput={(startProps, endProps) => (
-            <React.Fragment>
-              <TextField {...startProps} />
-              <Box sx={{ mx: 2 }}> to </Box>
-              <TextField {...endProps} />
-            </React.Fragment>
-          )}
-        />
-        <DateRangePicker
-          localeText={{ start: 'Read-only start', end: 'Read-only end' }}
-          readOnly
-          value={value}
-          onChange={(newValue) => {
-            setValue(newValue);
-          }}
-          renderInput={(startProps, endProps) => (
-            <React.Fragment>
-              <TextField {...startProps} />
-              <Box sx={{ mx: 2 }}> to </Box>
-              <TextField {...endProps} />
-            </React.Fragment>
-          )}
-        />
-      </LocalizationProvider>
-    </Stack>
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <Stack spacing={4}>
+        <GridItem label="disabled" spacing={2}>
+          <NextDateRangePicker disabled />
+        </GridItem>
+        <GridItem label="readOnly" spacing={2}>
+          <NextDateRangePicker readOnly />
+        </GridItem>
+      </Stack>
+    </LocalizationProvider>
   );
 }
diff --git a/docs/data/date-pickers/date-range-picker/FormPropsDateRangePickers.tsx b/docs/data/date-pickers/date-range-picker/FormPropsDateRangePickers.tsx
index 06a2838381d35..b26c410865f20 100644
--- a/docs/data/date-pickers/date-range-picker/FormPropsDateRangePickers.tsx
+++ b/docs/data/date-pickers/date-range-picker/FormPropsDateRangePickers.tsx
@@ -1,49 +1,41 @@
 import * as React from 'react';
-import { Dayjs } from 'dayjs';
-import TextField from '@mui/material/TextField';
-import { LocalizationProvider } from '@mui/x-date-pickers-pro';
-import { AdapterDayjs } from '@mui/x-date-pickers-pro/AdapterDayjs';
-import { DateRangePicker, DateRange } from '@mui/x-date-pickers-pro/DateRangePicker';
+import Typography from '@mui/material/Typography';
 import Box from '@mui/material/Box';
 import Stack from '@mui/material/Stack';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { Unstable_NextDateRangePicker as NextDateRangePicker } from '@mui/x-date-pickers-pro/NextDateRangePicker';
 
-export default function FormPropsDateRangePickers() {
-  const [value, setValue] = React.useState<DateRange<Dayjs>>([null, null]);
+function GridItem({
+  label,
+  children,
+  spacing = 1,
+}: {
+  label: string;
+  children: React.ReactNode;
+  spacing?: number;
+}) {
+  return (
+    <Box sx={{ display: 'flex', flexDirection: 'column' }}>
+      <Typography variant="body2" sx={{ mb: spacing }}>
+        {label}
+      </Typography>
+      {children}
+    </Box>
+  );
+}
 
+export default function FormPropsDateRangePickers() {
   return (
-    <Stack spacing={3}>
-      <LocalizationProvider dateAdapter={AdapterDayjs}>
-        <DateRangePicker
-          localeText={{ start: 'Disabled start', end: 'Disabled end' }}
-          disabled
-          value={value}
-          onChange={(newValue) => {
-            setValue(newValue);
-          }}
-          renderInput={(startProps, endProps) => (
-            <React.Fragment>
-              <TextField {...startProps} />
-              <Box sx={{ mx: 2 }}> to </Box>
-              <TextField {...endProps} />
-            </React.Fragment>
-          )}
-        />
-        <DateRangePicker
-          localeText={{ start: 'Read-only start', end: 'Read-only end' }}
-          readOnly
-          value={value}
-          onChange={(newValue) => {
-            setValue(newValue);
-          }}
-          renderInput={(startProps, endProps) => (
-            <React.Fragment>
-              <TextField {...startProps} />
-              <Box sx={{ mx: 2 }}> to </Box>
-              <TextField {...endProps} />
-            </React.Fragment>
-          )}
-        />
-      </LocalizationProvider>
-    </Stack>
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <Stack spacing={4}>
+        <GridItem label="disabled" spacing={2}>
+          <NextDateRangePicker disabled />
+        </GridItem>
+        <GridItem label="readOnly" spacing={2}>
+          <NextDateRangePicker readOnly />
+        </GridItem>
+      </Stack>
+    </LocalizationProvider>
   );
 }
diff --git a/docs/data/date-pickers/date-range-picker/FormPropsDateRangePickers.tsx.preview b/docs/data/date-pickers/date-range-picker/FormPropsDateRangePickers.tsx.preview
new file mode 100644
index 0000000000000..550634e831b65
--- /dev/null
+++ b/docs/data/date-pickers/date-range-picker/FormPropsDateRangePickers.tsx.preview
@@ -0,0 +1,10 @@
+<LocalizationProvider dateAdapter={AdapterDayjs}>
+  <Stack spacing={4}>
+    <GridItem label="disabled" spacing={2}>
+      <NextDateRangePicker disabled />
+    </GridItem>
+    <GridItem label="readOnly" spacing={2}>
+      <NextDateRangePicker readOnly />
+    </GridItem>
+  </Stack>
+</LocalizationProvider>
\ No newline at end of file
diff --git a/docs/data/date-pickers/date-range-picker/ResponsiveDateRangePicker.js b/docs/data/date-pickers/date-range-picker/ResponsiveDateRangePicker.js
index 250ddd397e2fe..3b332d5b27173 100644
--- a/docs/data/date-pickers/date-range-picker/ResponsiveDateRangePicker.js
+++ b/docs/data/date-pickers/date-range-picker/ResponsiveDateRangePicker.js
@@ -1,48 +1,52 @@
 import * as React from 'react';
-
-import TextField from '@mui/material/TextField';
+import PropTypes from 'prop-types';
+import dayjs from 'dayjs';
+import Typography from '@mui/material/Typography';
 import Box from '@mui/material/Box';
 import Stack from '@mui/material/Stack';
-import { LocalizationProvider } from '@mui/x-date-pickers-pro';
-import { AdapterDayjs } from '@mui/x-date-pickers-pro/AdapterDayjs';
-import { MobileDateRangePicker } from '@mui/x-date-pickers-pro/MobileDateRangePicker';
-import { DesktopDateRangePicker } from '@mui/x-date-pickers-pro/DesktopDateRangePicker';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { Unstable_NextDateRangePicker as NextDateRangePicker } from '@mui/x-date-pickers-pro/NextDateRangePicker';
+import { Unstable_MobileNextDateRangePicker as MobileNextDateRangePicker } from '@mui/x-date-pickers-pro/MobileNextDateRangePicker';
+import { Unstable_DesktopNextDateRangePicker as DesktopNextDateRangePicker } from '@mui/x-date-pickers-pro/DesktopNextDateRangePicker';
 
-export default function ResponsiveDateRangePicker() {
-  const [value, setValue] = React.useState([null, null]);
+function GridItem({ label, children, spacing = 1 }) {
+  return (
+    <Box sx={{ display: 'flex', flexDirection: 'column' }}>
+      <Typography variant="body2" sx={{ mb: spacing }}>
+        {label}
+      </Typography>
+      {children}
+    </Box>
+  );
+}
+
+GridItem.propTypes = {
+  children: PropTypes.node,
+  label: PropTypes.string.isRequired,
+  spacing: PropTypes.number,
+};
 
+export default function ResponsiveDateRangePicker() {
   return (
-    <Stack spacing={3}>
-      <LocalizationProvider dateAdapter={AdapterDayjs}>
-        <MobileDateRangePicker
-          localeText={{ start: 'Mobile start', end: 'Mobile end' }}
-          value={value}
-          onChange={(newValue) => {
-            setValue(newValue);
-          }}
-          renderInput={(startProps, endProps) => (
-            <React.Fragment>
-              <TextField {...startProps} />
-              <Box sx={{ mx: 2 }}> to </Box>
-              <TextField {...endProps} />
-            </React.Fragment>
-          )}
-        />
-        <DesktopDateRangePicker
-          localeText={{ start: 'Desktop start', end: 'Desktop end' }}
-          value={value}
-          onChange={(newValue) => {
-            setValue(newValue);
-          }}
-          renderInput={(startProps, endProps) => (
-            <React.Fragment>
-              <TextField {...startProps} />
-              <Box sx={{ mx: 2 }}> to </Box>
-              <TextField {...endProps} />
-            </React.Fragment>
-          )}
-        />
-      </LocalizationProvider>
-    </Stack>
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <Stack spacing={4}>
+        <GridItem label="For mobile" spacing={2}>
+          <MobileNextDateRangePicker
+            defaultValue={[dayjs('2022-04-07'), dayjs('2022-04-10')]}
+          />
+        </GridItem>
+        <GridItem label="For desktop" spacing={2}>
+          <DesktopNextDateRangePicker
+            defaultValue={[dayjs('2022-04-07'), dayjs('2022-04-10')]}
+          />
+        </GridItem>
+        <GridItem label="Responsive" spacing={2}>
+          <NextDateRangePicker
+            defaultValue={[dayjs('2022-04-07'), dayjs('2022-04-10')]}
+          />
+        </GridItem>
+      </Stack>
+    </LocalizationProvider>
   );
 }
diff --git a/docs/data/date-pickers/date-range-picker/ResponsiveDateRangePicker.tsx b/docs/data/date-pickers/date-range-picker/ResponsiveDateRangePicker.tsx
index 3b4407746b8d5..e35fa81b98044 100644
--- a/docs/data/date-pickers/date-range-picker/ResponsiveDateRangePicker.tsx
+++ b/docs/data/date-pickers/date-range-picker/ResponsiveDateRangePicker.tsx
@@ -1,49 +1,53 @@
 import * as React from 'react';
-import { Dayjs } from 'dayjs';
-import TextField from '@mui/material/TextField';
+import dayjs from 'dayjs';
+import Typography from '@mui/material/Typography';
 import Box from '@mui/material/Box';
 import Stack from '@mui/material/Stack';
-import { LocalizationProvider } from '@mui/x-date-pickers-pro';
-import { AdapterDayjs } from '@mui/x-date-pickers-pro/AdapterDayjs';
-import { MobileDateRangePicker } from '@mui/x-date-pickers-pro/MobileDateRangePicker';
-import { DesktopDateRangePicker } from '@mui/x-date-pickers-pro/DesktopDateRangePicker';
-import { DateRange } from '@mui/x-date-pickers-pro/DateRangePicker';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { Unstable_NextDateRangePicker as NextDateRangePicker } from '@mui/x-date-pickers-pro/NextDateRangePicker';
+import { Unstable_MobileNextDateRangePicker as MobileNextDateRangePicker } from '@mui/x-date-pickers-pro/MobileNextDateRangePicker';
+import { Unstable_DesktopNextDateRangePicker as DesktopNextDateRangePicker } from '@mui/x-date-pickers-pro/DesktopNextDateRangePicker';
 
-export default function ResponsiveDateRangePicker() {
-  const [value, setValue] = React.useState<DateRange<Dayjs>>([null, null]);
+function GridItem({
+  label,
+  children,
+  spacing = 1,
+}: {
+  label: string;
+  children: React.ReactNode;
+  spacing?: number;
+}) {
+  return (
+    <Box sx={{ display: 'flex', flexDirection: 'column' }}>
+      <Typography variant="body2" sx={{ mb: spacing }}>
+        {label}
+      </Typography>
+      {children}
+    </Box>
+  );
+}
 
+export default function ResponsiveDateRangePicker() {
   return (
-    <Stack spacing={3}>
-      <LocalizationProvider dateAdapter={AdapterDayjs}>
-        <MobileDateRangePicker
-          localeText={{ start: 'Mobile start', end: 'Mobile end' }}
-          value={value}
-          onChange={(newValue) => {
-            setValue(newValue);
-          }}
-          renderInput={(startProps, endProps) => (
-            <React.Fragment>
-              <TextField {...startProps} />
-              <Box sx={{ mx: 2 }}> to </Box>
-              <TextField {...endProps} />
-            </React.Fragment>
-          )}
-        />
-        <DesktopDateRangePicker
-          localeText={{ start: 'Desktop start', end: 'Desktop end' }}
-          value={value}
-          onChange={(newValue) => {
-            setValue(newValue);
-          }}
-          renderInput={(startProps, endProps) => (
-            <React.Fragment>
-              <TextField {...startProps} />
-              <Box sx={{ mx: 2 }}> to </Box>
-              <TextField {...endProps} />
-            </React.Fragment>
-          )}
-        />
-      </LocalizationProvider>
-    </Stack>
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <Stack spacing={4}>
+        <GridItem label="For mobile" spacing={2}>
+          <MobileNextDateRangePicker
+            defaultValue={[dayjs('2022-04-07'), dayjs('2022-04-10')]}
+          />
+        </GridItem>
+        <GridItem label="For desktop" spacing={2}>
+          <DesktopNextDateRangePicker
+            defaultValue={[dayjs('2022-04-07'), dayjs('2022-04-10')]}
+          />
+        </GridItem>
+        <GridItem label="Responsive" spacing={2}>
+          <NextDateRangePicker
+            defaultValue={[dayjs('2022-04-07'), dayjs('2022-04-10')]}
+          />
+        </GridItem>
+      </Stack>
+    </LocalizationProvider>
   );
 }
diff --git a/docs/data/date-pickers/date-range-picker/StaticDateRangePickerDemo.js b/docs/data/date-pickers/date-range-picker/StaticDateRangePickerDemo.js
index 5e4e613d27aae..66b1dfdf5c84a 100644
--- a/docs/data/date-pickers/date-range-picker/StaticDateRangePickerDemo.js
+++ b/docs/data/date-pickers/date-range-picker/StaticDateRangePickerDemo.js
@@ -1,30 +1,15 @@
 import * as React from 'react';
-
-import TextField from '@mui/material/TextField';
+import dayjs from 'dayjs';
 import { LocalizationProvider } from '@mui/x-date-pickers-pro';
 import { AdapterDayjs } from '@mui/x-date-pickers-pro/AdapterDayjs';
-import { StaticDateRangePicker } from '@mui/x-date-pickers-pro/StaticDateRangePicker';
-
-import Box from '@mui/material/Box';
+import { Unstable_StaticNextDateRangePicker as StaticNextDateRangePicker } from '@mui/x-date-pickers-pro/StaticNextDateRangePicker';
 
 export default function StaticDateRangePickerDemo() {
-  const [value, setValue] = React.useState([null, null]);
-
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs}>
-      <StaticDateRangePicker
+      <StaticNextDateRangePicker
         displayStaticWrapperAs="desktop"
-        value={value}
-        onChange={(newValue) => {
-          setValue(newValue);
-        }}
-        renderInput={(startProps, endProps) => (
-          <React.Fragment>
-            <TextField {...startProps} />
-            <Box sx={{ mx: 2 }}> to </Box>
-            <TextField {...endProps} />
-          </React.Fragment>
-        )}
+        defaultValue={[dayjs('2022-04-07'), dayjs('2022-04-10')]}
       />
     </LocalizationProvider>
   );
diff --git a/docs/data/date-pickers/date-range-picker/StaticDateRangePickerDemo.tsx b/docs/data/date-pickers/date-range-picker/StaticDateRangePickerDemo.tsx
index 8ef319dbb5160..66b1dfdf5c84a 100644
--- a/docs/data/date-pickers/date-range-picker/StaticDateRangePickerDemo.tsx
+++ b/docs/data/date-pickers/date-range-picker/StaticDateRangePickerDemo.tsx
@@ -1,30 +1,15 @@
 import * as React from 'react';
-import { Dayjs } from 'dayjs';
-import TextField from '@mui/material/TextField';
+import dayjs from 'dayjs';
 import { LocalizationProvider } from '@mui/x-date-pickers-pro';
 import { AdapterDayjs } from '@mui/x-date-pickers-pro/AdapterDayjs';
-import { StaticDateRangePicker } from '@mui/x-date-pickers-pro/StaticDateRangePicker';
-import { DateRange } from '@mui/x-date-pickers-pro/DateRangePicker';
-import Box from '@mui/material/Box';
+import { Unstable_StaticNextDateRangePicker as StaticNextDateRangePicker } from '@mui/x-date-pickers-pro/StaticNextDateRangePicker';
 
 export default function StaticDateRangePickerDemo() {
-  const [value, setValue] = React.useState<DateRange<Dayjs>>([null, null]);
-
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs}>
-      <StaticDateRangePicker
+      <StaticNextDateRangePicker
         displayStaticWrapperAs="desktop"
-        value={value}
-        onChange={(newValue) => {
-          setValue(newValue);
-        }}
-        renderInput={(startProps, endProps) => (
-          <React.Fragment>
-            <TextField {...startProps} />
-            <Box sx={{ mx: 2 }}> to </Box>
-            <TextField {...endProps} />
-          </React.Fragment>
-        )}
+        defaultValue={[dayjs('2022-04-07'), dayjs('2022-04-10')]}
       />
     </LocalizationProvider>
   );
diff --git a/docs/data/date-pickers/date-range-picker/StaticDateRangePickerDemo.tsx.preview b/docs/data/date-pickers/date-range-picker/StaticDateRangePickerDemo.tsx.preview
index cad551c81caa5..67341c303e345 100644
--- a/docs/data/date-pickers/date-range-picker/StaticDateRangePickerDemo.tsx.preview
+++ b/docs/data/date-pickers/date-range-picker/StaticDateRangePickerDemo.tsx.preview
@@ -1,16 +1,6 @@
 <LocalizationProvider dateAdapter={AdapterDayjs}>
-  <StaticDateRangePicker
+  <StaticNextDateRangePicker
     displayStaticWrapperAs="desktop"
-    value={value}
-    onChange={(newValue) => {
-      setValue(newValue);
-    }}
-    renderInput={(startProps, endProps) => (
-      <React.Fragment>
-        <TextField {...startProps} />
-        <Box sx={{ mx: 2 }}> to </Box>
-        <TextField {...endProps} />
-      </React.Fragment>
-    )}
+    defaultValue={[dayjs('2022-04-07'), dayjs('2022-04-10')]}
   />
 </LocalizationProvider>
\ No newline at end of file
diff --git a/docs/data/date-pickers/date-range-picker/date-range-picker.md b/docs/data/date-pickers/date-range-picker/date-range-picker.md
index 7ad3799f06a5b..3044e80c6a8c0 100644
--- a/docs/data/date-pickers/date-range-picker/date-range-picker.md
+++ b/docs/data/date-pickers/date-range-picker/date-range-picker.md
@@ -11,32 +11,49 @@ materialDesign: https://m2.material.io/components/date-pickers
 
 <p class="description">The date range picker let the user select a range of dates.</p>
 
-## Basic usage
+:::warning
+The new date range pickers are unstable.
+They might receive breaking changes on their props to have the best component possible by the time of the stable release.
+
+They will be renamed at the end of the v6 beta phase to have the same name as the current legacy pickers
+(`NextDateRangePicker` will become `DateRangePicker`, ...)
+:::
 
-Note that you can pass almost any prop from [DatePicker](/x/react-date-pickers/date-picker/).
+:::info
+You can pass almost any prop from [NextDatePicker](/x/react-date-pickers/date-picker/) to the Date Range Picker.
+:::
+
+## Basic usage
 
 {{"demo": "BasicDateRangePicker.js"}}
 
-## Static mode
+## Uncontrolled vs. Controlled
 
-It's possible to render any picker inline. This will enable building custom popover/modal containers.
+The component can be uncontrolled or controlled
 
-{{"demo": "StaticDateRangePickerDemo.js", "bg": true}}
+{{"demo": "DateRangePickerValue.js"}}
 
 ## Responsiveness
 
 The date range picker component is designed to be optimized for the device it runs on.
 
-- The `MobileDateRangePicker` component works best for touch devices and small screens.
-- The `DesktopDateRangePicker` component works best for mouse devices and large screens.
+- The `MobileNextDateRangePicker` component works best for touch devices and small screens.
+- The `DesktopNextDateRangePicker` component works best for mouse devices and large screens.
 
-By default, the `DateRangePicker` component renders the desktop version if the media query [`@media (pointer: fine)`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pointer) matches.
+By default, the `NextDateRangePicker` component renders the desktop version if the media query [`@media (pointer: fine)`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pointer) matches.
 This can be customized with the `desktopModeMediaQuery` prop.
 
 There are certain caveats when testing pickers, please refer to [this section](/x/react-date-pickers/getting-started/#testing-caveats) for more information.
 
 {{"demo": "ResponsiveDateRangePicker.js"}}
 
+## Static mode
+
+It is also possible to render any date range picker without the modal/popover and text field.
+This will enable building custom popover/modal containers.
+
+{{"demo": "StaticDateRangePickerDemo.js", "bg": true}}
+
 ## Form props
 
 The date range picker component can be disabled or read-only.
@@ -55,10 +72,10 @@ Note that the `calendars` prop only works in desktop mode.
 
 ## Custom input component
 
-You can customize the rendered input with the `renderInput` prop. For `DateRangePicker` it takes **2** parameters – for start and end input respectively.
-If you need to render custom inputs make sure to spread `ref` and `inputProps` correctly to the input components.
+You can customize the rendering of the input with the `Input` component slot.
+Make sure to spread `inputProps` correctly to the custom input component.
 
-{{"demo": "CustomDateRangeInputs.js"}}
+{{"demo": "CustomInputs.js"}}
 
 ## Customized day rendering
 
diff --git a/docs/data/date-pickers/date-time-picker/BasicDateTimePicker.js b/docs/data/date-pickers/date-time-picker/BasicDateTimePicker.js
index 860a91e21005e..8a4ed283fc387 100644
--- a/docs/data/date-pickers/date-time-picker/BasicDateTimePicker.js
+++ b/docs/data/date-pickers/date-time-picker/BasicDateTimePicker.js
@@ -1,23 +1,12 @@
 import * as React from 'react';
-import dayjs from 'dayjs';
-import TextField from '@mui/material/TextField';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
-import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
+import { Unstable_NextDateTimePicker as NextDateTimePicker } from '@mui/x-date-pickers/NextDateTimePicker';
 
 export default function BasicDateTimePicker() {
-  const [value, setValue] = React.useState(dayjs('2022-04-07'));
-
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs}>
-      <DateTimePicker
-        renderInput={(props) => <TextField {...props} />}
-        label="DateTimePicker"
-        value={value}
-        onChange={(newValue) => {
-          setValue(newValue);
-        }}
-      />
+      <NextDateTimePicker label="Basic date time picker" />
     </LocalizationProvider>
   );
 }
diff --git a/docs/data/date-pickers/date-time-picker/BasicDateTimePicker.tsx b/docs/data/date-pickers/date-time-picker/BasicDateTimePicker.tsx
index 576c7684bfa84..8a4ed283fc387 100644
--- a/docs/data/date-pickers/date-time-picker/BasicDateTimePicker.tsx
+++ b/docs/data/date-pickers/date-time-picker/BasicDateTimePicker.tsx
@@ -1,23 +1,12 @@
 import * as React from 'react';
-import dayjs, { Dayjs } from 'dayjs';
-import TextField from '@mui/material/TextField';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
-import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
+import { Unstable_NextDateTimePicker as NextDateTimePicker } from '@mui/x-date-pickers/NextDateTimePicker';
 
 export default function BasicDateTimePicker() {
-  const [value, setValue] = React.useState<Dayjs | null>(dayjs('2022-04-07'));
-
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs}>
-      <DateTimePicker
-        renderInput={(props) => <TextField {...props} />}
-        label="DateTimePicker"
-        value={value}
-        onChange={(newValue) => {
-          setValue(newValue);
-        }}
-      />
+      <NextDateTimePicker label="Basic date time picker" />
     </LocalizationProvider>
   );
 }
diff --git a/docs/data/date-pickers/date-time-picker/BasicDateTimePicker.tsx.preview b/docs/data/date-pickers/date-time-picker/BasicDateTimePicker.tsx.preview
index 6f2211a515f6f..c484b1cfdca61 100644
--- a/docs/data/date-pickers/date-time-picker/BasicDateTimePicker.tsx.preview
+++ b/docs/data/date-pickers/date-time-picker/BasicDateTimePicker.tsx.preview
@@ -1,10 +1,3 @@
 <LocalizationProvider dateAdapter={AdapterDayjs}>
-  <DateTimePicker
-    renderInput={(props) => <TextField {...props} />}
-    label="DateTimePicker"
-    value={value}
-    onChange={(newValue) => {
-      setValue(newValue);
-    }}
-  />
+  <NextDateTimePicker label="Basic date time picker" />
 </LocalizationProvider>
\ No newline at end of file
diff --git a/docs/data/date-pickers/date-time-picker/CustomDateTimePicker.js b/docs/data/date-pickers/date-time-picker/CustomDateTimePicker.js
index 53140679a3a08..550d73a3c7d63 100644
--- a/docs/data/date-pickers/date-time-picker/CustomDateTimePicker.js
+++ b/docs/data/date-pickers/date-time-picker/CustomDateTimePicker.js
@@ -2,56 +2,31 @@ import * as React from 'react';
 import dayjs from 'dayjs';
 import AlarmIcon from '@mui/icons-material/Alarm';
 import SnoozeIcon from '@mui/icons-material/Snooze';
-import TextField from '@mui/material/TextField';
 import ClockIcon from '@mui/icons-material/AccessTime';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
-import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
-import { MobileDateTimePicker } from '@mui/x-date-pickers/MobileDateTimePicker';
+import { Unstable_NextDateTimePicker as NextDateTimePicker } from '@mui/x-date-pickers/NextDateTimePicker';
 import Stack from '@mui/material/Stack';
 
 export default function CustomDateTimePicker() {
-  const [dateWithNoInitialValue, setDateWithNoInitialValue] = React.useState(null);
-  const [dateWithInitialValue, setDateWithInitialValue] = React.useState(
-    dayjs('2019-01-01T18:54'),
-  );
-
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs}>
       <Stack spacing={3}>
-        <DateTimePicker
+        <NextDateTimePicker
           openTo="hours"
-          value={dateWithInitialValue}
-          onChange={(newValue) => {
-            setDateWithInitialValue(newValue);
-          }}
+          defaultValue={dayjs('2022-04-07T15:30')}
           components={{
             LeftArrowIcon: AlarmIcon,
             RightArrowIcon: SnoozeIcon,
             OpenPickerIcon: ClockIcon,
           }}
-          renderInput={(params) => (
-            <TextField {...params} helperText="Hardcoded helper text" />
-          )}
-        />
-        <MobileDateTimePicker
-          value={dateWithInitialValue}
-          onChange={(newValue) => {
-            setDateWithInitialValue(newValue);
+          componentsProps={{
+            input: {
+              helperText: 'Hardcoded helper text',
+            },
           }}
-          label="With error handler"
-          onError={console.log}
-          inputFormat="YYYY/MM/DD hh:mm a"
-          mask="____/__/__ __:__ _M"
-          renderInput={(params) => <TextField {...params} />}
-        />
-        <DateTimePicker
-          value={dateWithNoInitialValue}
-          onChange={(newValue) => setDateWithNoInitialValue(newValue)}
-          renderInput={(params) => (
-            <TextField {...params} helperText="Clear Initial State" />
-          )}
         />
+        <NextDateTimePicker label="With error handler" onError={console.log} />
       </Stack>
     </LocalizationProvider>
   );
diff --git a/docs/data/date-pickers/date-time-picker/CustomDateTimePicker.tsx b/docs/data/date-pickers/date-time-picker/CustomDateTimePicker.tsx
index c0a96cc3dce6e..550d73a3c7d63 100644
--- a/docs/data/date-pickers/date-time-picker/CustomDateTimePicker.tsx
+++ b/docs/data/date-pickers/date-time-picker/CustomDateTimePicker.tsx
@@ -1,57 +1,32 @@
 import * as React from 'react';
-import dayjs, { Dayjs } from 'dayjs';
+import dayjs from 'dayjs';
 import AlarmIcon from '@mui/icons-material/Alarm';
 import SnoozeIcon from '@mui/icons-material/Snooze';
-import TextField from '@mui/material/TextField';
 import ClockIcon from '@mui/icons-material/AccessTime';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
-import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
-import { MobileDateTimePicker } from '@mui/x-date-pickers/MobileDateTimePicker';
+import { Unstable_NextDateTimePicker as NextDateTimePicker } from '@mui/x-date-pickers/NextDateTimePicker';
 import Stack from '@mui/material/Stack';
 
 export default function CustomDateTimePicker() {
-  const [dateWithNoInitialValue, setDateWithNoInitialValue] =
-    React.useState<Dayjs | null>(null);
-  const [dateWithInitialValue, setDateWithInitialValue] =
-    React.useState<Dayjs | null>(dayjs('2019-01-01T18:54'));
-
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs}>
       <Stack spacing={3}>
-        <DateTimePicker
+        <NextDateTimePicker
           openTo="hours"
-          value={dateWithInitialValue}
-          onChange={(newValue) => {
-            setDateWithInitialValue(newValue);
-          }}
+          defaultValue={dayjs('2022-04-07T15:30')}
           components={{
             LeftArrowIcon: AlarmIcon,
             RightArrowIcon: SnoozeIcon,
             OpenPickerIcon: ClockIcon,
           }}
-          renderInput={(params) => (
-            <TextField {...params} helperText="Hardcoded helper text" />
-          )}
-        />
-        <MobileDateTimePicker
-          value={dateWithInitialValue}
-          onChange={(newValue) => {
-            setDateWithInitialValue(newValue);
+          componentsProps={{
+            input: {
+              helperText: 'Hardcoded helper text',
+            },
           }}
-          label="With error handler"
-          onError={console.log}
-          inputFormat="YYYY/MM/DD hh:mm a"
-          mask="____/__/__ __:__ _M"
-          renderInput={(params) => <TextField {...params} />}
-        />
-        <DateTimePicker
-          value={dateWithNoInitialValue}
-          onChange={(newValue) => setDateWithNoInitialValue(newValue)}
-          renderInput={(params) => (
-            <TextField {...params} helperText="Clear Initial State" />
-          )}
         />
+        <NextDateTimePicker label="With error handler" onError={console.log} />
       </Stack>
     </LocalizationProvider>
   );
diff --git a/docs/data/date-pickers/date-time-picker/DateTimePickerValue.js b/docs/data/date-pickers/date-time-picker/DateTimePickerValue.js
new file mode 100644
index 0000000000000..c890de10b9dfb
--- /dev/null
+++ b/docs/data/date-pickers/date-time-picker/DateTimePickerValue.js
@@ -0,0 +1,26 @@
+import * as React from 'react';
+import dayjs from 'dayjs';
+import Stack from '@mui/material/Stack';
+import { LocalizationProvider } from '@mui/x-date-pickers';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { Unstable_NextDateTimePicker as NextDateTimePicker } from '@mui/x-date-pickers/NextDateTimePicker';
+
+export default function DateTimePickerValue() {
+  const [value, setValue] = React.useState(dayjs('2022-04-07T15:30'));
+
+  return (
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <Stack spacing={2} direction="row">
+        <NextDateTimePicker
+          label="Uncontrolled picker"
+          defaultValue={dayjs('2022-04-07T15:30')}
+        />
+        <NextDateTimePicker
+          label="Controlled picker"
+          value={value}
+          onChange={(newValue) => setValue(newValue)}
+        />
+      </Stack>
+    </LocalizationProvider>
+  );
+}
diff --git a/docs/data/date-pickers/date-time-picker/DateTimePickerValue.tsx b/docs/data/date-pickers/date-time-picker/DateTimePickerValue.tsx
new file mode 100644
index 0000000000000..0e125469486bb
--- /dev/null
+++ b/docs/data/date-pickers/date-time-picker/DateTimePickerValue.tsx
@@ -0,0 +1,26 @@
+import * as React from 'react';
+import dayjs, { Dayjs } from 'dayjs';
+import Stack from '@mui/material/Stack';
+import { LocalizationProvider } from '@mui/x-date-pickers';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { Unstable_NextDateTimePicker as NextDateTimePicker } from '@mui/x-date-pickers/NextDateTimePicker';
+
+export default function DateTimePickerValue() {
+  const [value, setValue] = React.useState<Dayjs | null>(dayjs('2022-04-07T15:30'));
+
+  return (
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <Stack spacing={2} direction="row">
+        <NextDateTimePicker
+          label="Uncontrolled picker"
+          defaultValue={dayjs('2022-04-07T15:30')}
+        />
+        <NextDateTimePicker
+          label="Controlled picker"
+          value={value}
+          onChange={(newValue) => setValue(newValue)}
+        />
+      </Stack>
+    </LocalizationProvider>
+  );
+}
diff --git a/docs/data/date-pickers/date-time-picker/DateTimePickerValue.tsx.preview b/docs/data/date-pickers/date-time-picker/DateTimePickerValue.tsx.preview
new file mode 100644
index 0000000000000..85f2109c4b3fb
--- /dev/null
+++ b/docs/data/date-pickers/date-time-picker/DateTimePickerValue.tsx.preview
@@ -0,0 +1,13 @@
+<LocalizationProvider dateAdapter={AdapterDayjs}>
+  <Stack spacing={2} direction="row">
+    <NextDateTimePicker
+      label="Uncontrolled picker"
+      defaultValue={dayjs('2022-04-07T15:30')}
+    />
+    <NextDateTimePicker
+      label="Controlled picker"
+      value={value}
+      onChange={(newValue) => setValue(newValue)}
+    />
+  </Stack>
+</LocalizationProvider>
\ No newline at end of file
diff --git a/docs/data/date-pickers/date-time-picker/FormPropsDateTimePickers.js b/docs/data/date-pickers/date-time-picker/FormPropsDateTimePickers.js
index a48ceb7b1d968..c2b69793ae48e 100644
--- a/docs/data/date-pickers/date-time-picker/FormPropsDateTimePickers.js
+++ b/docs/data/date-pickers/date-time-picker/FormPropsDateTimePickers.js
@@ -1,35 +1,15 @@
 import * as React from 'react';
-
-import TextField from '@mui/material/TextField';
+import Stack from '@mui/material/Stack';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
-import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
-import Stack from '@mui/material/Stack';
+import { Unstable_NextDateTimePicker as NextDateTimePicker } from '@mui/x-date-pickers/NextDateTimePicker';
 
 export default function FormPropsDateTimePickers() {
-  const [value, setValue] = React.useState(null);
-
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs}>
       <Stack spacing={3}>
-        <DateTimePicker
-          label="disabled"
-          disabled
-          value={value}
-          onChange={(newValue) => {
-            setValue(newValue);
-          }}
-          renderInput={(params) => <TextField {...params} />}
-        />
-        <DateTimePicker
-          label="read-only"
-          readOnly
-          value={value}
-          onChange={(newValue) => {
-            setValue(newValue);
-          }}
-          renderInput={(params) => <TextField {...params} />}
-        />
+        <NextDateTimePicker label="disabled" disabled />
+        <NextDateTimePicker label="readOnly" readOnly />
       </Stack>
     </LocalizationProvider>
   );
diff --git a/docs/data/date-pickers/date-time-picker/FormPropsDateTimePickers.tsx b/docs/data/date-pickers/date-time-picker/FormPropsDateTimePickers.tsx
index 4ba2a84c30dc5..c2b69793ae48e 100644
--- a/docs/data/date-pickers/date-time-picker/FormPropsDateTimePickers.tsx
+++ b/docs/data/date-pickers/date-time-picker/FormPropsDateTimePickers.tsx
@@ -1,35 +1,15 @@
 import * as React from 'react';
-import { Dayjs } from 'dayjs';
-import TextField from '@mui/material/TextField';
+import Stack from '@mui/material/Stack';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
-import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
-import Stack from '@mui/material/Stack';
+import { Unstable_NextDateTimePicker as NextDateTimePicker } from '@mui/x-date-pickers/NextDateTimePicker';
 
 export default function FormPropsDateTimePickers() {
-  const [value, setValue] = React.useState<Dayjs | null>(null);
-
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs}>
       <Stack spacing={3}>
-        <DateTimePicker
-          label="disabled"
-          disabled
-          value={value}
-          onChange={(newValue) => {
-            setValue(newValue);
-          }}
-          renderInput={(params) => <TextField {...params} />}
-        />
-        <DateTimePicker
-          label="read-only"
-          readOnly
-          value={value}
-          onChange={(newValue) => {
-            setValue(newValue);
-          }}
-          renderInput={(params) => <TextField {...params} />}
-        />
+        <NextDateTimePicker label="disabled" disabled />
+        <NextDateTimePicker label="readOnly" readOnly />
       </Stack>
     </LocalizationProvider>
   );
diff --git a/docs/data/date-pickers/date-time-picker/FormPropsDateTimePickers.tsx.preview b/docs/data/date-pickers/date-time-picker/FormPropsDateTimePickers.tsx.preview
new file mode 100644
index 0000000000000..60bb4ce8ee584
--- /dev/null
+++ b/docs/data/date-pickers/date-time-picker/FormPropsDateTimePickers.tsx.preview
@@ -0,0 +1,6 @@
+<LocalizationProvider dateAdapter={AdapterDayjs}>
+  <Stack spacing={3}>
+    <NextDateTimePicker label="disabled" disabled />
+    <NextDateTimePicker label="readOnly" readOnly />
+  </Stack>
+</LocalizationProvider>
\ No newline at end of file
diff --git a/docs/data/date-pickers/date-time-picker/ResponsiveDateTimePickers.js b/docs/data/date-pickers/date-time-picker/ResponsiveDateTimePickers.js
index 7613049a01f6d..a310b2030860a 100644
--- a/docs/data/date-pickers/date-time-picker/ResponsiveDateTimePickers.js
+++ b/docs/data/date-pickers/date-time-picker/ResponsiveDateTimePickers.js
@@ -1,42 +1,27 @@
 import * as React from 'react';
 import dayjs from 'dayjs';
-import TextField from '@mui/material/TextField';
+import Stack from '@mui/material/Stack';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
-import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
-import { MobileDateTimePicker } from '@mui/x-date-pickers/MobileDateTimePicker';
-import { DesktopDateTimePicker } from '@mui/x-date-pickers/DesktopDateTimePicker';
-import Stack from '@mui/material/Stack';
+import { Unstable_NextDateTimePicker as NextDateTimePicker } from '@mui/x-date-pickers/NextDateTimePicker';
+import { Unstable_MobileNextDateTimePicker as MobileNextDateTimePicker } from '@mui/x-date-pickers/MobileNextDateTimePicker';
+import { Unstable_DesktopNextDateTimePicker as DesktopNextDateTimePicker } from '@mui/x-date-pickers/DesktopNextDateTimePicker';
 
 export default function ResponsiveDateTimePickers() {
-  const [value, setValue] = React.useState(dayjs('2018-01-01T00:00:00.000Z'));
-
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs}>
       <Stack spacing={3}>
-        <MobileDateTimePicker
+        <MobileNextDateTimePicker
           label="For mobile"
-          value={value}
-          onChange={(newValue) => {
-            setValue(newValue);
-          }}
-          renderInput={(params) => <TextField {...params} />}
+          defaultValue={dayjs('2022-04-07T15:30')}
         />
-        <DesktopDateTimePicker
+        <DesktopNextDateTimePicker
           label="For desktop"
-          value={value}
-          onChange={(newValue) => {
-            setValue(newValue);
-          }}
-          renderInput={(params) => <TextField {...params} />}
+          defaultValue={dayjs('2022-04-07T15:30')}
         />
-        <DateTimePicker
+        <NextDateTimePicker
           label="Responsive"
-          renderInput={(params) => <TextField {...params} />}
-          value={value}
-          onChange={(newValue) => {
-            setValue(newValue);
-          }}
+          defaultValue={dayjs('2022-04-07T15:30')}
         />
       </Stack>
     </LocalizationProvider>
diff --git a/docs/data/date-pickers/date-time-picker/ResponsiveDateTimePickers.tsx b/docs/data/date-pickers/date-time-picker/ResponsiveDateTimePickers.tsx
index 0333c11c9c36b..a310b2030860a 100644
--- a/docs/data/date-pickers/date-time-picker/ResponsiveDateTimePickers.tsx
+++ b/docs/data/date-pickers/date-time-picker/ResponsiveDateTimePickers.tsx
@@ -1,44 +1,27 @@
 import * as React from 'react';
-import dayjs, { Dayjs } from 'dayjs';
-import TextField from '@mui/material/TextField';
+import dayjs from 'dayjs';
+import Stack from '@mui/material/Stack';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
-import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
-import { MobileDateTimePicker } from '@mui/x-date-pickers/MobileDateTimePicker';
-import { DesktopDateTimePicker } from '@mui/x-date-pickers/DesktopDateTimePicker';
-import Stack from '@mui/material/Stack';
+import { Unstable_NextDateTimePicker as NextDateTimePicker } from '@mui/x-date-pickers/NextDateTimePicker';
+import { Unstable_MobileNextDateTimePicker as MobileNextDateTimePicker } from '@mui/x-date-pickers/MobileNextDateTimePicker';
+import { Unstable_DesktopNextDateTimePicker as DesktopNextDateTimePicker } from '@mui/x-date-pickers/DesktopNextDateTimePicker';
 
 export default function ResponsiveDateTimePickers() {
-  const [value, setValue] = React.useState<Dayjs | null>(
-    dayjs('2018-01-01T00:00:00.000Z'),
-  );
-
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs}>
       <Stack spacing={3}>
-        <MobileDateTimePicker
+        <MobileNextDateTimePicker
           label="For mobile"
-          value={value}
-          onChange={(newValue) => {
-            setValue(newValue);
-          }}
-          renderInput={(params) => <TextField {...params} />}
+          defaultValue={dayjs('2022-04-07T15:30')}
         />
-        <DesktopDateTimePicker
+        <DesktopNextDateTimePicker
           label="For desktop"
-          value={value}
-          onChange={(newValue) => {
-            setValue(newValue);
-          }}
-          renderInput={(params) => <TextField {...params} />}
+          defaultValue={dayjs('2022-04-07T15:30')}
         />
-        <DateTimePicker
+        <NextDateTimePicker
           label="Responsive"
-          renderInput={(params) => <TextField {...params} />}
-          value={value}
-          onChange={(newValue) => {
-            setValue(newValue);
-          }}
+          defaultValue={dayjs('2022-04-07T15:30')}
         />
       </Stack>
     </LocalizationProvider>
diff --git a/docs/data/date-pickers/date-time-picker/ResponsiveDateTimePickers.tsx.preview b/docs/data/date-pickers/date-time-picker/ResponsiveDateTimePickers.tsx.preview
new file mode 100644
index 0000000000000..c8edecc77eb44
--- /dev/null
+++ b/docs/data/date-pickers/date-time-picker/ResponsiveDateTimePickers.tsx.preview
@@ -0,0 +1,16 @@
+<LocalizationProvider dateAdapter={AdapterDayjs}>
+  <Stack spacing={3}>
+    <MobileNextDateTimePicker
+      label="For mobile"
+      defaultValue={dayjs('2022-04-07T15:30')}
+    />
+    <DesktopNextDateTimePicker
+      label="For desktop"
+      defaultValue={dayjs('2022-04-07T15:30')}
+    />
+    <NextDateTimePicker
+      label="Responsive"
+      defaultValue={dayjs('2022-04-07T15:30')}
+    />
+  </Stack>
+</LocalizationProvider>
\ No newline at end of file
diff --git a/docs/data/date-pickers/date-time-picker/StaticDateTimePickerDemo.js b/docs/data/date-pickers/date-time-picker/StaticDateTimePickerDemo.js
index 22c02e0ac4200..08bedc1abe431 100644
--- a/docs/data/date-pickers/date-time-picker/StaticDateTimePickerDemo.js
+++ b/docs/data/date-pickers/date-time-picker/StaticDateTimePickerDemo.js
@@ -1,23 +1,15 @@
 import * as React from 'react';
 import dayjs from 'dayjs';
-import TextField from '@mui/material/TextField';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
-import { StaticDateTimePicker } from '@mui/x-date-pickers/StaticDateTimePicker';
+import { Unstable_StaticNextDateTimePicker as StaticNextDateTimePicker } from '@mui/x-date-pickers/StaticNextDateTimePicker';
 
 export default function StaticDateTimePickerDemo() {
-  const [value, setValue] = React.useState(dayjs('2022-04-07'));
-
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs}>
-      <StaticDateTimePicker
+      <StaticNextDateTimePicker
         displayStaticWrapperAs="desktop"
-        openTo="year"
-        value={value}
-        onChange={(newValue) => {
-          setValue(newValue);
-        }}
-        renderInput={(params) => <TextField {...params} />}
+        defaultValue={dayjs('2022-04-07T15:30')}
       />
     </LocalizationProvider>
   );
diff --git a/docs/data/date-pickers/date-time-picker/StaticDateTimePickerDemo.tsx b/docs/data/date-pickers/date-time-picker/StaticDateTimePickerDemo.tsx
index 40c8a552910e9..08bedc1abe431 100644
--- a/docs/data/date-pickers/date-time-picker/StaticDateTimePickerDemo.tsx
+++ b/docs/data/date-pickers/date-time-picker/StaticDateTimePickerDemo.tsx
@@ -1,23 +1,15 @@
 import * as React from 'react';
-import dayjs, { Dayjs } from 'dayjs';
-import TextField from '@mui/material/TextField';
+import dayjs from 'dayjs';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
-import { StaticDateTimePicker } from '@mui/x-date-pickers/StaticDateTimePicker';
+import { Unstable_StaticNextDateTimePicker as StaticNextDateTimePicker } from '@mui/x-date-pickers/StaticNextDateTimePicker';
 
 export default function StaticDateTimePickerDemo() {
-  const [value, setValue] = React.useState<Dayjs | null>(dayjs('2022-04-07'));
-
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs}>
-      <StaticDateTimePicker
+      <StaticNextDateTimePicker
         displayStaticWrapperAs="desktop"
-        openTo="year"
-        value={value}
-        onChange={(newValue) => {
-          setValue(newValue);
-        }}
-        renderInput={(params) => <TextField {...params} />}
+        defaultValue={dayjs('2022-04-07T15:30')}
       />
     </LocalizationProvider>
   );
diff --git a/docs/data/date-pickers/date-time-picker/StaticDateTimePickerDemo.tsx.preview b/docs/data/date-pickers/date-time-picker/StaticDateTimePickerDemo.tsx.preview
index 5c534f8a0d095..e0ff014ccb1fd 100644
--- a/docs/data/date-pickers/date-time-picker/StaticDateTimePickerDemo.tsx.preview
+++ b/docs/data/date-pickers/date-time-picker/StaticDateTimePickerDemo.tsx.preview
@@ -1,11 +1,6 @@
 <LocalizationProvider dateAdapter={AdapterDayjs}>
-  <StaticDateTimePicker
+  <StaticNextDateTimePicker
     displayStaticWrapperAs="desktop"
-    openTo="year"
-    value={value}
-    onChange={(newValue) => {
-      setValue(newValue);
-    }}
-    renderInput={(params) => <TextField {...params} />}
+    defaultValue={dayjs('2022-04-07T15:30')}
   />
 </LocalizationProvider>
\ No newline at end of file
diff --git a/docs/data/date-pickers/date-time-picker/date-time-picker.md b/docs/data/date-pickers/date-time-picker/date-time-picker.md
index b21db736ae84d..fe8782c998dcd 100644
--- a/docs/data/date-pickers/date-time-picker/date-time-picker.md
+++ b/docs/data/date-pickers/date-time-picker/date-time-picker.md
@@ -11,9 +11,17 @@ materialDesign: https://m2.material.io/components/date-pickers
 
 <p class="description">This component combines the date & time pickers.</p>
 
+:::warning
+The new date time pickers are unstable.
+They might receive breaking changes on their props to have the best component possible by the time of the stable release.
+
+They will be renamed at the end of the v6 beta phase to have the same name as the current legacy pickers
+(`NextDateTimePicker` will become `DateTimePicker`, ...)
+:::
+
 It allows the user to select both date and time with the same control.
 
-Note that this component is the [DatePicker](/x/react-date-pickers/date-picker/) and [TimePicker](/x/react-date-pickers/time-picker/)
+Note that this component is the [NextDatePicker](/x/react-date-pickers/date-picker/) and [NextTimePicker](/x/react-date-pickers/time-picker/)
 component combined, so any of these components' props can be passed to the DateTimePicker.
 
 ## Basic usage
@@ -22,20 +30,33 @@ Allows choosing date then time. There are 4 steps available (year, date, hour, a
 
 {{"demo": "BasicDateTimePicker.js"}}
 
+## Uncontrolled vs. Controlled
+
+The component can be uncontrolled or controlled
+
+{{"demo": "DateTimePickerValue.js"}}
+
 ## Responsiveness
 
-The `DateTimePicker` component is designed and optimized for the device it runs on.
+The `NextDateTimePicker` component is designed and optimized for the device it runs on.
 
-- The `MobileDateTimePicker` component works best for touch devices and small screens.
-- The `DesktopDateTimePicker` component works best for mouse devices and large screens.
+- The `MobileNextDateTimePicker` component works best for touch devices and small screens.
+- The `DesktopNextDateTimePicker` component works best for mouse devices and large screens.
 
-By default, the `DateTimePicker` component renders the desktop version if the media query [`@media (pointer: fine)`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pointer) matches.
+By default, the `NextDateTimePicker` component renders the desktop version if the media query [`@media (pointer: fine)`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pointer) matches.
 This can be customized with the `desktopModeMediaQuery` prop.
 
 There are certain caveats when testing pickers, please refer to [this section](/x/react-date-pickers/getting-started/#testing-caveats) for more information.
 
 {{"demo": "ResponsiveDateTimePickers.js"}}
 
+## Static mode
+
+It is also possible to render any date time picker without the modal/popover and text field.
+This will enable building custom popover/modal containers.
+
+{{"demo": "StaticDateTimePickerDemo.js", "bg": true}}
+
 ## Form props
 
 The date time picker component can be disabled or read-only.
@@ -46,12 +67,6 @@ The date time picker component can be disabled or read-only.
 
 You can find the documentation in the [Validation page](/x/react-date-pickers/validation/)
 
-## Static mode
-
-It's possible to render any date & time picker inline. This will enable building custom popover/modal containers.
-
-{{"demo": "StaticDateTimePickerDemo.js", "bg": true}}
-
 ## Customization
 
 Here are some examples of heavily customized date & time pickers:
diff --git a/docs/data/date-pickers/legacy-date-range-picker/BasicDateRangePicker.js b/docs/data/date-pickers/legacy-date-range-picker/BasicDateRangePicker.js
new file mode 100644
index 0000000000000..65d20083e3bce
--- /dev/null
+++ b/docs/data/date-pickers/legacy-date-range-picker/BasicDateRangePicker.js
@@ -0,0 +1,30 @@
+import * as React from 'react';
+
+import TextField from '@mui/material/TextField';
+import Box from '@mui/material/Box';
+import { LocalizationProvider } from '@mui/x-date-pickers-pro';
+import { AdapterDayjs } from '@mui/x-date-pickers-pro/AdapterDayjs';
+import { DateRangePicker } from '@mui/x-date-pickers-pro/DateRangePicker';
+
+export default function BasicDateRangePicker() {
+  const [value, setValue] = React.useState([null, null]);
+
+  return (
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <DateRangePicker
+        localeText={{ start: 'Check-in', end: 'Check-out' }}
+        value={value}
+        onChange={(newValue) => {
+          setValue(newValue);
+        }}
+        renderInput={(startProps, endProps) => (
+          <React.Fragment>
+            <TextField {...startProps} />
+            <Box sx={{ mx: 2 }}> to </Box>
+            <TextField {...endProps} />
+          </React.Fragment>
+        )}
+      />
+    </LocalizationProvider>
+  );
+}
diff --git a/docs/data/date-pickers/legacy-date-range-picker/BasicDateRangePicker.tsx b/docs/data/date-pickers/legacy-date-range-picker/BasicDateRangePicker.tsx
new file mode 100644
index 0000000000000..7fe6ca71a6818
--- /dev/null
+++ b/docs/data/date-pickers/legacy-date-range-picker/BasicDateRangePicker.tsx
@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { Dayjs } from 'dayjs';
+import TextField from '@mui/material/TextField';
+import Box from '@mui/material/Box';
+import { LocalizationProvider } from '@mui/x-date-pickers-pro';
+import { AdapterDayjs } from '@mui/x-date-pickers-pro/AdapterDayjs';
+import { DateRangePicker, DateRange } from '@mui/x-date-pickers-pro/DateRangePicker';
+
+export default function BasicDateRangePicker() {
+  const [value, setValue] = React.useState<DateRange<Dayjs>>([null, null]);
+
+  return (
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <DateRangePicker
+        localeText={{ start: 'Check-in', end: 'Check-out' }}
+        value={value}
+        onChange={(newValue) => {
+          setValue(newValue);
+        }}
+        renderInput={(startProps, endProps) => (
+          <React.Fragment>
+            <TextField {...startProps} />
+            <Box sx={{ mx: 2 }}> to </Box>
+            <TextField {...endProps} />
+          </React.Fragment>
+        )}
+      />
+    </LocalizationProvider>
+  );
+}
diff --git a/docs/data/date-pickers/legacy-date-range-picker/BasicDateRangePicker.tsx.preview b/docs/data/date-pickers/legacy-date-range-picker/BasicDateRangePicker.tsx.preview
new file mode 100644
index 0000000000000..7487f9854fbeb
--- /dev/null
+++ b/docs/data/date-pickers/legacy-date-range-picker/BasicDateRangePicker.tsx.preview
@@ -0,0 +1,16 @@
+<LocalizationProvider dateAdapter={AdapterDayjs}>
+  <DateRangePicker
+    localeText={{ start: 'Check-in', end: 'Check-out' }}
+    value={value}
+    onChange={(newValue) => {
+      setValue(newValue);
+    }}
+    renderInput={(startProps, endProps) => (
+      <React.Fragment>
+        <TextField {...startProps} />
+        <Box sx={{ mx: 2 }}> to </Box>
+        <TextField {...endProps} />
+      </React.Fragment>
+    )}
+  />
+</LocalizationProvider>
\ No newline at end of file
diff --git a/docs/data/date-pickers/legacy-date-range-picker/CalendarsDateRangePicker.js b/docs/data/date-pickers/legacy-date-range-picker/CalendarsDateRangePicker.js
new file mode 100644
index 0000000000000..0cc957b720db1
--- /dev/null
+++ b/docs/data/date-pickers/legacy-date-range-picker/CalendarsDateRangePicker.js
@@ -0,0 +1,64 @@
+import * as React from 'react';
+
+import Typography from '@mui/material/Typography';
+import TextField from '@mui/material/TextField';
+import { LocalizationProvider } from '@mui/x-date-pickers-pro';
+import { AdapterDayjs } from '@mui/x-date-pickers-pro/AdapterDayjs';
+import { DateRangePicker } from '@mui/x-date-pickers-pro/DateRangePicker';
+import Box from '@mui/material/Box';
+
+export default function CalendarsDateRangePicker() {
+  const [value, setValue] = React.useState([null, null]);
+
+  return (
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <div>
+        <Typography sx={{ mt: 2, mb: 1 }}>1 calendar </Typography>
+        <DateRangePicker
+          calendars={1}
+          value={value}
+          onChange={(newValue) => {
+            setValue(newValue);
+          }}
+          renderInput={(startProps, endProps) => (
+            <React.Fragment>
+              <TextField {...startProps} />
+              <Box sx={{ mx: 2 }}> to </Box>
+              <TextField {...endProps} />
+            </React.Fragment>
+          )}
+        />
+        <Typography sx={{ mt: 2, mb: 1 }}>2 calendars</Typography>
+        <DateRangePicker
+          calendars={2}
+          value={value}
+          onChange={(newValue) => {
+            setValue(newValue);
+          }}
+          renderInput={(startProps, endProps) => (
+            <React.Fragment>
+              <TextField {...startProps} />
+              <Box sx={{ mx: 2 }}> to </Box>
+              <TextField {...endProps} />
+            </React.Fragment>
+          )}
+        />
+        <Typography sx={{ mt: 2, mb: 1 }}>3 calendars</Typography>
+        <DateRangePicker
+          calendars={3}
+          value={value}
+          onChange={(newValue) => {
+            setValue(newValue);
+          }}
+          renderInput={(startProps, endProps) => (
+            <React.Fragment>
+              <TextField {...startProps} />
+              <Box sx={{ mx: 2 }}> to </Box>
+              <TextField {...endProps} />
+            </React.Fragment>
+          )}
+        />
+      </div>
+    </LocalizationProvider>
+  );
+}
diff --git a/docs/data/date-pickers/legacy-date-range-picker/CalendarsDateRangePicker.tsx b/docs/data/date-pickers/legacy-date-range-picker/CalendarsDateRangePicker.tsx
new file mode 100644
index 0000000000000..fe54c278d497a
--- /dev/null
+++ b/docs/data/date-pickers/legacy-date-range-picker/CalendarsDateRangePicker.tsx
@@ -0,0 +1,64 @@
+import * as React from 'react';
+import { Dayjs } from 'dayjs';
+import Typography from '@mui/material/Typography';
+import TextField from '@mui/material/TextField';
+import { LocalizationProvider } from '@mui/x-date-pickers-pro';
+import { AdapterDayjs } from '@mui/x-date-pickers-pro/AdapterDayjs';
+import { DateRangePicker, DateRange } from '@mui/x-date-pickers-pro/DateRangePicker';
+import Box from '@mui/material/Box';
+
+export default function CalendarsDateRangePicker() {
+  const [value, setValue] = React.useState<DateRange<Dayjs>>([null, null]);
+
+  return (
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <div>
+        <Typography sx={{ mt: 2, mb: 1 }}>1 calendar </Typography>
+        <DateRangePicker
+          calendars={1}
+          value={value}
+          onChange={(newValue) => {
+            setValue(newValue);
+          }}
+          renderInput={(startProps, endProps) => (
+            <React.Fragment>
+              <TextField {...startProps} />
+              <Box sx={{ mx: 2 }}> to </Box>
+              <TextField {...endProps} />
+            </React.Fragment>
+          )}
+        />
+        <Typography sx={{ mt: 2, mb: 1 }}>2 calendars</Typography>
+        <DateRangePicker
+          calendars={2}
+          value={value}
+          onChange={(newValue) => {
+            setValue(newValue);
+          }}
+          renderInput={(startProps, endProps) => (
+            <React.Fragment>
+              <TextField {...startProps} />
+              <Box sx={{ mx: 2 }}> to </Box>
+              <TextField {...endProps} />
+            </React.Fragment>
+          )}
+        />
+        <Typography sx={{ mt: 2, mb: 1 }}>3 calendars</Typography>
+        <DateRangePicker
+          calendars={3}
+          value={value}
+          onChange={(newValue) => {
+            setValue(newValue);
+          }}
+          renderInput={(startProps, endProps) => (
+            <React.Fragment>
+              <TextField {...startProps} />
+              <Box sx={{ mx: 2 }}> to </Box>
+              <TextField {...endProps} />
+            </React.Fragment>
+          )}
+        />
+      </div>
+    </LocalizationProvider>
+  );
+}
diff --git a/docs/data/date-pickers/date-range-picker/CustomDateRangeInputs.js b/docs/data/date-pickers/legacy-date-range-picker/CustomDateRangeInputs.js
similarity index 100%
rename from docs/data/date-pickers/date-range-picker/CustomDateRangeInputs.js
rename to docs/data/date-pickers/legacy-date-range-picker/CustomDateRangeInputs.js
diff --git a/docs/data/date-pickers/date-range-picker/CustomDateRangeInputs.tsx b/docs/data/date-pickers/legacy-date-range-picker/CustomDateRangeInputs.tsx
similarity index 100%
rename from docs/data/date-pickers/date-range-picker/CustomDateRangeInputs.tsx
rename to docs/data/date-pickers/legacy-date-range-picker/CustomDateRangeInputs.tsx
diff --git a/docs/data/date-pickers/legacy-date-range-picker/CustomDateRangePickerDay.js b/docs/data/date-pickers/legacy-date-range-picker/CustomDateRangePickerDay.js
new file mode 100644
index 0000000000000..4a587fd877046
--- /dev/null
+++ b/docs/data/date-pickers/legacy-date-range-picker/CustomDateRangePickerDay.js
@@ -0,0 +1,59 @@
+import * as React from 'react';
+import { styled } from '@mui/material/styles';
+import Box from '@mui/material/Box';
+import TextField from '@mui/material/TextField';
+import { LocalizationProvider } from '@mui/x-date-pickers-pro';
+import { AdapterDayjs } from '@mui/x-date-pickers-pro/AdapterDayjs';
+import { StaticDateRangePicker } from '@mui/x-date-pickers-pro/StaticDateRangePicker';
+import { DateRangePickerDay as MuiDateRangePickerDay } from '@mui/x-date-pickers-pro/DateRangePickerDay';
+
+const DateRangePickerDay = styled(MuiDateRangePickerDay)(
+  ({
+    theme,
+    isHighlighting,
+    isStartOfHighlighting,
+    isEndOfHighlighting,
+    outsideCurrentMonth,
+  }) => ({
+    ...(!outsideCurrentMonth &&
+      isHighlighting && {
+        borderRadius: 0,
+        backgroundColor: theme.palette.primary.main,
+        color: theme.palette.common.white,
+        '&:hover, &:focus': {
+          backgroundColor: theme.palette.primary.dark,
+        },
+      }),
+    ...(isStartOfHighlighting && {
+      borderTopLeftRadius: '50%',
+      borderBottomLeftRadius: '50%',
+    }),
+    ...(isEndOfHighlighting && {
+      borderTopRightRadius: '50%',
+      borderBottomRightRadius: '50%',
+    }),
+  }),
+);
+
+export default function CustomDateRangePickerDay() {
+  const [value, setValue] = React.useState([null, null]);
+
+  return (
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <StaticDateRangePicker
+        displayStaticWrapperAs="desktop"
+        label="date range"
+        value={value}
+        onChange={(newValue) => setValue(newValue)}
+        components={{ Day: DateRangePickerDay }}
+        renderInput={(startProps, endProps) => (
+          <React.Fragment>
+            <TextField {...startProps} />
+            <Box sx={{ mx: 2 }}> to </Box>
+            <TextField {...endProps} />
+          </React.Fragment>
+        )}
+      />
+    </LocalizationProvider>
+  );
+}
diff --git a/docs/data/date-pickers/legacy-date-range-picker/CustomDateRangePickerDay.tsx b/docs/data/date-pickers/legacy-date-range-picker/CustomDateRangePickerDay.tsx
new file mode 100644
index 0000000000000..f3dfec278bbc0
--- /dev/null
+++ b/docs/data/date-pickers/legacy-date-range-picker/CustomDateRangePickerDay.tsx
@@ -0,0 +1,64 @@
+import * as React from 'react';
+import { styled } from '@mui/material/styles';
+import Box from '@mui/material/Box';
+import TextField from '@mui/material/TextField';
+import { LocalizationProvider } from '@mui/x-date-pickers-pro';
+import { AdapterDayjs } from '@mui/x-date-pickers-pro/AdapterDayjs';
+import { StaticDateRangePicker } from '@mui/x-date-pickers-pro/StaticDateRangePicker';
+import {
+  DateRangePickerDay as MuiDateRangePickerDay,
+  DateRangePickerDayProps,
+} from '@mui/x-date-pickers-pro/DateRangePickerDay';
+import { DateRange } from '@mui/x-date-pickers-pro/DateRangePicker';
+import { Dayjs } from 'dayjs';
+
+const DateRangePickerDay = styled(MuiDateRangePickerDay)(
+  ({
+    theme,
+    isHighlighting,
+    isStartOfHighlighting,
+    isEndOfHighlighting,
+    outsideCurrentMonth,
+  }) => ({
+    ...(!outsideCurrentMonth &&
+      isHighlighting && {
+        borderRadius: 0,
+        backgroundColor: theme.palette.primary.main,
+        color: theme.palette.common.white,
+        '&:hover, &:focus': {
+          backgroundColor: theme.palette.primary.dark,
+        },
+      }),
+    ...(isStartOfHighlighting && {
+      borderTopLeftRadius: '50%',
+      borderBottomLeftRadius: '50%',
+    }),
+    ...(isEndOfHighlighting && {
+      borderTopRightRadius: '50%',
+      borderBottomRightRadius: '50%',
+    }),
+  }),
+) as React.ComponentType<DateRangePickerDayProps<Dayjs>>;
+
+export default function CustomDateRangePickerDay() {
+  const [value, setValue] = React.useState<DateRange<Dayjs>>([null, null]);
+
+  return (
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <StaticDateRangePicker
+        displayStaticWrapperAs="desktop"
+        label="date range"
+        value={value}
+        onChange={(newValue) => setValue(newValue)}
+        components={{ Day: DateRangePickerDay }}
+        renderInput={(startProps, endProps) => (
+          <React.Fragment>
+            <TextField {...startProps} />
+            <Box sx={{ mx: 2 }}> to </Box>
+            <TextField {...endProps} />
+          </React.Fragment>
+        )}
+      />
+    </LocalizationProvider>
+  );
+}
diff --git a/docs/data/date-pickers/legacy-date-range-picker/CustomDateRangePickerDay.tsx.preview b/docs/data/date-pickers/legacy-date-range-picker/CustomDateRangePickerDay.tsx.preview
new file mode 100644
index 0000000000000..6354ffb70eef4
--- /dev/null
+++ b/docs/data/date-pickers/legacy-date-range-picker/CustomDateRangePickerDay.tsx.preview
@@ -0,0 +1,16 @@
+<LocalizationProvider dateAdapter={AdapterDayjs}>
+  <StaticDateRangePicker
+    displayStaticWrapperAs="desktop"
+    label="date range"
+    value={value}
+    onChange={(newValue) => setValue(newValue)}
+    components={{ Day: DateRangePickerDay }}
+    renderInput={(startProps, endProps) => (
+      <React.Fragment>
+        <TextField {...startProps} />
+        <Box sx={{ mx: 2 }}> to </Box>
+        <TextField {...endProps} />
+      </React.Fragment>
+    )}
+  />
+</LocalizationProvider>
\ No newline at end of file
diff --git a/docs/data/date-pickers/legacy-date-range-picker/FormPropsDateRangePickers.js b/docs/data/date-pickers/legacy-date-range-picker/FormPropsDateRangePickers.js
new file mode 100644
index 0000000000000..7d8b543ae4292
--- /dev/null
+++ b/docs/data/date-pickers/legacy-date-range-picker/FormPropsDateRangePickers.js
@@ -0,0 +1,49 @@
+import * as React from 'react';
+
+import TextField from '@mui/material/TextField';
+import { LocalizationProvider } from '@mui/x-date-pickers-pro';
+import { AdapterDayjs } from '@mui/x-date-pickers-pro/AdapterDayjs';
+import { DateRangePicker } from '@mui/x-date-pickers-pro/DateRangePicker';
+import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
+
+export default function FormPropsDateRangePickers() {
+  const [value, setValue] = React.useState([null, null]);
+
+  return (
+    <Stack spacing={3}>
+      <LocalizationProvider dateAdapter={AdapterDayjs}>
+        <DateRangePicker
+          localeText={{ start: 'Disabled start', end: 'Disabled end' }}
+          disabled
+          value={value}
+          onChange={(newValue) => {
+            setValue(newValue);
+          }}
+          renderInput={(startProps, endProps) => (
+            <React.Fragment>
+              <TextField {...startProps} />
+              <Box sx={{ mx: 2 }}> to </Box>
+              <TextField {...endProps} />
+            </React.Fragment>
+          )}
+        />
+        <DateRangePicker
+          localeText={{ start: 'Read-only start', end: 'Read-only end' }}
+          readOnly
+          value={value}
+          onChange={(newValue) => {
+            setValue(newValue);
+          }}
+          renderInput={(startProps, endProps) => (
+            <React.Fragment>
+              <TextField {...startProps} />
+              <Box sx={{ mx: 2 }}> to </Box>
+              <TextField {...endProps} />
+            </React.Fragment>
+          )}
+        />
+      </LocalizationProvider>
+    </Stack>
+  );
+}
diff --git a/docs/data/date-pickers/legacy-date-range-picker/FormPropsDateRangePickers.tsx b/docs/data/date-pickers/legacy-date-range-picker/FormPropsDateRangePickers.tsx
new file mode 100644
index 0000000000000..06a2838381d35
--- /dev/null
+++ b/docs/data/date-pickers/legacy-date-range-picker/FormPropsDateRangePickers.tsx
@@ -0,0 +1,49 @@
+import * as React from 'react';
+import { Dayjs } from 'dayjs';
+import TextField from '@mui/material/TextField';
+import { LocalizationProvider } from '@mui/x-date-pickers-pro';
+import { AdapterDayjs } from '@mui/x-date-pickers-pro/AdapterDayjs';
+import { DateRangePicker, DateRange } from '@mui/x-date-pickers-pro/DateRangePicker';
+import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
+
+export default function FormPropsDateRangePickers() {
+  const [value, setValue] = React.useState<DateRange<Dayjs>>([null, null]);
+
+  return (
+    <Stack spacing={3}>
+      <LocalizationProvider dateAdapter={AdapterDayjs}>
+        <DateRangePicker
+          localeText={{ start: 'Disabled start', end: 'Disabled end' }}
+          disabled
+          value={value}
+          onChange={(newValue) => {
+            setValue(newValue);
+          }}
+          renderInput={(startProps, endProps) => (
+            <React.Fragment>
+              <TextField {...startProps} />
+              <Box sx={{ mx: 2 }}> to </Box>
+              <TextField {...endProps} />
+            </React.Fragment>
+          )}
+        />
+        <DateRangePicker
+          localeText={{ start: 'Read-only start', end: 'Read-only end' }}
+          readOnly
+          value={value}
+          onChange={(newValue) => {
+            setValue(newValue);
+          }}
+          renderInput={(startProps, endProps) => (
+            <React.Fragment>
+              <TextField {...startProps} />
+              <Box sx={{ mx: 2 }}> to </Box>
+              <TextField {...endProps} />
+            </React.Fragment>
+          )}
+        />
+      </LocalizationProvider>
+    </Stack>
+  );
+}
diff --git a/docs/data/date-pickers/date-range-picker/MinMaxDateRangePicker.js b/docs/data/date-pickers/legacy-date-range-picker/MinMaxDateRangePicker.js
similarity index 100%
rename from docs/data/date-pickers/date-range-picker/MinMaxDateRangePicker.js
rename to docs/data/date-pickers/legacy-date-range-picker/MinMaxDateRangePicker.js
diff --git a/docs/data/date-pickers/date-range-picker/MinMaxDateRangePicker.tsx b/docs/data/date-pickers/legacy-date-range-picker/MinMaxDateRangePicker.tsx
similarity index 100%
rename from docs/data/date-pickers/date-range-picker/MinMaxDateRangePicker.tsx
rename to docs/data/date-pickers/legacy-date-range-picker/MinMaxDateRangePicker.tsx
diff --git a/docs/data/date-pickers/legacy-date-range-picker/ResponsiveDateRangePicker.js b/docs/data/date-pickers/legacy-date-range-picker/ResponsiveDateRangePicker.js
new file mode 100644
index 0000000000000..250ddd397e2fe
--- /dev/null
+++ b/docs/data/date-pickers/legacy-date-range-picker/ResponsiveDateRangePicker.js
@@ -0,0 +1,48 @@
+import * as React from 'react';
+
+import TextField from '@mui/material/TextField';
+import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
+import { LocalizationProvider } from '@mui/x-date-pickers-pro';
+import { AdapterDayjs } from '@mui/x-date-pickers-pro/AdapterDayjs';
+import { MobileDateRangePicker } from '@mui/x-date-pickers-pro/MobileDateRangePicker';
+import { DesktopDateRangePicker } from '@mui/x-date-pickers-pro/DesktopDateRangePicker';
+
+export default function ResponsiveDateRangePicker() {
+  const [value, setValue] = React.useState([null, null]);
+
+  return (
+    <Stack spacing={3}>
+      <LocalizationProvider dateAdapter={AdapterDayjs}>
+        <MobileDateRangePicker
+          localeText={{ start: 'Mobile start', end: 'Mobile end' }}
+          value={value}
+          onChange={(newValue) => {
+            setValue(newValue);
+          }}
+          renderInput={(startProps, endProps) => (
+            <React.Fragment>
+              <TextField {...startProps} />
+              <Box sx={{ mx: 2 }}> to </Box>
+              <TextField {...endProps} />
+            </React.Fragment>
+          )}
+        />
+        <DesktopDateRangePicker
+          localeText={{ start: 'Desktop start', end: 'Desktop end' }}
+          value={value}
+          onChange={(newValue) => {
+            setValue(newValue);
+          }}
+          renderInput={(startProps, endProps) => (
+            <React.Fragment>
+              <TextField {...startProps} />
+              <Box sx={{ mx: 2 }}> to </Box>
+              <TextField {...endProps} />
+            </React.Fragment>
+          )}
+        />
+      </LocalizationProvider>
+    </Stack>
+  );
+}
diff --git a/docs/data/date-pickers/legacy-date-range-picker/ResponsiveDateRangePicker.tsx b/docs/data/date-pickers/legacy-date-range-picker/ResponsiveDateRangePicker.tsx
new file mode 100644
index 0000000000000..3b4407746b8d5
--- /dev/null
+++ b/docs/data/date-pickers/legacy-date-range-picker/ResponsiveDateRangePicker.tsx
@@ -0,0 +1,49 @@
+import * as React from 'react';
+import { Dayjs } from 'dayjs';
+import TextField from '@mui/material/TextField';
+import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
+import { LocalizationProvider } from '@mui/x-date-pickers-pro';
+import { AdapterDayjs } from '@mui/x-date-pickers-pro/AdapterDayjs';
+import { MobileDateRangePicker } from '@mui/x-date-pickers-pro/MobileDateRangePicker';
+import { DesktopDateRangePicker } from '@mui/x-date-pickers-pro/DesktopDateRangePicker';
+import { DateRange } from '@mui/x-date-pickers-pro/DateRangePicker';
+
+export default function ResponsiveDateRangePicker() {
+  const [value, setValue] = React.useState<DateRange<Dayjs>>([null, null]);
+
+  return (
+    <Stack spacing={3}>
+      <LocalizationProvider dateAdapter={AdapterDayjs}>
+        <MobileDateRangePicker
+          localeText={{ start: 'Mobile start', end: 'Mobile end' }}
+          value={value}
+          onChange={(newValue) => {
+            setValue(newValue);
+          }}
+          renderInput={(startProps, endProps) => (
+            <React.Fragment>
+              <TextField {...startProps} />
+              <Box sx={{ mx: 2 }}> to </Box>
+              <TextField {...endProps} />
+            </React.Fragment>
+          )}
+        />
+        <DesktopDateRangePicker
+          localeText={{ start: 'Desktop start', end: 'Desktop end' }}
+          value={value}
+          onChange={(newValue) => {
+            setValue(newValue);
+          }}
+          renderInput={(startProps, endProps) => (
+            <React.Fragment>
+              <TextField {...startProps} />
+              <Box sx={{ mx: 2 }}> to </Box>
+              <TextField {...endProps} />
+            </React.Fragment>
+          )}
+        />
+      </LocalizationProvider>
+    </Stack>
+  );
+}
diff --git a/docs/data/date-pickers/legacy-date-range-picker/StaticDateRangePickerDemo.js b/docs/data/date-pickers/legacy-date-range-picker/StaticDateRangePickerDemo.js
new file mode 100644
index 0000000000000..5e4e613d27aae
--- /dev/null
+++ b/docs/data/date-pickers/legacy-date-range-picker/StaticDateRangePickerDemo.js
@@ -0,0 +1,31 @@
+import * as React from 'react';
+
+import TextField from '@mui/material/TextField';
+import { LocalizationProvider } from '@mui/x-date-pickers-pro';
+import { AdapterDayjs } from '@mui/x-date-pickers-pro/AdapterDayjs';
+import { StaticDateRangePicker } from '@mui/x-date-pickers-pro/StaticDateRangePicker';
+
+import Box from '@mui/material/Box';
+
+export default function StaticDateRangePickerDemo() {
+  const [value, setValue] = React.useState([null, null]);
+
+  return (
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <StaticDateRangePicker
+        displayStaticWrapperAs="desktop"
+        value={value}
+        onChange={(newValue) => {
+          setValue(newValue);
+        }}
+        renderInput={(startProps, endProps) => (
+          <React.Fragment>
+            <TextField {...startProps} />
+            <Box sx={{ mx: 2 }}> to </Box>
+            <TextField {...endProps} />
+          </React.Fragment>
+        )}
+      />
+    </LocalizationProvider>
+  );
+}
diff --git a/docs/data/date-pickers/legacy-date-range-picker/StaticDateRangePickerDemo.tsx b/docs/data/date-pickers/legacy-date-range-picker/StaticDateRangePickerDemo.tsx
new file mode 100644
index 0000000000000..8ef319dbb5160
--- /dev/null
+++ b/docs/data/date-pickers/legacy-date-range-picker/StaticDateRangePickerDemo.tsx
@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { Dayjs } from 'dayjs';
+import TextField from '@mui/material/TextField';
+import { LocalizationProvider } from '@mui/x-date-pickers-pro';
+import { AdapterDayjs } from '@mui/x-date-pickers-pro/AdapterDayjs';
+import { StaticDateRangePicker } from '@mui/x-date-pickers-pro/StaticDateRangePicker';
+import { DateRange } from '@mui/x-date-pickers-pro/DateRangePicker';
+import Box from '@mui/material/Box';
+
+export default function StaticDateRangePickerDemo() {
+  const [value, setValue] = React.useState<DateRange<Dayjs>>([null, null]);
+
+  return (
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <StaticDateRangePicker
+        displayStaticWrapperAs="desktop"
+        value={value}
+        onChange={(newValue) => {
+          setValue(newValue);
+        }}
+        renderInput={(startProps, endProps) => (
+          <React.Fragment>
+            <TextField {...startProps} />
+            <Box sx={{ mx: 2 }}> to </Box>
+            <TextField {...endProps} />
+          </React.Fragment>
+        )}
+      />
+    </LocalizationProvider>
+  );
+}
diff --git a/docs/data/date-pickers/legacy-date-range-picker/StaticDateRangePickerDemo.tsx.preview b/docs/data/date-pickers/legacy-date-range-picker/StaticDateRangePickerDemo.tsx.preview
new file mode 100644
index 0000000000000..cad551c81caa5
--- /dev/null
+++ b/docs/data/date-pickers/legacy-date-range-picker/StaticDateRangePickerDemo.tsx.preview
@@ -0,0 +1,16 @@
+<LocalizationProvider dateAdapter={AdapterDayjs}>
+  <StaticDateRangePicker
+    displayStaticWrapperAs="desktop"
+    value={value}
+    onChange={(newValue) => {
+      setValue(newValue);
+    }}
+    renderInput={(startProps, endProps) => (
+      <React.Fragment>
+        <TextField {...startProps} />
+        <Box sx={{ mx: 2 }}> to </Box>
+        <TextField {...endProps} />
+      </React.Fragment>
+    )}
+  />
+</LocalizationProvider>
\ No newline at end of file
diff --git a/docs/data/date-pickers/legacy-date-range-picker/legacy-date-range-picker.md b/docs/data/date-pickers/legacy-date-range-picker/legacy-date-range-picker.md
new file mode 100644
index 0000000000000..571f5537704ba
--- /dev/null
+++ b/docs/data/date-pickers/legacy-date-range-picker/legacy-date-range-picker.md
@@ -0,0 +1,76 @@
+---
+product: date-pickers
+title: React Date Range Picker component
+components: DateRangePicker, DateRangePickerDay, DesktopDateRangePicker, MobileDateRangePicker, StaticDateRangePicker
+githubLabel: 'component: DateRangePicker'
+packageName: '@mui/x-date-pickers'
+materialDesign: https://m2.material.io/components/date-pickers
+---
+
+# Date Range Picker [<span class="plan-pro"></span>](/x/introduction/licensing/#pro-plan)
+
+<p class="description">The date range picker let the user select a range of dates.</p>
+
+:::warning
+This page describes how the legacy date range pickers work.
+If you are already using the v6 alpha or beta, we recommend you to try the [new date range pickers](/x/react-date-pickers/date-range-picker/).
+
+At the end of the v6 beta phase, the legacy date range pickers will be removed and replaced the new date range pickers
+(which will be renamed to match the current name of the legacy pickers).
+:::
+
+## Basic usage
+
+Note that you can pass almost any prop from [DatePicker](/x/react-date-pickers/legacy-date-picker/).
+
+{{"demo": "BasicDateRangePicker.js"}}
+
+## Static mode
+
+It's possible to render any picker inline. This will enable building custom popover/modal containers.
+
+{{"demo": "StaticDateRangePickerDemo.js", "bg": true}}
+
+## Responsiveness
+
+The date range picker component is designed to be optimized for the device it runs on.
+
+- The `MobileDateRangePicker` component works best for touch devices and small screens.
+- The `DesktopDateRangePicker` component works best for mouse devices and large screens.
+
+By default, the `DateRangePicker` component renders the desktop version if the media query [`@media (pointer: fine)`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pointer) matches.
+This can be customized with the `desktopModeMediaQuery` prop.
+
+There are certain caveats when testing pickers, please refer to [this section](/x/react-date-pickers/getting-started/#testing-caveats) for more information.
+
+{{"demo": "ResponsiveDateRangePicker.js"}}
+
+## Form props
+
+The date range picker component can be disabled or read-only.
+
+{{"demo": "FormPropsDateRangePickers.js"}}
+
+## Validation
+
+You can find the documentation in the [Validation page](/x/react-date-pickers/validation/)
+
+## Different number of months
+
+Note that the `calendars` prop only works in desktop mode.
+
+{{"demo": "CalendarsDateRangePicker.js"}}
+
+## Custom input component
+
+You can customize the rendered input with the `renderInput` prop. For `DateRangePicker` it takes **2** parameters – for start and end input respectively.
+If you need to render custom inputs make sure to spread `ref` and `inputProps` correctly to the input components.
+
+{{"demo": "CustomDateRangeInputs.js"}}
+
+## Customized day rendering
+
+The displayed days are customizable with the `Day` component slot.
+You can take advantage of the internal [DateRangePickerDay](/x/api/date-pickers/date-range-picker-day/) component.
+
+{{"demo": "CustomDateRangePickerDay.js"}}
diff --git a/docs/data/date-pickers/legacy-date-time-picker/BasicDateTimePicker.js b/docs/data/date-pickers/legacy-date-time-picker/BasicDateTimePicker.js
new file mode 100644
index 0000000000000..860a91e21005e
--- /dev/null
+++ b/docs/data/date-pickers/legacy-date-time-picker/BasicDateTimePicker.js
@@ -0,0 +1,23 @@
+import * as React from 'react';
+import dayjs from 'dayjs';
+import TextField from '@mui/material/TextField';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
+
+export default function BasicDateTimePicker() {
+  const [value, setValue] = React.useState(dayjs('2022-04-07'));
+
+  return (
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <DateTimePicker
+        renderInput={(props) => <TextField {...props} />}
+        label="DateTimePicker"
+        value={value}
+        onChange={(newValue) => {
+          setValue(newValue);
+        }}
+      />
+    </LocalizationProvider>
+  );
+}
diff --git a/docs/data/date-pickers/legacy-date-time-picker/BasicDateTimePicker.tsx b/docs/data/date-pickers/legacy-date-time-picker/BasicDateTimePicker.tsx
new file mode 100644
index 0000000000000..576c7684bfa84
--- /dev/null
+++ b/docs/data/date-pickers/legacy-date-time-picker/BasicDateTimePicker.tsx
@@ -0,0 +1,23 @@
+import * as React from 'react';
+import dayjs, { Dayjs } from 'dayjs';
+import TextField from '@mui/material/TextField';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
+
+export default function BasicDateTimePicker() {
+  const [value, setValue] = React.useState<Dayjs | null>(dayjs('2022-04-07'));
+
+  return (
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <DateTimePicker
+        renderInput={(props) => <TextField {...props} />}
+        label="DateTimePicker"
+        value={value}
+        onChange={(newValue) => {
+          setValue(newValue);
+        }}
+      />
+    </LocalizationProvider>
+  );
+}
diff --git a/docs/data/date-pickers/legacy-date-time-picker/BasicDateTimePicker.tsx.preview b/docs/data/date-pickers/legacy-date-time-picker/BasicDateTimePicker.tsx.preview
new file mode 100644
index 0000000000000..6f2211a515f6f
--- /dev/null
+++ b/docs/data/date-pickers/legacy-date-time-picker/BasicDateTimePicker.tsx.preview
@@ -0,0 +1,10 @@
+<LocalizationProvider dateAdapter={AdapterDayjs}>
+  <DateTimePicker
+    renderInput={(props) => <TextField {...props} />}
+    label="DateTimePicker"
+    value={value}
+    onChange={(newValue) => {
+      setValue(newValue);
+    }}
+  />
+</LocalizationProvider>
\ No newline at end of file
diff --git a/docs/data/date-pickers/legacy-date-time-picker/CustomDateTimePicker.js b/docs/data/date-pickers/legacy-date-time-picker/CustomDateTimePicker.js
new file mode 100644
index 0000000000000..53140679a3a08
--- /dev/null
+++ b/docs/data/date-pickers/legacy-date-time-picker/CustomDateTimePicker.js
@@ -0,0 +1,58 @@
+import * as React from 'react';
+import dayjs from 'dayjs';
+import AlarmIcon from '@mui/icons-material/Alarm';
+import SnoozeIcon from '@mui/icons-material/Snooze';
+import TextField from '@mui/material/TextField';
+import ClockIcon from '@mui/icons-material/AccessTime';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
+import { MobileDateTimePicker } from '@mui/x-date-pickers/MobileDateTimePicker';
+import Stack from '@mui/material/Stack';
+
+export default function CustomDateTimePicker() {
+  const [dateWithNoInitialValue, setDateWithNoInitialValue] = React.useState(null);
+  const [dateWithInitialValue, setDateWithInitialValue] = React.useState(
+    dayjs('2019-01-01T18:54'),
+  );
+
+  return (
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <Stack spacing={3}>
+        <DateTimePicker
+          openTo="hours"
+          value={dateWithInitialValue}
+          onChange={(newValue) => {
+            setDateWithInitialValue(newValue);
+          }}
+          components={{
+            LeftArrowIcon: AlarmIcon,
+            RightArrowIcon: SnoozeIcon,
+            OpenPickerIcon: ClockIcon,
+          }}
+          renderInput={(params) => (
+            <TextField {...params} helperText="Hardcoded helper text" />
+          )}
+        />
+        <MobileDateTimePicker
+          value={dateWithInitialValue}
+          onChange={(newValue) => {
+            setDateWithInitialValue(newValue);
+          }}
+          label="With error handler"
+          onError={console.log}
+          inputFormat="YYYY/MM/DD hh:mm a"
+          mask="____/__/__ __:__ _M"
+          renderInput={(params) => <TextField {...params} />}
+        />
+        <DateTimePicker
+          value={dateWithNoInitialValue}
+          onChange={(newValue) => setDateWithNoInitialValue(newValue)}
+          renderInput={(params) => (
+            <TextField {...params} helperText="Clear Initial State" />
+          )}
+        />
+      </Stack>
+    </LocalizationProvider>
+  );
+}
diff --git a/docs/data/date-pickers/legacy-date-time-picker/CustomDateTimePicker.tsx b/docs/data/date-pickers/legacy-date-time-picker/CustomDateTimePicker.tsx
new file mode 100644
index 0000000000000..c0a96cc3dce6e
--- /dev/null
+++ b/docs/data/date-pickers/legacy-date-time-picker/CustomDateTimePicker.tsx
@@ -0,0 +1,58 @@
+import * as React from 'react';
+import dayjs, { Dayjs } from 'dayjs';
+import AlarmIcon from '@mui/icons-material/Alarm';
+import SnoozeIcon from '@mui/icons-material/Snooze';
+import TextField from '@mui/material/TextField';
+import ClockIcon from '@mui/icons-material/AccessTime';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
+import { MobileDateTimePicker } from '@mui/x-date-pickers/MobileDateTimePicker';
+import Stack from '@mui/material/Stack';
+
+export default function CustomDateTimePicker() {
+  const [dateWithNoInitialValue, setDateWithNoInitialValue] =
+    React.useState<Dayjs | null>(null);
+  const [dateWithInitialValue, setDateWithInitialValue] =
+    React.useState<Dayjs | null>(dayjs('2019-01-01T18:54'));
+
+  return (
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <Stack spacing={3}>
+        <DateTimePicker
+          openTo="hours"
+          value={dateWithInitialValue}
+          onChange={(newValue) => {
+            setDateWithInitialValue(newValue);
+          }}
+          components={{
+            LeftArrowIcon: AlarmIcon,
+            RightArrowIcon: SnoozeIcon,
+            OpenPickerIcon: ClockIcon,
+          }}
+          renderInput={(params) => (
+            <TextField {...params} helperText="Hardcoded helper text" />
+          )}
+        />
+        <MobileDateTimePicker
+          value={dateWithInitialValue}
+          onChange={(newValue) => {
+            setDateWithInitialValue(newValue);
+          }}
+          label="With error handler"
+          onError={console.log}
+          inputFormat="YYYY/MM/DD hh:mm a"
+          mask="____/__/__ __:__ _M"
+          renderInput={(params) => <TextField {...params} />}
+        />
+        <DateTimePicker
+          value={dateWithNoInitialValue}
+          onChange={(newValue) => setDateWithNoInitialValue(newValue)}
+          renderInput={(params) => (
+            <TextField {...params} helperText="Clear Initial State" />
+          )}
+        />
+      </Stack>
+    </LocalizationProvider>
+  );
+}
diff --git a/docs/data/date-pickers/date-time-picker/DateTimeValidation.js b/docs/data/date-pickers/legacy-date-time-picker/DateTimeValidation.js
similarity index 100%
rename from docs/data/date-pickers/date-time-picker/DateTimeValidation.js
rename to docs/data/date-pickers/legacy-date-time-picker/DateTimeValidation.js
diff --git a/docs/data/date-pickers/date-time-picker/DateTimeValidation.tsx b/docs/data/date-pickers/legacy-date-time-picker/DateTimeValidation.tsx
similarity index 100%
rename from docs/data/date-pickers/date-time-picker/DateTimeValidation.tsx
rename to docs/data/date-pickers/legacy-date-time-picker/DateTimeValidation.tsx
diff --git a/docs/data/date-pickers/legacy-date-time-picker/FormPropsDateTimePickers.js b/docs/data/date-pickers/legacy-date-time-picker/FormPropsDateTimePickers.js
new file mode 100644
index 0000000000000..a48ceb7b1d968
--- /dev/null
+++ b/docs/data/date-pickers/legacy-date-time-picker/FormPropsDateTimePickers.js
@@ -0,0 +1,36 @@
+import * as React from 'react';
+
+import TextField from '@mui/material/TextField';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
+import Stack from '@mui/material/Stack';
+
+export default function FormPropsDateTimePickers() {
+  const [value, setValue] = React.useState(null);
+
+  return (
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <Stack spacing={3}>
+        <DateTimePicker
+          label="disabled"
+          disabled
+          value={value}
+          onChange={(newValue) => {
+            setValue(newValue);
+          }}
+          renderInput={(params) => <TextField {...params} />}
+        />
+        <DateTimePicker
+          label="read-only"
+          readOnly
+          value={value}
+          onChange={(newValue) => {
+            setValue(newValue);
+          }}
+          renderInput={(params) => <TextField {...params} />}
+        />
+      </Stack>
+    </LocalizationProvider>
+  );
+}
diff --git a/docs/data/date-pickers/legacy-date-time-picker/FormPropsDateTimePickers.tsx b/docs/data/date-pickers/legacy-date-time-picker/FormPropsDateTimePickers.tsx
new file mode 100644
index 0000000000000..4ba2a84c30dc5
--- /dev/null
+++ b/docs/data/date-pickers/legacy-date-time-picker/FormPropsDateTimePickers.tsx
@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { Dayjs } from 'dayjs';
+import TextField from '@mui/material/TextField';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
+import Stack from '@mui/material/Stack';
+
+export default function FormPropsDateTimePickers() {
+  const [value, setValue] = React.useState<Dayjs | null>(null);
+
+  return (
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <Stack spacing={3}>
+        <DateTimePicker
+          label="disabled"
+          disabled
+          value={value}
+          onChange={(newValue) => {
+            setValue(newValue);
+          }}
+          renderInput={(params) => <TextField {...params} />}
+        />
+        <DateTimePicker
+          label="read-only"
+          readOnly
+          value={value}
+          onChange={(newValue) => {
+            setValue(newValue);
+          }}
+          renderInput={(params) => <TextField {...params} />}
+        />
+      </Stack>
+    </LocalizationProvider>
+  );
+}
diff --git a/docs/data/date-pickers/legacy-date-time-picker/ResponsiveDateTimePickers.js b/docs/data/date-pickers/legacy-date-time-picker/ResponsiveDateTimePickers.js
new file mode 100644
index 0000000000000..7613049a01f6d
--- /dev/null
+++ b/docs/data/date-pickers/legacy-date-time-picker/ResponsiveDateTimePickers.js
@@ -0,0 +1,44 @@
+import * as React from 'react';
+import dayjs from 'dayjs';
+import TextField from '@mui/material/TextField';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
+import { MobileDateTimePicker } from '@mui/x-date-pickers/MobileDateTimePicker';
+import { DesktopDateTimePicker } from '@mui/x-date-pickers/DesktopDateTimePicker';
+import Stack from '@mui/material/Stack';
+
+export default function ResponsiveDateTimePickers() {
+  const [value, setValue] = React.useState(dayjs('2018-01-01T00:00:00.000Z'));
+
+  return (
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <Stack spacing={3}>
+        <MobileDateTimePicker
+          label="For mobile"
+          value={value}
+          onChange={(newValue) => {
+            setValue(newValue);
+          }}
+          renderInput={(params) => <TextField {...params} />}
+        />
+        <DesktopDateTimePicker
+          label="For desktop"
+          value={value}
+          onChange={(newValue) => {
+            setValue(newValue);
+          }}
+          renderInput={(params) => <TextField {...params} />}
+        />
+        <DateTimePicker
+          label="Responsive"
+          renderInput={(params) => <TextField {...params} />}
+          value={value}
+          onChange={(newValue) => {
+            setValue(newValue);
+          }}
+        />
+      </Stack>
+    </LocalizationProvider>
+  );
+}
diff --git a/docs/data/date-pickers/legacy-date-time-picker/ResponsiveDateTimePickers.tsx b/docs/data/date-pickers/legacy-date-time-picker/ResponsiveDateTimePickers.tsx
new file mode 100644
index 0000000000000..0333c11c9c36b
--- /dev/null
+++ b/docs/data/date-pickers/legacy-date-time-picker/ResponsiveDateTimePickers.tsx
@@ -0,0 +1,46 @@
+import * as React from 'react';
+import dayjs, { Dayjs } from 'dayjs';
+import TextField from '@mui/material/TextField';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
+import { MobileDateTimePicker } from '@mui/x-date-pickers/MobileDateTimePicker';
+import { DesktopDateTimePicker } from '@mui/x-date-pickers/DesktopDateTimePicker';
+import Stack from '@mui/material/Stack';
+
+export default function ResponsiveDateTimePickers() {
+  const [value, setValue] = React.useState<Dayjs | null>(
+    dayjs('2018-01-01T00:00:00.000Z'),
+  );
+
+  return (
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <Stack spacing={3}>
+        <MobileDateTimePicker
+          label="For mobile"
+          value={value}
+          onChange={(newValue) => {
+            setValue(newValue);
+          }}
+          renderInput={(params) => <TextField {...params} />}
+        />
+        <DesktopDateTimePicker
+          label="For desktop"
+          value={value}
+          onChange={(newValue) => {
+            setValue(newValue);
+          }}
+          renderInput={(params) => <TextField {...params} />}
+        />
+        <DateTimePicker
+          label="Responsive"
+          renderInput={(params) => <TextField {...params} />}
+          value={value}
+          onChange={(newValue) => {
+            setValue(newValue);
+          }}
+        />
+      </Stack>
+    </LocalizationProvider>
+  );
+}
diff --git a/docs/data/date-pickers/legacy-date-time-picker/StaticDateTimePickerDemo.js b/docs/data/date-pickers/legacy-date-time-picker/StaticDateTimePickerDemo.js
new file mode 100644
index 0000000000000..22c02e0ac4200
--- /dev/null
+++ b/docs/data/date-pickers/legacy-date-time-picker/StaticDateTimePickerDemo.js
@@ -0,0 +1,24 @@
+import * as React from 'react';
+import dayjs from 'dayjs';
+import TextField from '@mui/material/TextField';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { StaticDateTimePicker } from '@mui/x-date-pickers/StaticDateTimePicker';
+
+export default function StaticDateTimePickerDemo() {
+  const [value, setValue] = React.useState(dayjs('2022-04-07'));
+
+  return (
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <StaticDateTimePicker
+        displayStaticWrapperAs="desktop"
+        openTo="year"
+        value={value}
+        onChange={(newValue) => {
+          setValue(newValue);
+        }}
+        renderInput={(params) => <TextField {...params} />}
+      />
+    </LocalizationProvider>
+  );
+}
diff --git a/docs/data/date-pickers/legacy-date-time-picker/StaticDateTimePickerDemo.tsx b/docs/data/date-pickers/legacy-date-time-picker/StaticDateTimePickerDemo.tsx
new file mode 100644
index 0000000000000..40c8a552910e9
--- /dev/null
+++ b/docs/data/date-pickers/legacy-date-time-picker/StaticDateTimePickerDemo.tsx
@@ -0,0 +1,24 @@
+import * as React from 'react';
+import dayjs, { Dayjs } from 'dayjs';
+import TextField from '@mui/material/TextField';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { StaticDateTimePicker } from '@mui/x-date-pickers/StaticDateTimePicker';
+
+export default function StaticDateTimePickerDemo() {
+  const [value, setValue] = React.useState<Dayjs | null>(dayjs('2022-04-07'));
+
+  return (
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <StaticDateTimePicker
+        displayStaticWrapperAs="desktop"
+        openTo="year"
+        value={value}
+        onChange={(newValue) => {
+          setValue(newValue);
+        }}
+        renderInput={(params) => <TextField {...params} />}
+      />
+    </LocalizationProvider>
+  );
+}
diff --git a/docs/data/date-pickers/legacy-date-time-picker/StaticDateTimePickerDemo.tsx.preview b/docs/data/date-pickers/legacy-date-time-picker/StaticDateTimePickerDemo.tsx.preview
new file mode 100644
index 0000000000000..5c534f8a0d095
--- /dev/null
+++ b/docs/data/date-pickers/legacy-date-time-picker/StaticDateTimePickerDemo.tsx.preview
@@ -0,0 +1,11 @@
+<LocalizationProvider dateAdapter={AdapterDayjs}>
+  <StaticDateTimePicker
+    displayStaticWrapperAs="desktop"
+    openTo="year"
+    value={value}
+    onChange={(newValue) => {
+      setValue(newValue);
+    }}
+    renderInput={(params) => <TextField {...params} />}
+  />
+</LocalizationProvider>
\ No newline at end of file
diff --git a/docs/data/date-pickers/legacy-date-time-picker/legacy-date-time-picker.md b/docs/data/date-pickers/legacy-date-time-picker/legacy-date-time-picker.md
new file mode 100644
index 0000000000000..aff3afbbe1cf4
--- /dev/null
+++ b/docs/data/date-pickers/legacy-date-time-picker/legacy-date-time-picker.md
@@ -0,0 +1,67 @@
+---
+product: date-pickers
+title: React Date Time Picker component
+components: DateTimePicker,DesktopDateTimePicker,MobileDateTimePicker,StaticDateTimePicker
+githubLabel: 'component: DateTimePicker'
+packageName: '@mui/x-date-pickers'
+materialDesign: https://m2.material.io/components/date-pickers
+---
+
+# Date Time Picker
+
+<p class="description">This component combines the date & time pickers.</p>
+
+:::warning
+This page describes how the legacy date time pickers work.
+If you are already using the v6 alpha or beta, we recommend you to try the [new date time pickers](/x/react-date-pickers/date-time-picker/).
+
+At the end of the v6 beta phase, the legacy date time pickers will be removed and replaced the new date time pickers
+(which will be renamed to match the current name of the legacy pickers).
+:::
+
+It allows the user to select both date and time with the same control.
+
+Note that this component is the [DatePicker](/x/react-date-pickers/legacy-date-picker/) and [TimePicker](/x/react-date-pickers/legacy-time-picker/)
+component combined, so any of these components' props can be passed to the DateTimePicker.
+
+## Basic usage
+
+Allows choosing date then time. There are 4 steps available (year, date, hour, and minute), so tabs are required to visually distinguish date/time steps.
+
+{{"demo": "BasicDateTimePicker.js"}}
+
+## Responsiveness
+
+The `DateTimePicker` component is designed and optimized for the device it runs on.
+
+- The `MobileDateTimePicker` component works best for touch devices and small screens.
+- The `DesktopDateTimePicker` component works best for mouse devices and large screens.
+
+By default, the `DateTimePicker` component renders the desktop version if the media query [`@media (pointer: fine)`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pointer) matches.
+This can be customized with the `desktopModeMediaQuery` prop.
+
+There are certain caveats when testing pickers, please refer to [this section](/x/react-date-pickers/getting-started/#testing-caveats) for more information.
+
+{{"demo": "ResponsiveDateTimePickers.js"}}
+
+## Form props
+
+The date time picker component can be disabled or read-only.
+
+{{"demo": "FormPropsDateTimePickers.js"}}
+
+## Validation
+
+You can find the documentation in the [Validation page](/x/react-date-pickers/validation/)
+
+## Static mode
+
+It's possible to render any date & time picker inline. This will enable building custom popover/modal containers.
+
+{{"demo": "StaticDateTimePickerDemo.js", "bg": true}}
+
+## Customization
+
+Here are some examples of heavily customized date & time pickers:
+
+{{"demo": "CustomDateTimePicker.js"}}
diff --git a/docs/data/date-pickers/legacy-time-picker/BasicTimePicker.js b/docs/data/date-pickers/legacy-time-picker/BasicTimePicker.js
new file mode 100644
index 0000000000000..3d4c5c8dd7e89
--- /dev/null
+++ b/docs/data/date-pickers/legacy-time-picker/BasicTimePicker.js
@@ -0,0 +1,23 @@
+import * as React from 'react';
+
+import TextField from '@mui/material/TextField';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { TimePicker } from '@mui/x-date-pickers/TimePicker';
+
+export default function BasicTimePicker() {
+  const [value, setValue] = React.useState(null);
+
+  return (
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <TimePicker
+        label="Basic example"
+        value={value}
+        onChange={(newValue) => {
+          setValue(newValue);
+        }}
+        renderInput={(params) => <TextField {...params} />}
+      />
+    </LocalizationProvider>
+  );
+}
diff --git a/docs/data/date-pickers/legacy-time-picker/BasicTimePicker.tsx b/docs/data/date-pickers/legacy-time-picker/BasicTimePicker.tsx
new file mode 100644
index 0000000000000..fdb47427bfe94
--- /dev/null
+++ b/docs/data/date-pickers/legacy-time-picker/BasicTimePicker.tsx
@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { Dayjs } from 'dayjs';
+import TextField from '@mui/material/TextField';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { TimePicker } from '@mui/x-date-pickers/TimePicker';
+
+export default function BasicTimePicker() {
+  const [value, setValue] = React.useState<Dayjs | null>(null);
+
+  return (
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <TimePicker
+        label="Basic example"
+        value={value}
+        onChange={(newValue) => {
+          setValue(newValue);
+        }}
+        renderInput={(params) => <TextField {...params} />}
+      />
+    </LocalizationProvider>
+  );
+}
diff --git a/docs/data/date-pickers/legacy-time-picker/BasicTimePicker.tsx.preview b/docs/data/date-pickers/legacy-time-picker/BasicTimePicker.tsx.preview
new file mode 100644
index 0000000000000..a5381a41ce2ad
--- /dev/null
+++ b/docs/data/date-pickers/legacy-time-picker/BasicTimePicker.tsx.preview
@@ -0,0 +1,10 @@
+<LocalizationProvider dateAdapter={AdapterDayjs}>
+  <TimePicker
+    label="Basic example"
+    value={value}
+    onChange={(newValue) => {
+      setValue(newValue);
+    }}
+    renderInput={(params) => <TextField {...params} />}
+  />
+</LocalizationProvider>
\ No newline at end of file
diff --git a/docs/data/date-pickers/legacy-time-picker/FormPropsTimePickers.js b/docs/data/date-pickers/legacy-time-picker/FormPropsTimePickers.js
new file mode 100644
index 0000000000000..f23afc02c705f
--- /dev/null
+++ b/docs/data/date-pickers/legacy-time-picker/FormPropsTimePickers.js
@@ -0,0 +1,36 @@
+import * as React from 'react';
+
+import TextField from '@mui/material/TextField';
+import Stack from '@mui/material/Stack';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { TimePicker } from '@mui/x-date-pickers/TimePicker';
+
+export default function FormPropsTimePickers() {
+  const [value, setValue] = React.useState(null);
+
+  return (
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <Stack spacing={3}>
+        <TimePicker
+          label="disabled"
+          disabled
+          value={value}
+          onChange={(newValue) => {
+            setValue(newValue);
+          }}
+          renderInput={(params) => <TextField {...params} />}
+        />
+        <TimePicker
+          label="read-only"
+          readOnly
+          value={value}
+          onChange={(newValue) => {
+            setValue(newValue);
+          }}
+          renderInput={(params) => <TextField {...params} />}
+        />
+      </Stack>
+    </LocalizationProvider>
+  );
+}
diff --git a/docs/data/date-pickers/legacy-time-picker/FormPropsTimePickers.tsx b/docs/data/date-pickers/legacy-time-picker/FormPropsTimePickers.tsx
new file mode 100644
index 0000000000000..e51485fa5b88d
--- /dev/null
+++ b/docs/data/date-pickers/legacy-time-picker/FormPropsTimePickers.tsx
@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { Dayjs } from 'dayjs';
+import TextField from '@mui/material/TextField';
+import Stack from '@mui/material/Stack';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { TimePicker } from '@mui/x-date-pickers/TimePicker';
+
+export default function FormPropsTimePickers() {
+  const [value, setValue] = React.useState<Dayjs | null>(null);
+
+  return (
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <Stack spacing={3}>
+        <TimePicker
+          label="disabled"
+          disabled
+          value={value}
+          onChange={(newValue) => {
+            setValue(newValue);
+          }}
+          renderInput={(params) => <TextField {...params} />}
+        />
+        <TimePicker
+          label="read-only"
+          readOnly
+          value={value}
+          onChange={(newValue) => {
+            setValue(newValue);
+          }}
+          renderInput={(params) => <TextField {...params} />}
+        />
+      </Stack>
+    </LocalizationProvider>
+  );
+}
diff --git a/docs/data/date-pickers/legacy-time-picker/ResponsiveTimePickers.js b/docs/data/date-pickers/legacy-time-picker/ResponsiveTimePickers.js
new file mode 100644
index 0000000000000..017debcbdfe03
--- /dev/null
+++ b/docs/data/date-pickers/legacy-time-picker/ResponsiveTimePickers.js
@@ -0,0 +1,41 @@
+import * as React from 'react';
+import dayjs from 'dayjs';
+import TextField from '@mui/material/TextField';
+import Stack from '@mui/material/Stack';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { TimePicker } from '@mui/x-date-pickers/TimePicker';
+import { MobileTimePicker } from '@mui/x-date-pickers/MobileTimePicker';
+import { DesktopTimePicker } from '@mui/x-date-pickers/DesktopTimePicker';
+
+export default function ResponsiveTimePickers() {
+  const [value, setValue] = React.useState(dayjs('2018-01-01T00:00:00.000Z'));
+
+  return (
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <Stack spacing={3}>
+        <MobileTimePicker
+          label="For mobile"
+          value={value}
+          onChange={(newValue) => {
+            setValue(newValue);
+          }}
+          renderInput={(params) => <TextField {...params} />}
+        />
+        <DesktopTimePicker
+          label="For desktop"
+          value={value}
+          onChange={(newValue) => {
+            setValue(newValue);
+          }}
+          renderInput={(params) => <TextField {...params} />}
+        />
+        <TimePicker
+          value={value}
+          onChange={setValue}
+          renderInput={(params) => <TextField {...params} />}
+        />
+      </Stack>
+    </LocalizationProvider>
+  );
+}
diff --git a/docs/data/date-pickers/legacy-time-picker/ResponsiveTimePickers.tsx b/docs/data/date-pickers/legacy-time-picker/ResponsiveTimePickers.tsx
new file mode 100644
index 0000000000000..cb543e294665a
--- /dev/null
+++ b/docs/data/date-pickers/legacy-time-picker/ResponsiveTimePickers.tsx
@@ -0,0 +1,43 @@
+import * as React from 'react';
+import dayjs, { Dayjs } from 'dayjs';
+import TextField from '@mui/material/TextField';
+import Stack from '@mui/material/Stack';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { TimePicker } from '@mui/x-date-pickers/TimePicker';
+import { MobileTimePicker } from '@mui/x-date-pickers/MobileTimePicker';
+import { DesktopTimePicker } from '@mui/x-date-pickers/DesktopTimePicker';
+
+export default function ResponsiveTimePickers() {
+  const [value, setValue] = React.useState<Dayjs | null>(
+    dayjs('2018-01-01T00:00:00.000Z'),
+  );
+
+  return (
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <Stack spacing={3}>
+        <MobileTimePicker
+          label="For mobile"
+          value={value}
+          onChange={(newValue) => {
+            setValue(newValue);
+          }}
+          renderInput={(params) => <TextField {...params} />}
+        />
+        <DesktopTimePicker
+          label="For desktop"
+          value={value}
+          onChange={(newValue) => {
+            setValue(newValue);
+          }}
+          renderInput={(params) => <TextField {...params} />}
+        />
+        <TimePicker
+          value={value}
+          onChange={setValue}
+          renderInput={(params) => <TextField {...params} />}
+        />
+      </Stack>
+    </LocalizationProvider>
+  );
+}
diff --git a/docs/data/date-pickers/legacy-time-picker/SecondsTimePicker.js b/docs/data/date-pickers/legacy-time-picker/SecondsTimePicker.js
new file mode 100644
index 0000000000000..a52da79f4efcd
--- /dev/null
+++ b/docs/data/date-pickers/legacy-time-picker/SecondsTimePicker.js
@@ -0,0 +1,43 @@
+import * as React from 'react';
+import dayjs from 'dayjs';
+import TextField from '@mui/material/TextField';
+import Stack from '@mui/material/Stack';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { TimePicker } from '@mui/x-date-pickers/TimePicker';
+
+export default function SecondsTimePicker() {
+  const [value, setValue] = React.useState(dayjs('2022-04-07'));
+
+  return (
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <Stack spacing={3}>
+        <TimePicker
+          ampm={false}
+          openTo="hours"
+          views={['hours', 'minutes', 'seconds']}
+          inputFormat="HH:mm:ss"
+          mask="__:__:__"
+          label="With seconds"
+          value={value}
+          onChange={(newValue) => {
+            setValue(newValue);
+          }}
+          renderInput={(params) => <TextField {...params} />}
+        />
+        <TimePicker
+          ampmInClock
+          views={['minutes', 'seconds']}
+          inputFormat="mm:ss"
+          mask="__:__"
+          label="Minutes and seconds"
+          value={value}
+          onChange={(newValue) => {
+            setValue(newValue);
+          }}
+          renderInput={(params) => <TextField {...params} />}
+        />
+      </Stack>
+    </LocalizationProvider>
+  );
+}
diff --git a/docs/data/date-pickers/legacy-time-picker/SecondsTimePicker.tsx b/docs/data/date-pickers/legacy-time-picker/SecondsTimePicker.tsx
new file mode 100644
index 0000000000000..6bc7cbbc47072
--- /dev/null
+++ b/docs/data/date-pickers/legacy-time-picker/SecondsTimePicker.tsx
@@ -0,0 +1,43 @@
+import * as React from 'react';
+import dayjs, { Dayjs } from 'dayjs';
+import TextField from '@mui/material/TextField';
+import Stack from '@mui/material/Stack';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { TimePicker } from '@mui/x-date-pickers/TimePicker';
+
+export default function SecondsTimePicker() {
+  const [value, setValue] = React.useState<Dayjs | null>(dayjs('2022-04-07'));
+
+  return (
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <Stack spacing={3}>
+        <TimePicker
+          ampm={false}
+          openTo="hours"
+          views={['hours', 'minutes', 'seconds']}
+          inputFormat="HH:mm:ss"
+          mask="__:__:__"
+          label="With seconds"
+          value={value}
+          onChange={(newValue) => {
+            setValue(newValue);
+          }}
+          renderInput={(params) => <TextField {...params} />}
+        />
+        <TimePicker
+          ampmInClock
+          views={['minutes', 'seconds']}
+          inputFormat="mm:ss"
+          mask="__:__"
+          label="Minutes and seconds"
+          value={value}
+          onChange={(newValue) => {
+            setValue(newValue);
+          }}
+          renderInput={(params) => <TextField {...params} />}
+        />
+      </Stack>
+    </LocalizationProvider>
+  );
+}
diff --git a/docs/data/date-pickers/legacy-time-picker/StaticTimePickerDemo.js b/docs/data/date-pickers/legacy-time-picker/StaticTimePickerDemo.js
new file mode 100644
index 0000000000000..0f1a8fa439e2e
--- /dev/null
+++ b/docs/data/date-pickers/legacy-time-picker/StaticTimePickerDemo.js
@@ -0,0 +1,23 @@
+import * as React from 'react';
+import dayjs from 'dayjs';
+import TextField from '@mui/material/TextField';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { StaticTimePicker } from '@mui/x-date-pickers/StaticTimePicker';
+
+export default function StaticTimePickerDemo() {
+  const [value, setValue] = React.useState(dayjs('2022-04-07'));
+
+  return (
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <StaticTimePicker
+        displayStaticWrapperAs="mobile"
+        value={value}
+        onChange={(newValue) => {
+          setValue(newValue);
+        }}
+        renderInput={(params) => <TextField {...params} />}
+      />
+    </LocalizationProvider>
+  );
+}
diff --git a/docs/data/date-pickers/legacy-time-picker/StaticTimePickerDemo.tsx b/docs/data/date-pickers/legacy-time-picker/StaticTimePickerDemo.tsx
new file mode 100644
index 0000000000000..4e246c98b9990
--- /dev/null
+++ b/docs/data/date-pickers/legacy-time-picker/StaticTimePickerDemo.tsx
@@ -0,0 +1,23 @@
+import * as React from 'react';
+import dayjs, { Dayjs } from 'dayjs';
+import TextField from '@mui/material/TextField';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { StaticTimePicker } from '@mui/x-date-pickers/StaticTimePicker';
+
+export default function StaticTimePickerDemo() {
+  const [value, setValue] = React.useState<Dayjs | null>(dayjs('2022-04-07'));
+
+  return (
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <StaticTimePicker
+        displayStaticWrapperAs="mobile"
+        value={value}
+        onChange={(newValue) => {
+          setValue(newValue);
+        }}
+        renderInput={(params) => <TextField {...params} />}
+      />
+    </LocalizationProvider>
+  );
+}
diff --git a/docs/data/date-pickers/legacy-time-picker/StaticTimePickerDemo.tsx.preview b/docs/data/date-pickers/legacy-time-picker/StaticTimePickerDemo.tsx.preview
new file mode 100644
index 0000000000000..a408fc4bd1f02
--- /dev/null
+++ b/docs/data/date-pickers/legacy-time-picker/StaticTimePickerDemo.tsx.preview
@@ -0,0 +1,10 @@
+<LocalizationProvider dateAdapter={AdapterDayjs}>
+  <StaticTimePicker
+    displayStaticWrapperAs="mobile"
+    value={value}
+    onChange={(newValue) => {
+      setValue(newValue);
+    }}
+    renderInput={(params) => <TextField {...params} />}
+  />
+</LocalizationProvider>
\ No newline at end of file
diff --git a/docs/data/date-pickers/legacy-time-picker/StaticTimePickerLandscape.js b/docs/data/date-pickers/legacy-time-picker/StaticTimePickerLandscape.js
new file mode 100644
index 0000000000000..e221d605b2759
--- /dev/null
+++ b/docs/data/date-pickers/legacy-time-picker/StaticTimePickerLandscape.js
@@ -0,0 +1,25 @@
+import * as React from 'react';
+import dayjs from 'dayjs';
+import TextField from '@mui/material/TextField';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { StaticTimePicker } from '@mui/x-date-pickers/StaticTimePicker';
+
+export default function StaticTimePickerLandscape() {
+  const [value, setValue] = React.useState(dayjs('2022-04-07'));
+
+  return (
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <StaticTimePicker
+        ampm
+        orientation="landscape"
+        openTo="minutes"
+        value={value}
+        onChange={(newValue) => {
+          setValue(newValue);
+        }}
+        renderInput={(params) => <TextField {...params} />}
+      />
+    </LocalizationProvider>
+  );
+}
diff --git a/docs/data/date-pickers/legacy-time-picker/StaticTimePickerLandscape.tsx b/docs/data/date-pickers/legacy-time-picker/StaticTimePickerLandscape.tsx
new file mode 100644
index 0000000000000..1c2fc72010510
--- /dev/null
+++ b/docs/data/date-pickers/legacy-time-picker/StaticTimePickerLandscape.tsx
@@ -0,0 +1,25 @@
+import * as React from 'react';
+import dayjs, { Dayjs } from 'dayjs';
+import TextField from '@mui/material/TextField';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { StaticTimePicker } from '@mui/x-date-pickers/StaticTimePicker';
+
+export default function StaticTimePickerLandscape() {
+  const [value, setValue] = React.useState<Dayjs | null>(dayjs('2022-04-07'));
+
+  return (
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <StaticTimePicker
+        ampm
+        orientation="landscape"
+        openTo="minutes"
+        value={value}
+        onChange={(newValue) => {
+          setValue(newValue);
+        }}
+        renderInput={(params) => <TextField {...params} />}
+      />
+    </LocalizationProvider>
+  );
+}
diff --git a/docs/data/date-pickers/legacy-time-picker/StaticTimePickerLandscape.tsx.preview b/docs/data/date-pickers/legacy-time-picker/StaticTimePickerLandscape.tsx.preview
new file mode 100644
index 0000000000000..b18b80c84fefd
--- /dev/null
+++ b/docs/data/date-pickers/legacy-time-picker/StaticTimePickerLandscape.tsx.preview
@@ -0,0 +1,12 @@
+<LocalizationProvider dateAdapter={AdapterDayjs}>
+  <StaticTimePicker
+    ampm
+    orientation="landscape"
+    openTo="minutes"
+    value={value}
+    onChange={(newValue) => {
+      setValue(newValue);
+    }}
+    renderInput={(params) => <TextField {...params} />}
+  />
+</LocalizationProvider>
\ No newline at end of file
diff --git a/docs/data/date-pickers/legacy-time-picker/SubComponentsTimeCalendars.js b/docs/data/date-pickers/legacy-time-picker/SubComponentsTimeCalendars.js
new file mode 100644
index 0000000000000..fcb54d2699f76
--- /dev/null
+++ b/docs/data/date-pickers/legacy-time-picker/SubComponentsTimeCalendars.js
@@ -0,0 +1,15 @@
+import * as React from 'react';
+import dayjs from 'dayjs';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { TimeClock } from '@mui/x-date-pickers/TimeClock';
+
+export default function SubComponentsTimeCalendars() {
+  const [value, setValue] = React.useState(dayjs('2022-04-07T10:15'));
+
+  return (
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <TimeClock value={value} onChange={(newValue) => setValue(newValue)} />
+    </LocalizationProvider>
+  );
+}
diff --git a/docs/data/date-pickers/legacy-time-picker/SubComponentsTimeCalendars.tsx b/docs/data/date-pickers/legacy-time-picker/SubComponentsTimeCalendars.tsx
new file mode 100644
index 0000000000000..13113b2bf1e11
--- /dev/null
+++ b/docs/data/date-pickers/legacy-time-picker/SubComponentsTimeCalendars.tsx
@@ -0,0 +1,15 @@
+import * as React from 'react';
+import dayjs, { Dayjs } from 'dayjs';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { TimeClock } from '@mui/x-date-pickers/TimeClock';
+
+export default function SubComponentsTimeCalendars() {
+  const [value, setValue] = React.useState<Dayjs | null>(dayjs('2022-04-07T10:15'));
+
+  return (
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <TimeClock value={value} onChange={(newValue) => setValue(newValue)} />
+    </LocalizationProvider>
+  );
+}
diff --git a/docs/data/date-pickers/legacy-time-picker/SubComponentsTimeCalendars.tsx.preview b/docs/data/date-pickers/legacy-time-picker/SubComponentsTimeCalendars.tsx.preview
new file mode 100644
index 0000000000000..642edffbc4b6b
--- /dev/null
+++ b/docs/data/date-pickers/legacy-time-picker/SubComponentsTimeCalendars.tsx.preview
@@ -0,0 +1,3 @@
+<LocalizationProvider dateAdapter={AdapterDayjs}>
+  <TimeClock value={value} onChange={(newValue) => setValue(newValue)} />
+</LocalizationProvider>
\ No newline at end of file
diff --git a/docs/data/date-pickers/time-picker/TimeValidationTimePicker.js b/docs/data/date-pickers/legacy-time-picker/TimeValidationTimePicker.js
similarity index 100%
rename from docs/data/date-pickers/time-picker/TimeValidationTimePicker.js
rename to docs/data/date-pickers/legacy-time-picker/TimeValidationTimePicker.js
diff --git a/docs/data/date-pickers/time-picker/TimeValidationTimePicker.tsx b/docs/data/date-pickers/legacy-time-picker/TimeValidationTimePicker.tsx
similarity index 100%
rename from docs/data/date-pickers/time-picker/TimeValidationTimePicker.tsx
rename to docs/data/date-pickers/legacy-time-picker/TimeValidationTimePicker.tsx
diff --git a/docs/data/date-pickers/legacy-time-picker/legacy-time-picker.md b/docs/data/date-pickers/legacy-time-picker/legacy-time-picker.md
new file mode 100644
index 0000000000000..0c16b1c75fcb4
--- /dev/null
+++ b/docs/data/date-pickers/legacy-time-picker/legacy-time-picker.md
@@ -0,0 +1,74 @@
+---
+product: date-pickers
+title: React Time Picker component
+components: DesktopTimePicker, MobileTimePicker, StaticTimePicker, TimePicker, ClockPicker
+githubLabel: 'component: TimePicker'
+packageName: '@mui/x-date-pickers'
+materialDesign: https://m2.material.io/components/time-pickers
+---
+
+# Time Picker
+
+<p class="description">Time pickers allow the user to select a single time.</p>
+
+:::warning
+This page describes how the legacy time pickers work.
+If you are already using the v6 alpha or beta, we recommend you to try the [new time pickers](/x/react-date-pickers/time-picker/).
+
+At the end of the v6 beta phase, the legacy time pickers will be removed and replaced the new time pickers
+(which will be renamed to match the current name of the legacy pickers).
+:::
+
+The selected time is indicated by the filled circle at the end of the clock hand.
+
+## Basic usage
+
+The time picker is rendered as a modal dialog on mobile, and a textbox with a popup on desktop.
+
+{{"demo": "BasicTimePicker.js"}}
+
+## Static mode
+
+It's possible to render any time picker inline. This will enable building custom popover/modal containers.
+
+{{"demo": "StaticTimePickerDemo.js", "bg": true}}
+
+## Responsiveness
+
+The time picker component is designed and optimized for the device it runs on.
+
+- The `MobileTimePicker` component works best for touch devices and small screens.
+- The `DesktopTimePicker` component works best for mouse devices and large screens.
+
+By default, the `TimePicker` component renders the desktop version if the media query [`@media (pointer: fine)`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pointer) matches.
+This can be customized with the `desktopModeMediaQuery` prop.
+
+There are certain caveats when testing pickers, please refer to [this section](/x/react-date-pickers/getting-started/#testing-caveats) for more information.
+
+{{"demo": "ResponsiveTimePickers.js"}}
+
+## Form props
+
+The time picker component can be disabled or read-only.
+
+{{"demo": "FormPropsTimePickers.js"}}
+
+## Validation
+
+You can find the documentation in the [Validation page](/x/react-date-pickers/validation/)
+
+## Landscape
+
+{{"demo": "StaticTimePickerLandscape.js", "bg": true}}
+
+## Sub-components
+
+Some lower-level sub-components (`ClockPicker`) are also exported.
+
+{{"demo": "SubComponentsTimeCalendars.js"}}
+
+## Seconds
+
+The seconds input can be used for selection of a precise time point.
+
+{{"demo": "SecondsTimePicker.js"}}
diff --git a/docs/data/date-pickers/time-picker/BasicTimePicker.js b/docs/data/date-pickers/time-picker/BasicTimePicker.js
index 3d4c5c8dd7e89..0e60ca6f6c0e4 100644
--- a/docs/data/date-pickers/time-picker/BasicTimePicker.js
+++ b/docs/data/date-pickers/time-picker/BasicTimePicker.js
@@ -1,23 +1,12 @@
 import * as React from 'react';
-
-import TextField from '@mui/material/TextField';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
-import { TimePicker } from '@mui/x-date-pickers/TimePicker';
+import { Unstable_NextTimePicker as NextTimePicker } from '@mui/x-date-pickers/NextTimePicker';
 
 export default function BasicTimePicker() {
-  const [value, setValue] = React.useState(null);
-
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs}>
-      <TimePicker
-        label="Basic example"
-        value={value}
-        onChange={(newValue) => {
-          setValue(newValue);
-        }}
-        renderInput={(params) => <TextField {...params} />}
-      />
+      <NextTimePicker label="Basic time picker" />
     </LocalizationProvider>
   );
 }
diff --git a/docs/data/date-pickers/time-picker/BasicTimePicker.tsx b/docs/data/date-pickers/time-picker/BasicTimePicker.tsx
index fdb47427bfe94..0e60ca6f6c0e4 100644
--- a/docs/data/date-pickers/time-picker/BasicTimePicker.tsx
+++ b/docs/data/date-pickers/time-picker/BasicTimePicker.tsx
@@ -1,23 +1,12 @@
 import * as React from 'react';
-import { Dayjs } from 'dayjs';
-import TextField from '@mui/material/TextField';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
-import { TimePicker } from '@mui/x-date-pickers/TimePicker';
+import { Unstable_NextTimePicker as NextTimePicker } from '@mui/x-date-pickers/NextTimePicker';
 
 export default function BasicTimePicker() {
-  const [value, setValue] = React.useState<Dayjs | null>(null);
-
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs}>
-      <TimePicker
-        label="Basic example"
-        value={value}
-        onChange={(newValue) => {
-          setValue(newValue);
-        }}
-        renderInput={(params) => <TextField {...params} />}
-      />
+      <NextTimePicker label="Basic time picker" />
     </LocalizationProvider>
   );
 }
diff --git a/docs/data/date-pickers/time-picker/BasicTimePicker.tsx.preview b/docs/data/date-pickers/time-picker/BasicTimePicker.tsx.preview
index a5381a41ce2ad..a726ce627d671 100644
--- a/docs/data/date-pickers/time-picker/BasicTimePicker.tsx.preview
+++ b/docs/data/date-pickers/time-picker/BasicTimePicker.tsx.preview
@@ -1,10 +1,3 @@
 <LocalizationProvider dateAdapter={AdapterDayjs}>
-  <TimePicker
-    label="Basic example"
-    value={value}
-    onChange={(newValue) => {
-      setValue(newValue);
-    }}
-    renderInput={(params) => <TextField {...params} />}
-  />
+  <NextTimePicker label="Basic time picker" />
 </LocalizationProvider>
\ No newline at end of file
diff --git a/docs/data/date-pickers/time-picker/FormPropsTimePickers.js b/docs/data/date-pickers/time-picker/FormPropsTimePickers.js
index f23afc02c705f..f608ead57a470 100644
--- a/docs/data/date-pickers/time-picker/FormPropsTimePickers.js
+++ b/docs/data/date-pickers/time-picker/FormPropsTimePickers.js
@@ -1,35 +1,15 @@
 import * as React from 'react';
-
-import TextField from '@mui/material/TextField';
 import Stack from '@mui/material/Stack';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
-import { TimePicker } from '@mui/x-date-pickers/TimePicker';
+import { Unstable_NextTimePicker as NextTimePicker } from '@mui/x-date-pickers/NextTimePicker';
 
 export default function FormPropsTimePickers() {
-  const [value, setValue] = React.useState(null);
-
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs}>
       <Stack spacing={3}>
-        <TimePicker
-          label="disabled"
-          disabled
-          value={value}
-          onChange={(newValue) => {
-            setValue(newValue);
-          }}
-          renderInput={(params) => <TextField {...params} />}
-        />
-        <TimePicker
-          label="read-only"
-          readOnly
-          value={value}
-          onChange={(newValue) => {
-            setValue(newValue);
-          }}
-          renderInput={(params) => <TextField {...params} />}
-        />
+        <NextTimePicker label="disabled" disabled />
+        <NextTimePicker label="readOnly" readOnly />
       </Stack>
     </LocalizationProvider>
   );
diff --git a/docs/data/date-pickers/time-picker/FormPropsTimePickers.tsx b/docs/data/date-pickers/time-picker/FormPropsTimePickers.tsx
index e51485fa5b88d..f608ead57a470 100644
--- a/docs/data/date-pickers/time-picker/FormPropsTimePickers.tsx
+++ b/docs/data/date-pickers/time-picker/FormPropsTimePickers.tsx
@@ -1,35 +1,15 @@
 import * as React from 'react';
-import { Dayjs } from 'dayjs';
-import TextField from '@mui/material/TextField';
 import Stack from '@mui/material/Stack';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
-import { TimePicker } from '@mui/x-date-pickers/TimePicker';
+import { Unstable_NextTimePicker as NextTimePicker } from '@mui/x-date-pickers/NextTimePicker';
 
 export default function FormPropsTimePickers() {
-  const [value, setValue] = React.useState<Dayjs | null>(null);
-
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs}>
       <Stack spacing={3}>
-        <TimePicker
-          label="disabled"
-          disabled
-          value={value}
-          onChange={(newValue) => {
-            setValue(newValue);
-          }}
-          renderInput={(params) => <TextField {...params} />}
-        />
-        <TimePicker
-          label="read-only"
-          readOnly
-          value={value}
-          onChange={(newValue) => {
-            setValue(newValue);
-          }}
-          renderInput={(params) => <TextField {...params} />}
-        />
+        <NextTimePicker label="disabled" disabled />
+        <NextTimePicker label="readOnly" readOnly />
       </Stack>
     </LocalizationProvider>
   );
diff --git a/docs/data/date-pickers/time-picker/FormPropsTimePickers.tsx.preview b/docs/data/date-pickers/time-picker/FormPropsTimePickers.tsx.preview
new file mode 100644
index 0000000000000..763851d67b2b9
--- /dev/null
+++ b/docs/data/date-pickers/time-picker/FormPropsTimePickers.tsx.preview
@@ -0,0 +1,6 @@
+<LocalizationProvider dateAdapter={AdapterDayjs}>
+  <Stack spacing={3}>
+    <NextTimePicker label="disabled" disabled />
+    <NextTimePicker label="readOnly" readOnly />
+  </Stack>
+</LocalizationProvider>
\ No newline at end of file
diff --git a/docs/data/date-pickers/time-picker/ResponsiveTimePickers.js b/docs/data/date-pickers/time-picker/ResponsiveTimePickers.js
index 017debcbdfe03..f4b11565f0e8c 100644
--- a/docs/data/date-pickers/time-picker/ResponsiveTimePickers.js
+++ b/docs/data/date-pickers/time-picker/ResponsiveTimePickers.js
@@ -1,39 +1,27 @@
 import * as React from 'react';
 import dayjs from 'dayjs';
-import TextField from '@mui/material/TextField';
 import Stack from '@mui/material/Stack';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
-import { TimePicker } from '@mui/x-date-pickers/TimePicker';
-import { MobileTimePicker } from '@mui/x-date-pickers/MobileTimePicker';
-import { DesktopTimePicker } from '@mui/x-date-pickers/DesktopTimePicker';
+import { Unstable_NextTimePicker as NextTimePicker } from '@mui/x-date-pickers/NextTimePicker';
+import { Unstable_MobileNextTimePicker as MobileNextTimePicker } from '@mui/x-date-pickers/MobileNextTimePicker';
+import { Unstable_DesktopNextTimePicker as DesktopNextTimePicker } from '@mui/x-date-pickers/DesktopNextTimePicker';
 
 export default function ResponsiveTimePickers() {
-  const [value, setValue] = React.useState(dayjs('2018-01-01T00:00:00.000Z'));
-
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs}>
       <Stack spacing={3}>
-        <MobileTimePicker
+        <MobileNextTimePicker
           label="For mobile"
-          value={value}
-          onChange={(newValue) => {
-            setValue(newValue);
-          }}
-          renderInput={(params) => <TextField {...params} />}
+          defaultValue={dayjs('2022-04-07T15:30')}
         />
-        <DesktopTimePicker
+        <DesktopNextTimePicker
           label="For desktop"
-          value={value}
-          onChange={(newValue) => {
-            setValue(newValue);
-          }}
-          renderInput={(params) => <TextField {...params} />}
+          defaultValue={dayjs('2022-04-07T15:30')}
         />
-        <TimePicker
-          value={value}
-          onChange={setValue}
-          renderInput={(params) => <TextField {...params} />}
+        <NextTimePicker
+          label="Responsive"
+          defaultValue={dayjs('2022-04-07T15:30')}
         />
       </Stack>
     </LocalizationProvider>
diff --git a/docs/data/date-pickers/time-picker/ResponsiveTimePickers.tsx b/docs/data/date-pickers/time-picker/ResponsiveTimePickers.tsx
index cb543e294665a..f4b11565f0e8c 100644
--- a/docs/data/date-pickers/time-picker/ResponsiveTimePickers.tsx
+++ b/docs/data/date-pickers/time-picker/ResponsiveTimePickers.tsx
@@ -1,41 +1,27 @@
 import * as React from 'react';
-import dayjs, { Dayjs } from 'dayjs';
-import TextField from '@mui/material/TextField';
+import dayjs from 'dayjs';
 import Stack from '@mui/material/Stack';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
-import { TimePicker } from '@mui/x-date-pickers/TimePicker';
-import { MobileTimePicker } from '@mui/x-date-pickers/MobileTimePicker';
-import { DesktopTimePicker } from '@mui/x-date-pickers/DesktopTimePicker';
+import { Unstable_NextTimePicker as NextTimePicker } from '@mui/x-date-pickers/NextTimePicker';
+import { Unstable_MobileNextTimePicker as MobileNextTimePicker } from '@mui/x-date-pickers/MobileNextTimePicker';
+import { Unstable_DesktopNextTimePicker as DesktopNextTimePicker } from '@mui/x-date-pickers/DesktopNextTimePicker';
 
 export default function ResponsiveTimePickers() {
-  const [value, setValue] = React.useState<Dayjs | null>(
-    dayjs('2018-01-01T00:00:00.000Z'),
-  );
-
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs}>
       <Stack spacing={3}>
-        <MobileTimePicker
+        <MobileNextTimePicker
           label="For mobile"
-          value={value}
-          onChange={(newValue) => {
-            setValue(newValue);
-          }}
-          renderInput={(params) => <TextField {...params} />}
+          defaultValue={dayjs('2022-04-07T15:30')}
         />
-        <DesktopTimePicker
+        <DesktopNextTimePicker
           label="For desktop"
-          value={value}
-          onChange={(newValue) => {
-            setValue(newValue);
-          }}
-          renderInput={(params) => <TextField {...params} />}
+          defaultValue={dayjs('2022-04-07T15:30')}
         />
-        <TimePicker
-          value={value}
-          onChange={setValue}
-          renderInput={(params) => <TextField {...params} />}
+        <NextTimePicker
+          label="Responsive"
+          defaultValue={dayjs('2022-04-07T15:30')}
         />
       </Stack>
     </LocalizationProvider>
diff --git a/docs/data/date-pickers/time-picker/ResponsiveTimePickers.tsx.preview b/docs/data/date-pickers/time-picker/ResponsiveTimePickers.tsx.preview
new file mode 100644
index 0000000000000..1cf7a8c6c4e7f
--- /dev/null
+++ b/docs/data/date-pickers/time-picker/ResponsiveTimePickers.tsx.preview
@@ -0,0 +1,16 @@
+<LocalizationProvider dateAdapter={AdapterDayjs}>
+  <Stack spacing={3}>
+    <MobileNextTimePicker
+      label="For mobile"
+      defaultValue={dayjs('2022-04-07T15:30')}
+    />
+    <DesktopNextTimePicker
+      label="For desktop"
+      defaultValue={dayjs('2022-04-07T15:30')}
+    />
+    <NextTimePicker
+      label="Responsive"
+      defaultValue={dayjs('2022-04-07T15:30')}
+    />
+  </Stack>
+</LocalizationProvider>
\ No newline at end of file
diff --git a/docs/data/date-pickers/time-picker/SecondsTimePicker.js b/docs/data/date-pickers/time-picker/SecondsTimePicker.js
index a52da79f4efcd..bc64da1f7d677 100644
--- a/docs/data/date-pickers/time-picker/SecondsTimePicker.js
+++ b/docs/data/date-pickers/time-picker/SecondsTimePicker.js
@@ -1,41 +1,26 @@
 import * as React from 'react';
 import dayjs from 'dayjs';
-import TextField from '@mui/material/TextField';
 import Stack from '@mui/material/Stack';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
-import { TimePicker } from '@mui/x-date-pickers/TimePicker';
+import { Unstable_NextTimePicker as NextTimePicker } from '@mui/x-date-pickers/NextTimePicker';
 
 export default function SecondsTimePicker() {
-  const [value, setValue] = React.useState(dayjs('2022-04-07'));
-
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs}>
       <Stack spacing={3}>
-        <TimePicker
-          ampm={false}
-          openTo="hours"
+        <NextTimePicker
+          label="Hours, minutes and seconds"
           views={['hours', 'minutes', 'seconds']}
-          inputFormat="HH:mm:ss"
-          mask="__:__:__"
-          label="With seconds"
-          value={value}
-          onChange={(newValue) => {
-            setValue(newValue);
-          }}
-          renderInput={(params) => <TextField {...params} />}
+          format="HH:mm:ss"
+          defaultValue={dayjs('2022-04-07T15:30:10')}
         />
-        <TimePicker
+        <NextTimePicker
+          label="Minutes and seconds"
           ampmInClock
           views={['minutes', 'seconds']}
-          inputFormat="mm:ss"
-          mask="__:__"
-          label="Minutes and seconds"
-          value={value}
-          onChange={(newValue) => {
-            setValue(newValue);
-          }}
-          renderInput={(params) => <TextField {...params} />}
+          format="mm:ss"
+          defaultValue={dayjs('2022-04-07T15:30:10')}
         />
       </Stack>
     </LocalizationProvider>
diff --git a/docs/data/date-pickers/time-picker/SecondsTimePicker.tsx b/docs/data/date-pickers/time-picker/SecondsTimePicker.tsx
index 6bc7cbbc47072..bc64da1f7d677 100644
--- a/docs/data/date-pickers/time-picker/SecondsTimePicker.tsx
+++ b/docs/data/date-pickers/time-picker/SecondsTimePicker.tsx
@@ -1,41 +1,26 @@
 import * as React from 'react';
-import dayjs, { Dayjs } from 'dayjs';
-import TextField from '@mui/material/TextField';
+import dayjs from 'dayjs';
 import Stack from '@mui/material/Stack';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
-import { TimePicker } from '@mui/x-date-pickers/TimePicker';
+import { Unstable_NextTimePicker as NextTimePicker } from '@mui/x-date-pickers/NextTimePicker';
 
 export default function SecondsTimePicker() {
-  const [value, setValue] = React.useState<Dayjs | null>(dayjs('2022-04-07'));
-
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs}>
       <Stack spacing={3}>
-        <TimePicker
-          ampm={false}
-          openTo="hours"
+        <NextTimePicker
+          label="Hours, minutes and seconds"
           views={['hours', 'minutes', 'seconds']}
-          inputFormat="HH:mm:ss"
-          mask="__:__:__"
-          label="With seconds"
-          value={value}
-          onChange={(newValue) => {
-            setValue(newValue);
-          }}
-          renderInput={(params) => <TextField {...params} />}
+          format="HH:mm:ss"
+          defaultValue={dayjs('2022-04-07T15:30:10')}
         />
-        <TimePicker
+        <NextTimePicker
+          label="Minutes and seconds"
           ampmInClock
           views={['minutes', 'seconds']}
-          inputFormat="mm:ss"
-          mask="__:__"
-          label="Minutes and seconds"
-          value={value}
-          onChange={(newValue) => {
-            setValue(newValue);
-          }}
-          renderInput={(params) => <TextField {...params} />}
+          format="mm:ss"
+          defaultValue={dayjs('2022-04-07T15:30:10')}
         />
       </Stack>
     </LocalizationProvider>
diff --git a/docs/data/date-pickers/time-picker/StaticTimePickerDemo.js b/docs/data/date-pickers/time-picker/StaticTimePickerDemo.js
index 0f1a8fa439e2e..a0f58f08ff0b2 100644
--- a/docs/data/date-pickers/time-picker/StaticTimePickerDemo.js
+++ b/docs/data/date-pickers/time-picker/StaticTimePickerDemo.js
@@ -1,23 +1,13 @@
 import * as React from 'react';
 import dayjs from 'dayjs';
-import TextField from '@mui/material/TextField';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
-import { StaticTimePicker } from '@mui/x-date-pickers/StaticTimePicker';
+import { Unstable_StaticNextTimePicker as StaticNextTimePicker } from '@mui/x-date-pickers/StaticNextTimePicker';
 
 export default function StaticTimePickerDemo() {
-  const [value, setValue] = React.useState(dayjs('2022-04-07'));
-
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs}>
-      <StaticTimePicker
-        displayStaticWrapperAs="mobile"
-        value={value}
-        onChange={(newValue) => {
-          setValue(newValue);
-        }}
-        renderInput={(params) => <TextField {...params} />}
-      />
+      <StaticNextTimePicker defaultValue={dayjs('2022-04-07')} />
     </LocalizationProvider>
   );
 }
diff --git a/docs/data/date-pickers/time-picker/StaticTimePickerDemo.tsx b/docs/data/date-pickers/time-picker/StaticTimePickerDemo.tsx
index 4e246c98b9990..a0f58f08ff0b2 100644
--- a/docs/data/date-pickers/time-picker/StaticTimePickerDemo.tsx
+++ b/docs/data/date-pickers/time-picker/StaticTimePickerDemo.tsx
@@ -1,23 +1,13 @@
 import * as React from 'react';
-import dayjs, { Dayjs } from 'dayjs';
-import TextField from '@mui/material/TextField';
+import dayjs from 'dayjs';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
-import { StaticTimePicker } from '@mui/x-date-pickers/StaticTimePicker';
+import { Unstable_StaticNextTimePicker as StaticNextTimePicker } from '@mui/x-date-pickers/StaticNextTimePicker';
 
 export default function StaticTimePickerDemo() {
-  const [value, setValue] = React.useState<Dayjs | null>(dayjs('2022-04-07'));
-
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs}>
-      <StaticTimePicker
-        displayStaticWrapperAs="mobile"
-        value={value}
-        onChange={(newValue) => {
-          setValue(newValue);
-        }}
-        renderInput={(params) => <TextField {...params} />}
-      />
+      <StaticNextTimePicker defaultValue={dayjs('2022-04-07')} />
     </LocalizationProvider>
   );
 }
diff --git a/docs/data/date-pickers/time-picker/StaticTimePickerDemo.tsx.preview b/docs/data/date-pickers/time-picker/StaticTimePickerDemo.tsx.preview
index a408fc4bd1f02..17ec25a24989b 100644
--- a/docs/data/date-pickers/time-picker/StaticTimePickerDemo.tsx.preview
+++ b/docs/data/date-pickers/time-picker/StaticTimePickerDemo.tsx.preview
@@ -1,10 +1,3 @@
 <LocalizationProvider dateAdapter={AdapterDayjs}>
-  <StaticTimePicker
-    displayStaticWrapperAs="mobile"
-    value={value}
-    onChange={(newValue) => {
-      setValue(newValue);
-    }}
-    renderInput={(params) => <TextField {...params} />}
-  />
+  <StaticNextTimePicker defaultValue={dayjs('2022-04-07')} />
 </LocalizationProvider>
\ No newline at end of file
diff --git a/docs/data/date-pickers/time-picker/StaticTimePickerLandscape.js b/docs/data/date-pickers/time-picker/StaticTimePickerLandscape.js
index e221d605b2759..67a1e0f83e163 100644
--- a/docs/data/date-pickers/time-picker/StaticTimePickerLandscape.js
+++ b/docs/data/date-pickers/time-picker/StaticTimePickerLandscape.js
@@ -1,24 +1,17 @@
 import * as React from 'react';
 import dayjs from 'dayjs';
-import TextField from '@mui/material/TextField';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
-import { StaticTimePicker } from '@mui/x-date-pickers/StaticTimePicker';
+import { Unstable_StaticNextTimePicker as StaticNextTimePicker } from '@mui/x-date-pickers/StaticNextTimePicker';
 
 export default function StaticTimePickerLandscape() {
-  const [value, setValue] = React.useState(dayjs('2022-04-07'));
-
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs}>
-      <StaticTimePicker
+      <StaticNextTimePicker
         ampm
         orientation="landscape"
         openTo="minutes"
-        value={value}
-        onChange={(newValue) => {
-          setValue(newValue);
-        }}
-        renderInput={(params) => <TextField {...params} />}
+        defaultValue={dayjs('2022-04-07')}
       />
     </LocalizationProvider>
   );
diff --git a/docs/data/date-pickers/time-picker/StaticTimePickerLandscape.tsx b/docs/data/date-pickers/time-picker/StaticTimePickerLandscape.tsx
index 1c2fc72010510..67a1e0f83e163 100644
--- a/docs/data/date-pickers/time-picker/StaticTimePickerLandscape.tsx
+++ b/docs/data/date-pickers/time-picker/StaticTimePickerLandscape.tsx
@@ -1,24 +1,17 @@
 import * as React from 'react';
-import dayjs, { Dayjs } from 'dayjs';
-import TextField from '@mui/material/TextField';
+import dayjs from 'dayjs';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
-import { StaticTimePicker } from '@mui/x-date-pickers/StaticTimePicker';
+import { Unstable_StaticNextTimePicker as StaticNextTimePicker } from '@mui/x-date-pickers/StaticNextTimePicker';
 
 export default function StaticTimePickerLandscape() {
-  const [value, setValue] = React.useState<Dayjs | null>(dayjs('2022-04-07'));
-
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs}>
-      <StaticTimePicker
+      <StaticNextTimePicker
         ampm
         orientation="landscape"
         openTo="minutes"
-        value={value}
-        onChange={(newValue) => {
-          setValue(newValue);
-        }}
-        renderInput={(params) => <TextField {...params} />}
+        defaultValue={dayjs('2022-04-07')}
       />
     </LocalizationProvider>
   );
diff --git a/docs/data/date-pickers/time-picker/StaticTimePickerLandscape.tsx.preview b/docs/data/date-pickers/time-picker/StaticTimePickerLandscape.tsx.preview
index b18b80c84fefd..0627364b4b703 100644
--- a/docs/data/date-pickers/time-picker/StaticTimePickerLandscape.tsx.preview
+++ b/docs/data/date-pickers/time-picker/StaticTimePickerLandscape.tsx.preview
@@ -1,12 +1,8 @@
 <LocalizationProvider dateAdapter={AdapterDayjs}>
-  <StaticTimePicker
+  <StaticNextTimePicker
     ampm
     orientation="landscape"
     openTo="minutes"
-    value={value}
-    onChange={(newValue) => {
-      setValue(newValue);
-    }}
-    renderInput={(params) => <TextField {...params} />}
+    defaultValue={dayjs('2022-04-07')}
   />
 </LocalizationProvider>
\ No newline at end of file
diff --git a/docs/data/date-pickers/time-picker/SubComponentsTimeCalendars.js b/docs/data/date-pickers/time-picker/SubComponentsTimeCalendars.js
index fcb54d2699f76..0dc2429a50c22 100644
--- a/docs/data/date-pickers/time-picker/SubComponentsTimeCalendars.js
+++ b/docs/data/date-pickers/time-picker/SubComponentsTimeCalendars.js
@@ -1,11 +1,11 @@
 import * as React from 'react';
-import dayjs from 'dayjs';
+
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { TimeClock } from '@mui/x-date-pickers/TimeClock';
 
 export default function SubComponentsTimeCalendars() {
-  const [value, setValue] = React.useState(dayjs('2022-04-07T10:15'));
+  const [value, setValue] = React.useState();
 
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs}>
diff --git a/docs/data/date-pickers/time-picker/SubComponentsTimeCalendars.tsx b/docs/data/date-pickers/time-picker/SubComponentsTimeCalendars.tsx
index 13113b2bf1e11..162e26de2ec20 100644
--- a/docs/data/date-pickers/time-picker/SubComponentsTimeCalendars.tsx
+++ b/docs/data/date-pickers/time-picker/SubComponentsTimeCalendars.tsx
@@ -1,11 +1,11 @@
 import * as React from 'react';
-import dayjs, { Dayjs } from 'dayjs';
+import { Dayjs } from 'dayjs';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { TimeClock } from '@mui/x-date-pickers/TimeClock';
 
 export default function SubComponentsTimeCalendars() {
-  const [value, setValue] = React.useState<Dayjs | null>(dayjs('2022-04-07T10:15'));
+  const [value, setValue] = React.useState<Dayjs | null>();
 
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs}>
diff --git a/docs/data/date-pickers/time-picker/TimePickerValue.js b/docs/data/date-pickers/time-picker/TimePickerValue.js
new file mode 100644
index 0000000000000..ea4255047eb47
--- /dev/null
+++ b/docs/data/date-pickers/time-picker/TimePickerValue.js
@@ -0,0 +1,26 @@
+import * as React from 'react';
+import dayjs from 'dayjs';
+import Stack from '@mui/material/Stack';
+import { LocalizationProvider } from '@mui/x-date-pickers';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { Unstable_NextTimePicker as NextTimePicker } from '@mui/x-date-pickers/NextTimePicker';
+
+export default function TimePickerValue() {
+  const [value, setValue] = React.useState(dayjs('2022-04-07T15:30'));
+
+  return (
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <Stack spacing={2} direction="row">
+        <NextTimePicker
+          label="Uncontrolled picker"
+          defaultValue={dayjs('2022-04-07T15:30')}
+        />
+        <NextTimePicker
+          label="Controlled picker"
+          value={value}
+          onChange={(newValue) => setValue(newValue)}
+        />
+      </Stack>
+    </LocalizationProvider>
+  );
+}
diff --git a/docs/data/date-pickers/time-picker/TimePickerValue.tsx b/docs/data/date-pickers/time-picker/TimePickerValue.tsx
new file mode 100644
index 0000000000000..ada01c4226434
--- /dev/null
+++ b/docs/data/date-pickers/time-picker/TimePickerValue.tsx
@@ -0,0 +1,26 @@
+import * as React from 'react';
+import dayjs, { Dayjs } from 'dayjs';
+import Stack from '@mui/material/Stack';
+import { LocalizationProvider } from '@mui/x-date-pickers';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { Unstable_NextTimePicker as NextTimePicker } from '@mui/x-date-pickers/NextTimePicker';
+
+export default function TimePickerValue() {
+  const [value, setValue] = React.useState<Dayjs | null>(dayjs('2022-04-07T15:30'));
+
+  return (
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <Stack spacing={2} direction="row">
+        <NextTimePicker
+          label="Uncontrolled picker"
+          defaultValue={dayjs('2022-04-07T15:30')}
+        />
+        <NextTimePicker
+          label="Controlled picker"
+          value={value}
+          onChange={(newValue) => setValue(newValue)}
+        />
+      </Stack>
+    </LocalizationProvider>
+  );
+}
diff --git a/docs/data/date-pickers/time-picker/TimePickerValue.tsx.preview b/docs/data/date-pickers/time-picker/TimePickerValue.tsx.preview
new file mode 100644
index 0000000000000..e459fed0cd5f5
--- /dev/null
+++ b/docs/data/date-pickers/time-picker/TimePickerValue.tsx.preview
@@ -0,0 +1,13 @@
+<LocalizationProvider dateAdapter={AdapterDayjs}>
+  <Stack spacing={2} direction="row">
+    <NextTimePicker
+      label="Uncontrolled picker"
+      defaultValue={dayjs('2022-04-07T15:30')}
+    />
+    <NextTimePicker
+      label="Controlled picker"
+      value={value}
+      onChange={(newValue) => setValue(newValue)}
+    />
+  </Stack>
+</LocalizationProvider>
\ No newline at end of file
diff --git a/docs/data/date-pickers/time-picker/time-picker.md b/docs/data/date-pickers/time-picker/time-picker.md
index af72dd7569a71..dab0be6a0195d 100644
--- a/docs/data/date-pickers/time-picker/time-picker.md
+++ b/docs/data/date-pickers/time-picker/time-picker.md
@@ -11,34 +11,49 @@ materialDesign: https://m2.material.io/components/time-pickers
 
 <p class="description">Time pickers allow the user to select a single time.</p>
 
+:::warning
+The new time pickers are unstable.
+They might receive breaking changes on their props to have the best component possible by the time of the stable release.
+
+They will be renamed at the end of the v6 beta phase to have the same name as the current legacy pickers
+(`NextTimePicker` will become `TimePicker`, ...)
+:::
+
 The selected time is indicated by the filled circle at the end of the clock hand.
 
 ## Basic usage
 
-The time picker is rendered as a modal dialog on mobile, and a textbox with a popup on desktop.
+The time picker is rendered as a modal dialog on mobile, and in the field on desktop.
 
 {{"demo": "BasicTimePicker.js"}}
 
-## Static mode
+## Uncontrolled vs. Controlled
 
-It's possible to render any time picker inline. This will enable building custom popover/modal containers.
+The component can be uncontrolled or controlled
 
-{{"demo": "StaticTimePickerDemo.js", "bg": true}}
+{{"demo": "TimePickerValue.js"}}
 
 ## Responsiveness
 
 The time picker component is designed and optimized for the device it runs on.
 
-- The `MobileTimePicker` component works best for touch devices and small screens.
-- The `DesktopTimePicker` component works best for mouse devices and large screens.
+- The `MobileNextTimePicker` component works best for touch devices and small screens.
+- The `DesktopNextTimePicker` component works best for mouse devices and large screens.
 
-By default, the `TimePicker` component renders the desktop version if the media query [`@media (pointer: fine)`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pointer) matches.
+By default, the `NextTimePicker` component renders the desktop version if the media query [`@media (pointer: fine)`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pointer) matches.
 This can be customized with the `desktopModeMediaQuery` prop.
 
 There are certain caveats when testing pickers, please refer to [this section](/x/react-date-pickers/getting-started/#testing-caveats) for more information.
 
 {{"demo": "ResponsiveTimePickers.js"}}
 
+## Static mode
+
+It is also possible to render any time picker without the modal/popover and text field.
+This will enable building custom popover/modal containers.
+
+{{"demo": "StaticTimePickerDemo.js", "bg": true}}
+
 ## Form props
 
 The time picker component can be disabled or read-only.
diff --git a/docs/data/pages.ts b/docs/data/pages.ts
index 778fd802ffe1e..1bd7466b9b7b4 100644
--- a/docs/data/pages.ts
+++ b/docs/data/pages.ts
@@ -165,10 +165,15 @@ const pages: MuiPage[] = [
       {
         pathname: '/x/react-date-pickers/time-picker',
         title: 'Time components',
-        scopePathnames: ['/x/react-date-pickers/time-picker', '/x/react-date-pickers/time-field'],
+        scopePathnames: [
+          '/x/react-date-pickers/time-picker',
+          '/x/react-date-pickers/time-field',
+          '/x/react-date-pickers/legacy-time-picker',
+        ],
         children: [
           { pathname: '/x/react-date-pickers/time-picker', title: 'Time Picker' },
           { pathname: '/x/react-date-pickers/time-field', title: 'Time Field', newFeature: true },
+          { pathname: '/x/react-date-pickers/legacy-time-picker', title: 'Legacy Time Picker' },
         ],
       },
       {
@@ -177,6 +182,7 @@ const pages: MuiPage[] = [
         scopePathnames: [
           '/x/react-date-pickers/date-time-picker',
           '/x/react-date-pickers/date-time-field',
+          '/x/react-date-pickers/legacy-date-time-picker',
         ],
         children: [
           { pathname: '/x/react-date-pickers/date-time-picker', title: 'Date Time Picker' },
@@ -185,6 +191,10 @@ const pages: MuiPage[] = [
             title: 'Date Time Field',
             newFeature: true,
           },
+          {
+            pathname: '/x/react-date-pickers/legacy-date-time-picker',
+            title: 'Legacy Date Time Picker',
+          },
         ],
       },
       {
@@ -194,6 +204,7 @@ const pages: MuiPage[] = [
         scopePathnames: [
           '/x/react-date-pickers/date-range-picker',
           '/x/react-date-pickers/date-range-field',
+          '/x/react-date-pickers/legacy-date-range-picker',
         ],
         children: [
           { pathname: '/x/react-date-pickers/date-range-picker', title: 'Date Range Picker' },
@@ -202,6 +213,10 @@ const pages: MuiPage[] = [
             title: 'Date Range Field',
             newFeature: true,
           },
+          {
+            pathname: '/x/react-date-pickers/legacy-date-range-picker',
+            title: 'Legacy Date Range Picker',
+          },
         ],
       },
       {
diff --git a/docs/pages/x/react-date-pickers/legacy-date-range-picker.js b/docs/pages/x/react-date-pickers/legacy-date-range-picker.js
new file mode 100644
index 0000000000000..bbcb2672ef661
--- /dev/null
+++ b/docs/pages/x/react-date-pickers/legacy-date-range-picker.js
@@ -0,0 +1,7 @@
+import * as React from 'react';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import * as pageProps from 'docsx/data/date-pickers/legacy-date-range-picker/legacy-date-range-picker.md?@mui/markdown';
+
+export default function Page() {
+  return <MarkdownDocs {...pageProps} />;
+}
diff --git a/docs/pages/x/react-date-pickers/legacy-date-time-picker.js b/docs/pages/x/react-date-pickers/legacy-date-time-picker.js
new file mode 100644
index 0000000000000..98c991f5d066a
--- /dev/null
+++ b/docs/pages/x/react-date-pickers/legacy-date-time-picker.js
@@ -0,0 +1,7 @@
+import * as React from 'react';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import * as pageProps from 'docsx/data/date-pickers/legacy-date-time-picker/legacy-date-time-picker.md?@mui/markdown';
+
+export default function Page() {
+  return <MarkdownDocs {...pageProps} />;
+}
diff --git a/docs/pages/x/react-date-pickers/legacy-time-picker.js b/docs/pages/x/react-date-pickers/legacy-time-picker.js
new file mode 100644
index 0000000000000..cbf5ac4db7679
--- /dev/null
+++ b/docs/pages/x/react-date-pickers/legacy-time-picker.js
@@ -0,0 +1,7 @@
+import * as React from 'react';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import * as pageProps from 'docsx/data/date-pickers/legacy-time-picker/legacy-time-picker.md?@mui/markdown';
+
+export default function Page() {
+  return <MarkdownDocs {...pageProps} />;
+}
diff --git a/test/regressions/index.js b/test/regressions/index.js
index 230d39f034efe..d5a7faa0b8f7f 100644
--- a/test/regressions/index.js
+++ b/test/regressions/index.js
@@ -21,8 +21,6 @@ const blacklist = [
   'docs-date-pickers-date-picker/ServerRequestDatePicker.png', // Redundant
   'docs-date-pickers-date-picker/ViewsDatePicker.png', // Redundant
   'docs-date-pickers-date-range-picker/CalendarsDateRangePicker.png', // Redundant
-  'docs-date-pickers-date-range-picker/CustomDateRangeInputs.png', // Redundant
-  'docs-date-pickers-date-range-picker/MinMaxDateRangePicker.png', // Redundant
   'docs-date-pickers-date-range-picker/ResponsiveDateRangePicker.png', // Redundant
   'docs-date-pickers-date-time-picker/BasicDateTimePicker.png', // Redundant
   'docs-date-pickers-date-time-picker/ResponsiveDateTimePickers.png', // Redundant