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 1647dae16ac68..c5a7a72d92f34 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 1e6a7f293ad2d..d632274109026 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.tsx b/docs/data/tree-view/rich-tree-view/customization/HeadlessAPI.tsx
index c4ac1965cf835..bccd2390df601 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.tsx b/docs/data/tree-view/tree-item-customization/ContentSlot.tsx
index 977001411de43..f28449ab4563a 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.tsx b/docs/data/tree-view/tree-item-customization/CustomTreeItemDemo.tsx
index 3ca39800f5fcf..9bdabdc0b93d0 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',