diff --git a/docs/data/migration/migration-pickers-v7/migration-pickers-v7.md b/docs/data/migration/migration-pickers-v7/migration-pickers-v7.md
index 1647dae16ac6..c5a7a72d92f3 100644
--- a/docs/data/migration/migration-pickers-v7/migration-pickers-v7.md
+++ b/docs/data/migration/migration-pickers-v7/migration-pickers-v7.md
@@ -12,11 +12,11 @@ This is a reference guide for upgrading `@mui/x-date-pickers` from v7 to v8.
 
 ## Start using the new release
 
-In `package.json`, change the version of the date pickers package to `^8.0.0`.
+In `package.json`, change the version of the date pickers package to `next`.
 
 ```diff
 -"@mui/x-date-pickers": "7.x.x",
-+"@mui/x-date-pickers": "^8.0.0",
++"@mui/x-date-pickers": "next",
 ```
 
 Since `v8` is a major release, it contains changes that affect the public API.
diff --git a/docs/data/migration/migration-tree-view-v7/migration-tree-view-v7.md b/docs/data/migration/migration-tree-view-v7/migration-tree-view-v7.md
index 1e6a7f293ad2..d63227410902 100644
--- a/docs/data/migration/migration-tree-view-v7/migration-tree-view-v7.md
+++ b/docs/data/migration/migration-tree-view-v7/migration-tree-view-v7.md
@@ -12,11 +12,11 @@ This is a reference guide for upgrading `@mui/x-tree-view` from v7 to v8.
 
 ## Start using the new release
 
-In `package.json`, change the version of the Tree View package to `^8.0.0`.
+In `package.json`, change the version of the Tree View package to `next`.
 
 ```diff
 -"@mui/x-tree-view": "7.x.x",
-+"@mui/x-tree-view": "^8.0.0",
++"@mui/x-tree-view": "next",
 ```
 
 Since `v8` is a major release, it contains changes that affect the public API.
diff --git a/docs/data/tree-view/rich-tree-view/customization/HeadlessAPI.js b/docs/data/tree-view/rich-tree-view/customization/HeadlessAPI.js
index 5619fbf9b31d..172d7a1deaaf 100644
--- a/docs/data/tree-view/rich-tree-view/customization/HeadlessAPI.js
+++ b/docs/data/tree-view/rich-tree-view/customization/HeadlessAPI.js
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { styled } from '@mui/material/styles';
 import Box from '@mui/material/Box';
 import Avatar from '@mui/material/Avatar';
 import { RichTreeView } from '@mui/x-tree-view/RichTreeView';
@@ -37,10 +36,6 @@ const ITEMS = [
   },
 ];
 
-const CustomTreeItemContent = styled(TreeItemContent)(({ theme }) => ({
-  padding: theme.spacing(0.5, 1),
-}));
-
 const CustomTreeItem = React.forwardRef(function CustomTreeItem(props, ref) {
   const { id, itemId, label, disabled, children, ...other } = props;
 
@@ -58,7 +53,7 @@ const CustomTreeItem = React.forwardRef(function CustomTreeItem(props, ref) {
   return (
     <TreeItemProvider itemId={itemId}>
       <TreeItemRoot {...getRootProps(other)}>
-        <CustomTreeItemContent {...getContentProps()}>
+        <TreeItemContent {...getContentProps()}>
           <TreeItemIconContainer {...getIconContainerProps()}>
             <TreeItemIcon status={status} />
           </TreeItemIconContainer>
@@ -77,7 +72,7 @@ const CustomTreeItem = React.forwardRef(function CustomTreeItem(props, ref) {
             <TreeItemLabel {...getLabelProps()} />
           </Box>
           <TreeItemDragAndDropOverlay {...getDragAndDropOverlayProps()} />
-        </CustomTreeItemContent>
+        </TreeItemContent>
         {children && <TreeItemGroupTransition {...getGroupTransitionProps()} />}
       </TreeItemRoot>
     </TreeItemProvider>
diff --git a/docs/data/tree-view/rich-tree-view/customization/HeadlessAPI.tsx b/docs/data/tree-view/rich-tree-view/customization/HeadlessAPI.tsx
index c4ac1965cf83..bccd2390df60 100644
--- a/docs/data/tree-view/rich-tree-view/customization/HeadlessAPI.tsx
+++ b/docs/data/tree-view/rich-tree-view/customization/HeadlessAPI.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { styled } from '@mui/material/styles';
 import Box from '@mui/material/Box';
 import Avatar from '@mui/material/Avatar';
 import { RichTreeView } from '@mui/x-tree-view/RichTreeView';
@@ -37,10 +36,6 @@ const ITEMS: TreeViewBaseItem[] = [
   },
 ];
 
-const CustomTreeItemContent = styled(TreeItemContent)(({ theme }) => ({
-  padding: theme.spacing(0.5, 1),
-}));
-
 interface CustomTreeItemProps
   extends Omit<UseTreeItemParameters, 'rootRef'>,
     Omit<React.HTMLAttributes<HTMLLIElement>, 'onFocus'> {}
@@ -65,7 +60,7 @@ const CustomTreeItem = React.forwardRef(function CustomTreeItem(
   return (
     <TreeItemProvider itemId={itemId}>
       <TreeItemRoot {...getRootProps(other)}>
-        <CustomTreeItemContent {...getContentProps()}>
+        <TreeItemContent {...getContentProps()}>
           <TreeItemIconContainer {...getIconContainerProps()}>
             <TreeItemIcon status={status} />
           </TreeItemIconContainer>
@@ -84,7 +79,7 @@ const CustomTreeItem = React.forwardRef(function CustomTreeItem(
             <TreeItemLabel {...getLabelProps()} />
           </Box>
           <TreeItemDragAndDropOverlay {...getDragAndDropOverlayProps()} />
-        </CustomTreeItemContent>
+        </TreeItemContent>
         {children && <TreeItemGroupTransition {...getGroupTransitionProps()} />}
       </TreeItemRoot>
     </TreeItemProvider>
diff --git a/docs/data/tree-view/tree-item-customization/ContentSlot.js b/docs/data/tree-view/tree-item-customization/ContentSlot.js
index 5404af12ac70..4481bf1567ae 100644
--- a/docs/data/tree-view/tree-item-customization/ContentSlot.js
+++ b/docs/data/tree-view/tree-item-customization/ContentSlot.js
@@ -8,6 +8,7 @@ import { MUI_X_PRODUCTS } from './products';
 
 const CustomContent = styled('div')(({ theme }) => ({
   padding: theme.spacing(0.5, 1),
+  paddingLeft: `calc(${theme.spacing(1)} + var(--TreeView-itemChildrenIndentation) * var(--TreeView-itemDepth))`,
   borderRadius: theme.shape.borderRadius,
   width: '100%',
   border: '1px solid',
diff --git a/docs/data/tree-view/tree-item-customization/ContentSlot.tsx b/docs/data/tree-view/tree-item-customization/ContentSlot.tsx
index 977001411de4..f28449ab4563 100644
--- a/docs/data/tree-view/tree-item-customization/ContentSlot.tsx
+++ b/docs/data/tree-view/tree-item-customization/ContentSlot.tsx
@@ -8,6 +8,7 @@ import { MUI_X_PRODUCTS } from './products';
 
 const CustomContent = styled('div')(({ theme }) => ({
   padding: theme.spacing(0.5, 1),
+  paddingLeft: `calc(${theme.spacing(1)} + var(--TreeView-itemChildrenIndentation) * var(--TreeView-itemDepth))`,
   borderRadius: theme.shape.borderRadius,
   width: '100%',
   border: '1px solid',
diff --git a/docs/data/tree-view/tree-item-customization/CustomTreeItemDemo.js b/docs/data/tree-view/tree-item-customization/CustomTreeItemDemo.js
index 785462f87910..9a39125199f4 100644
--- a/docs/data/tree-view/tree-item-customization/CustomTreeItemDemo.js
+++ b/docs/data/tree-view/tree-item-customization/CustomTreeItemDemo.js
@@ -50,12 +50,14 @@ const CustomTreeItemLabelInput = styled(TreeItemLabelInput)(({ theme }) => ({
     borderColor: theme.palette.primary.main,
   },
 }));
+
 const CustomTreeItemContent = styled(TreeItemContent)(({ theme }) => ({
   border: '1px solid transparent',
   '&:hover:not(:has(:hover))': {
     borderColor: theme.palette.primary.main,
   },
 }));
+
 const CustomTreeItemIconContainer = styled(TreeItemIconContainer)(({ theme }) => ({
   borderRadius: theme.shape.borderRadius,
   border: '1px solid transparent',
@@ -63,6 +65,7 @@ const CustomTreeItemIconContainer = styled(TreeItemIconContainer)(({ theme }) =>
     borderColor: theme.palette.primary.main,
   },
 }));
+
 const CustomTreeItemLabel = styled(TreeItemLabel)(({ theme }) => ({
   borderRadius: theme.shape.borderRadius,
   border: '1px solid transparent',
@@ -70,6 +73,7 @@ const CustomTreeItemLabel = styled(TreeItemLabel)(({ theme }) => ({
     borderColor: theme.palette.primary.main,
   },
 }));
+
 const CustomTreeItemCheckbox = styled(TreeItemCheckbox)(({ theme }) => ({
   borderRadius: theme.shape.borderRadius,
   border: '1px solid transparent',
diff --git a/docs/data/tree-view/tree-item-customization/CustomTreeItemDemo.tsx b/docs/data/tree-view/tree-item-customization/CustomTreeItemDemo.tsx
index 3ca39800f5fc..9bdabdc0b93d 100644
--- a/docs/data/tree-view/tree-item-customization/CustomTreeItemDemo.tsx
+++ b/docs/data/tree-view/tree-item-customization/CustomTreeItemDemo.tsx
@@ -55,12 +55,14 @@ const CustomTreeItemLabelInput = styled(TreeItemLabelInput)(({ theme }) => ({
     borderColor: theme.palette.primary.main,
   },
 }));
+
 const CustomTreeItemContent = styled(TreeItemContent)(({ theme }) => ({
   border: '1px solid transparent',
   '&:hover:not(:has(:hover))': {
     borderColor: theme.palette.primary.main,
   },
 }));
+
 const CustomTreeItemIconContainer = styled(TreeItemIconContainer)(({ theme }) => ({
   borderRadius: theme.shape.borderRadius,
   border: '1px solid transparent',
@@ -68,6 +70,7 @@ const CustomTreeItemIconContainer = styled(TreeItemIconContainer)(({ theme }) =>
     borderColor: theme.palette.primary.main,
   },
 }));
+
 const CustomTreeItemLabel = styled(TreeItemLabel)(({ theme }) => ({
   borderRadius: theme.shape.borderRadius,
   border: '1px solid transparent',
@@ -75,6 +78,7 @@ const CustomTreeItemLabel = styled(TreeItemLabel)(({ theme }) => ({
     borderColor: theme.palette.primary.main,
   },
 }));
+
 const CustomTreeItemCheckbox = styled(TreeItemCheckbox)(({ theme }) => ({
   borderRadius: theme.shape.borderRadius,
   border: '1px solid transparent',