diff --git a/docs/data/tree-view/rich-tree-view/customization/CustomAnimation.js b/docs/data/tree-view/rich-tree-view/customization/CustomAnimation.js
index 53d9edc89c938..7941d92b58e5d 100644
--- a/docs/data/tree-view/rich-tree-view/customization/CustomAnimation.js
+++ b/docs/data/tree-view/rich-tree-view/customization/CustomAnimation.js
@@ -1,37 +1,39 @@
 import * as React from 'react';
+import Box from '@mui/material/Box';
 import Collapse from '@mui/material/Collapse';
 
 import { RichTreeView } from '@mui/x-tree-view/RichTreeView';
 
 import { useSpring, animated } from '@react-spring/web';
 
-const ITEMS = [
+const MUI_X_PRODUCTS = [
   {
-    id: '1',
-    label: 'Main',
+    id: 'grid',
+    label: 'Data Grid',
     children: [
-      { id: '2', label: 'Hello' },
-      {
-        id: '3',
-        label: 'Subtree with children',
-        children: [
-          { id: '6', label: 'Hello' },
-          {
-            id: '7',
-            label: 'Sub-subtree with children',
-            children: [
-              { id: '9', label: 'Child 1' },
-              { id: '10', label: 'Child 2' },
-              { id: '11', label: 'Child 3' },
-            ],
-          },
-          { id: '8', label: 'Hello' },
-        ],
-      },
-      { id: '4', label: 'World' },
-      { id: '5', label: 'Something something' },
+      { id: 'grid-community', label: '@mui/x-data-grid' },
+      { id: 'grid-pro', label: '@mui/x-data-grid-pro' },
+      { id: 'grid-premium', label: '@mui/x-data-grid-premium' },
     ],
   },
+  {
+    id: 'pickers',
+    label: 'Date and Time Pickers',
+    children: [
+      { id: 'pickers-community', label: '@mui/x-date-pickers' },
+      { id: 'pickers-pro', label: '@mui/x-date-pickers-pro' },
+    ],
+  },
+  {
+    id: 'charts',
+    label: 'Charts',
+    children: [{ id: 'charts-community', label: '@mui/x-charts' }],
+  },
+  {
+    id: 'tree-view',
+    label: 'Tree View',
+    children: [{ id: 'tree-view-community', label: '@mui/x-tree-view' }],
+  },
 ];
 
 function TransitionComponent(props) {
@@ -51,12 +53,12 @@ function TransitionComponent(props) {
 
 export default function CustomAnimation() {
   return (
-    <RichTreeView
-      aria-label="customized"
-      defaultExpandedItems={['1']}
-      sx={{ overflowX: 'hidden', minHeight: 270, flexGrow: 1, maxWidth: 300 }}
-      slotProps={{ item: { slots: { groupTransition: TransitionComponent } } }}
-      items={ITEMS}
-    />
+    <Box sx={{ minHeight: 352, minWidth: 250 }}>
+      <RichTreeView
+        defaultExpandedItems={['grid']}
+        slotProps={{ item: { slots: { groupTransition: TransitionComponent } } }}
+        items={MUI_X_PRODUCTS}
+      />
+    </Box>
   );
 }
diff --git a/docs/data/tree-view/rich-tree-view/customization/CustomAnimation.tsx b/docs/data/tree-view/rich-tree-view/customization/CustomAnimation.tsx
index c0f7dc541b515..234b4b656bd98 100644
--- a/docs/data/tree-view/rich-tree-view/customization/CustomAnimation.tsx
+++ b/docs/data/tree-view/rich-tree-view/customization/CustomAnimation.tsx
@@ -1,37 +1,39 @@
 import * as React from 'react';
+import Box from '@mui/material/Box';
 import Collapse from '@mui/material/Collapse';
 import { TransitionProps } from '@mui/material/transitions';
 import { RichTreeView } from '@mui/x-tree-view/RichTreeView';
 import { TreeViewBaseItem } from '@mui/x-tree-view/models';
 import { useSpring, animated } from '@react-spring/web';
 
-const ITEMS: TreeViewBaseItem[] = [
+const MUI_X_PRODUCTS: TreeViewBaseItem[] = [
   {
-    id: '1',
-    label: 'Main',
+    id: 'grid',
+    label: 'Data Grid',
     children: [
-      { id: '2', label: 'Hello' },
-      {
-        id: '3',
-        label: 'Subtree with children',
-        children: [
-          { id: '6', label: 'Hello' },
-          {
-            id: '7',
-            label: 'Sub-subtree with children',
-            children: [
-              { id: '9', label: 'Child 1' },
-              { id: '10', label: 'Child 2' },
-              { id: '11', label: 'Child 3' },
-            ],
-          },
-          { id: '8', label: 'Hello' },
-        ],
-      },
-      { id: '4', label: 'World' },
-      { id: '5', label: 'Something something' },
+      { id: 'grid-community', label: '@mui/x-data-grid' },
+      { id: 'grid-pro', label: '@mui/x-data-grid-pro' },
+      { id: 'grid-premium', label: '@mui/x-data-grid-premium' },
     ],
   },
+  {
+    id: 'pickers',
+    label: 'Date and Time Pickers',
+    children: [
+      { id: 'pickers-community', label: '@mui/x-date-pickers' },
+      { id: 'pickers-pro', label: '@mui/x-date-pickers-pro' },
+    ],
+  },
+  {
+    id: 'charts',
+    label: 'Charts',
+    children: [{ id: 'charts-community', label: '@mui/x-charts' }],
+  },
+  {
+    id: 'tree-view',
+    label: 'Tree View',
+    children: [{ id: 'tree-view-community', label: '@mui/x-tree-view' }],
+  },
 ];
 
 function TransitionComponent(props: TransitionProps) {
@@ -51,12 +53,12 @@ function TransitionComponent(props: TransitionProps) {
 
 export default function CustomAnimation() {
   return (
-    <RichTreeView
-      aria-label="customized"
-      defaultExpandedItems={['1']}
-      sx={{ overflowX: 'hidden', minHeight: 270, flexGrow: 1, maxWidth: 300 }}
-      slotProps={{ item: { slots: { groupTransition: TransitionComponent } } }}
-      items={ITEMS}
-    />
+    <Box sx={{ minHeight: 352, minWidth: 250 }}>
+      <RichTreeView
+        defaultExpandedItems={['grid']}
+        slotProps={{ item: { slots: { groupTransition: TransitionComponent } } }}
+        items={MUI_X_PRODUCTS}
+      />
+    </Box>
   );
 }
diff --git a/docs/data/tree-view/rich-tree-view/customization/CustomAnimation.tsx.preview b/docs/data/tree-view/rich-tree-view/customization/CustomAnimation.tsx.preview
index 56ad322fe2d05..0e834c371ea10 100644
--- a/docs/data/tree-view/rich-tree-view/customization/CustomAnimation.tsx.preview
+++ b/docs/data/tree-view/rich-tree-view/customization/CustomAnimation.tsx.preview
@@ -1,7 +1,5 @@
 <RichTreeView
-  aria-label="customized"
-  defaultExpandedItems={['1']}
-  sx={{ overflowX: 'hidden', minHeight: 270, flexGrow: 1, maxWidth: 300 }}
+  defaultExpandedItems={['grid']}
   slotProps={{ item: { slots: { groupTransition: TransitionComponent } } }}
-  items={ITEMS}
+  items={MUI_X_PRODUCTS}
 />
\ No newline at end of file
diff --git a/docs/data/tree-view/rich-tree-view/customization/CustomIcons.js b/docs/data/tree-view/rich-tree-view/customization/CustomIcons.js
index 9b6787b5c825a..ddafd6e850a03 100644
--- a/docs/data/tree-view/rich-tree-view/customization/CustomIcons.js
+++ b/docs/data/tree-view/rich-tree-view/customization/CustomIcons.js
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import Box from '@mui/material/Box';
 import AddBoxIcon from '@mui/icons-material/AddBox';
 import IndeterminateCheckBoxIcon from '@mui/icons-material/IndeterminateCheckBox';
 import SvgIcon from '@mui/material/SvgIcon';
@@ -6,33 +7,34 @@ import { styled } from '@mui/material/styles';
 import { RichTreeView } from '@mui/x-tree-view/RichTreeView';
 import { TreeItem, treeItemClasses } from '@mui/x-tree-view/TreeItem';
 
-const ITEMS = [
+const MUI_X_PRODUCTS = [
   {
-    id: '1',
-    label: 'Main',
+    id: 'grid',
+    label: 'Data Grid',
     children: [
-      { id: '2', label: 'Hello' },
-      {
-        id: '3',
-        label: 'Subtree with children',
-        children: [
-          { id: '6', label: 'Hello' },
-          {
-            id: '7',
-            label: 'Sub-subtree with children',
-            children: [
-              { id: '9', label: 'Child 1' },
-              { id: '10', label: 'Child 2' },
-              { id: '11', label: 'Child 3' },
-            ],
-          },
-          { id: '8', label: 'Hello' },
-        ],
-      },
-      { id: '4', label: 'World' },
-      { id: '5', label: 'Something something' },
+      { id: 'grid-community', label: '@mui/x-data-grid' },
+      { id: 'grid-pro', label: '@mui/x-data-grid-pro' },
+      { id: 'grid-premium', label: '@mui/x-data-grid-premium' },
     ],
   },
+  {
+    id: 'pickers',
+    label: 'Date and Time Pickers',
+    children: [
+      { id: 'pickers-community', label: '@mui/x-date-pickers' },
+      { id: 'pickers-pro', label: '@mui/x-date-pickers-pro' },
+    ],
+  },
+  {
+    id: 'charts',
+    label: 'Charts',
+    children: [{ id: 'charts-community', label: '@mui/x-charts' }],
+  },
+  {
+    id: 'tree-view',
+    label: 'Tree View',
+    children: [{ id: 'tree-view-community', label: '@mui/x-tree-view' }],
+  },
 ];
 
 const CustomTreeItem = styled(TreeItem)({
@@ -59,17 +61,17 @@ function CloseSquare(props) {
 
 export default function CustomIcons() {
   return (
-    <RichTreeView
-      aria-label="customized"
-      defaultExpandedItems={['1']}
-      slots={{
-        expandIcon: AddBoxIcon,
-        collapseIcon: IndeterminateCheckBoxIcon,
-        endIcon: CloseSquare,
-        item: CustomTreeItem,
-      }}
-      sx={{ overflowX: 'hidden', minHeight: 270, flexGrow: 1, maxWidth: 300 }}
-      items={ITEMS}
-    />
+    <Box sx={{ minHeight: 352, minWidth: 250 }}>
+      <RichTreeView
+        defaultExpandedItems={['grid']}
+        slots={{
+          expandIcon: AddBoxIcon,
+          collapseIcon: IndeterminateCheckBoxIcon,
+          endIcon: CloseSquare,
+          item: CustomTreeItem,
+        }}
+        items={MUI_X_PRODUCTS}
+      />
+    </Box>
   );
 }
diff --git a/docs/data/tree-view/rich-tree-view/customization/CustomIcons.tsx b/docs/data/tree-view/rich-tree-view/customization/CustomIcons.tsx
index 8fe4f628f2ce4..b22872ffde541 100644
--- a/docs/data/tree-view/rich-tree-view/customization/CustomIcons.tsx
+++ b/docs/data/tree-view/rich-tree-view/customization/CustomIcons.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import Box from '@mui/material/Box';
 import AddBoxIcon from '@mui/icons-material/AddBox';
 import IndeterminateCheckBoxIcon from '@mui/icons-material/IndeterminateCheckBox';
 import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon';
@@ -7,33 +8,34 @@ import { RichTreeView } from '@mui/x-tree-view/RichTreeView';
 import { TreeItem, treeItemClasses } from '@mui/x-tree-view/TreeItem';
 import { TreeViewBaseItem } from '@mui/x-tree-view/models';
 
-const ITEMS: TreeViewBaseItem[] = [
+const MUI_X_PRODUCTS: TreeViewBaseItem[] = [
   {
-    id: '1',
-    label: 'Main',
+    id: 'grid',
+    label: 'Data Grid',
     children: [
-      { id: '2', label: 'Hello' },
-      {
-        id: '3',
-        label: 'Subtree with children',
-        children: [
-          { id: '6', label: 'Hello' },
-          {
-            id: '7',
-            label: 'Sub-subtree with children',
-            children: [
-              { id: '9', label: 'Child 1' },
-              { id: '10', label: 'Child 2' },
-              { id: '11', label: 'Child 3' },
-            ],
-          },
-          { id: '8', label: 'Hello' },
-        ],
-      },
-      { id: '4', label: 'World' },
-      { id: '5', label: 'Something something' },
+      { id: 'grid-community', label: '@mui/x-data-grid' },
+      { id: 'grid-pro', label: '@mui/x-data-grid-pro' },
+      { id: 'grid-premium', label: '@mui/x-data-grid-premium' },
     ],
   },
+  {
+    id: 'pickers',
+    label: 'Date and Time Pickers',
+    children: [
+      { id: 'pickers-community', label: '@mui/x-date-pickers' },
+      { id: 'pickers-pro', label: '@mui/x-date-pickers-pro' },
+    ],
+  },
+  {
+    id: 'charts',
+    label: 'Charts',
+    children: [{ id: 'charts-community', label: '@mui/x-charts' }],
+  },
+  {
+    id: 'tree-view',
+    label: 'Tree View',
+    children: [{ id: 'tree-view-community', label: '@mui/x-tree-view' }],
+  },
 ];
 
 const CustomTreeItem = styled(TreeItem)({
@@ -60,17 +62,17 @@ function CloseSquare(props: SvgIconProps) {
 
 export default function CustomIcons() {
   return (
-    <RichTreeView
-      aria-label="customized"
-      defaultExpandedItems={['1']}
-      slots={{
-        expandIcon: AddBoxIcon,
-        collapseIcon: IndeterminateCheckBoxIcon,
-        endIcon: CloseSquare,
-        item: CustomTreeItem,
-      }}
-      sx={{ overflowX: 'hidden', minHeight: 270, flexGrow: 1, maxWidth: 300 }}
-      items={ITEMS}
-    />
+    <Box sx={{ minHeight: 352, minWidth: 250 }}>
+      <RichTreeView
+        defaultExpandedItems={['grid']}
+        slots={{
+          expandIcon: AddBoxIcon,
+          collapseIcon: IndeterminateCheckBoxIcon,
+          endIcon: CloseSquare,
+          item: CustomTreeItem,
+        }}
+        items={MUI_X_PRODUCTS}
+      />
+    </Box>
   );
 }
diff --git a/docs/data/tree-view/rich-tree-view/customization/CustomIcons.tsx.preview b/docs/data/tree-view/rich-tree-view/customization/CustomIcons.tsx.preview
index 209560af6131b..688a706a7f547 100644
--- a/docs/data/tree-view/rich-tree-view/customization/CustomIcons.tsx.preview
+++ b/docs/data/tree-view/rich-tree-view/customization/CustomIcons.tsx.preview
@@ -1,12 +1,10 @@
 <RichTreeView
-  aria-label="customized"
-  defaultExpandedItems={['1']}
+  defaultExpandedItems={['grid']}
   slots={{
     expandIcon: AddBoxIcon,
     collapseIcon: IndeterminateCheckBoxIcon,
     endIcon: CloseSquare,
     item: CustomTreeItem,
   }}
-  sx={{ overflowX: 'hidden', minHeight: 270, flexGrow: 1, maxWidth: 300 }}
-  items={ITEMS}
+  items={MUI_X_PRODUCTS}
 />
\ No newline at end of file
diff --git a/docs/data/tree-view/rich-tree-view/customization/CustomStyling.js b/docs/data/tree-view/rich-tree-view/customization/CustomStyling.js
index 255f2ec67c298..9f943fa5f5545 100644
--- a/docs/data/tree-view/rich-tree-view/customization/CustomStyling.js
+++ b/docs/data/tree-view/rich-tree-view/customization/CustomStyling.js
@@ -1,38 +1,40 @@
 import * as React from 'react';
+import Box from '@mui/material/Box';
 import { styled, alpha } from '@mui/material/styles';
 import { RichTreeView } from '@mui/x-tree-view/RichTreeView';
 import { TreeItem, treeItemClasses } from '@mui/x-tree-view/TreeItem';
 
-const ITEMS = [
+const MUI_X_PRODUCTS = [
   {
-    id: '1',
-    label: 'Main',
+    id: 'grid',
+    label: 'Data Grid',
     children: [
-      { id: '2', label: 'Hello' },
-      {
-        id: '3',
-        label: 'Subtree with children',
-        children: [
-          { id: '6', label: 'Hello' },
-          {
-            id: '7',
-            label: 'Sub-subtree with children',
-            children: [
-              { id: '9', label: 'Child 1' },
-              { id: '10', label: 'Child 2' },
-              { id: '11', label: 'Child 3' },
-            ],
-          },
-          { id: '8', label: 'Hello' },
-        ],
-      },
-      { id: '4', label: 'World' },
-      { id: '5', label: 'Something something' },
+      { id: 'grid-community', label: '@mui/x-data-grid' },
+      { id: 'grid-pro', label: '@mui/x-data-grid-pro' },
+      { id: 'grid-premium', label: '@mui/x-data-grid-premium' },
     ],
   },
+  {
+    id: 'pickers',
+    label: 'Date and Time Pickers',
+    children: [
+      { id: 'pickers-community', label: '@mui/x-date-pickers' },
+      { id: 'pickers-pro', label: '@mui/x-date-pickers-pro' },
+    ],
+  },
+  {
+    id: 'charts',
+    label: 'Charts',
+    children: [{ id: 'charts-community', label: '@mui/x-charts' }],
+  },
+  {
+    id: 'tree-view',
+    label: 'Tree View',
+    children: [{ id: 'tree-view-community', label: '@mui/x-tree-view' }],
+  },
 ];
 
-const StyledTreeItem = styled(TreeItem)(({ theme }) => ({
+const CustomTreeItem = styled(TreeItem)(({ theme }) => ({
   color:
     theme.palette.mode === 'light'
       ? theme.palette.grey[800]
@@ -64,12 +66,12 @@ const StyledTreeItem = styled(TreeItem)(({ theme }) => ({
 
 export default function CustomStyling() {
   return (
-    <RichTreeView
-      aria-label="customized"
-      defaultExpandedItems={['1']}
-      sx={{ overflowX: 'hidden', minHeight: 270, flexGrow: 1, maxWidth: 300 }}
-      slots={{ item: StyledTreeItem }}
-      items={ITEMS}
-    />
+    <Box sx={{ minHeight: 352, minWidth: 250 }}>
+      <RichTreeView
+        defaultExpandedItems={['grid']}
+        slots={{ item: CustomTreeItem }}
+        items={MUI_X_PRODUCTS}
+      />
+    </Box>
   );
 }
diff --git a/docs/data/tree-view/rich-tree-view/customization/CustomStyling.tsx b/docs/data/tree-view/rich-tree-view/customization/CustomStyling.tsx
index ab37600934598..dd1a123cb753c 100644
--- a/docs/data/tree-view/rich-tree-view/customization/CustomStyling.tsx
+++ b/docs/data/tree-view/rich-tree-view/customization/CustomStyling.tsx
@@ -1,39 +1,41 @@
 import * as React from 'react';
+import Box from '@mui/material/Box';
 import { styled, alpha } from '@mui/material/styles';
 import { RichTreeView } from '@mui/x-tree-view/RichTreeView';
 import { TreeItem, treeItemClasses } from '@mui/x-tree-view/TreeItem';
 import { TreeViewBaseItem } from '@mui/x-tree-view/models';
 
-const ITEMS: TreeViewBaseItem[] = [
+const MUI_X_PRODUCTS: TreeViewBaseItem[] = [
   {
-    id: '1',
-    label: 'Main',
+    id: 'grid',
+    label: 'Data Grid',
     children: [
-      { id: '2', label: 'Hello' },
-      {
-        id: '3',
-        label: 'Subtree with children',
-        children: [
-          { id: '6', label: 'Hello' },
-          {
-            id: '7',
-            label: 'Sub-subtree with children',
-            children: [
-              { id: '9', label: 'Child 1' },
-              { id: '10', label: 'Child 2' },
-              { id: '11', label: 'Child 3' },
-            ],
-          },
-          { id: '8', label: 'Hello' },
-        ],
-      },
-      { id: '4', label: 'World' },
-      { id: '5', label: 'Something something' },
+      { id: 'grid-community', label: '@mui/x-data-grid' },
+      { id: 'grid-pro', label: '@mui/x-data-grid-pro' },
+      { id: 'grid-premium', label: '@mui/x-data-grid-premium' },
     ],
   },
+  {
+    id: 'pickers',
+    label: 'Date and Time Pickers',
+    children: [
+      { id: 'pickers-community', label: '@mui/x-date-pickers' },
+      { id: 'pickers-pro', label: '@mui/x-date-pickers-pro' },
+    ],
+  },
+  {
+    id: 'charts',
+    label: 'Charts',
+    children: [{ id: 'charts-community', label: '@mui/x-charts' }],
+  },
+  {
+    id: 'tree-view',
+    label: 'Tree View',
+    children: [{ id: 'tree-view-community', label: '@mui/x-tree-view' }],
+  },
 ];
 
-const StyledTreeItem = styled(TreeItem)(({ theme }) => ({
+const CustomTreeItem = styled(TreeItem)(({ theme }) => ({
   color:
     theme.palette.mode === 'light'
       ? theme.palette.grey[800]
@@ -66,12 +68,12 @@ const StyledTreeItem = styled(TreeItem)(({ theme }) => ({
 
 export default function CustomStyling() {
   return (
-    <RichTreeView
-      aria-label="customized"
-      defaultExpandedItems={['1']}
-      sx={{ overflowX: 'hidden', minHeight: 270, flexGrow: 1, maxWidth: 300 }}
-      slots={{ item: StyledTreeItem }}
-      items={ITEMS}
-    />
+    <Box sx={{ minHeight: 352, minWidth: 250 }}>
+      <RichTreeView
+        defaultExpandedItems={['grid']}
+        slots={{ item: CustomTreeItem }}
+        items={MUI_X_PRODUCTS}
+      />
+    </Box>
   );
 }
diff --git a/docs/data/tree-view/rich-tree-view/customization/CustomStyling.tsx.preview b/docs/data/tree-view/rich-tree-view/customization/CustomStyling.tsx.preview
index 3aef020f6665e..d2d3246c76fb7 100644
--- a/docs/data/tree-view/rich-tree-view/customization/CustomStyling.tsx.preview
+++ b/docs/data/tree-view/rich-tree-view/customization/CustomStyling.tsx.preview
@@ -1,7 +1,5 @@
 <RichTreeView
-  aria-label="customized"
-  defaultExpandedItems={['1']}
-  sx={{ overflowX: 'hidden', minHeight: 270, flexGrow: 1, maxWidth: 300 }}
-  slots={{ item: StyledTreeItem }}
-  items={ITEMS}
+  defaultExpandedItems={['grid']}
+  slots={{ item: CustomTreeItem }}
+  items={MUI_X_PRODUCTS}
 />
\ No newline at end of file
diff --git a/docs/data/tree-view/rich-tree-view/customization/CustomContentTreeView.js b/docs/data/tree-view/rich-tree-view/customization/HeadlessAPI.js
similarity index 93%
rename from docs/data/tree-view/rich-tree-view/customization/CustomContentTreeView.js
rename to docs/data/tree-view/rich-tree-view/customization/HeadlessAPI.js
index 24ddeb962f48d..e3915dd7caba6 100644
--- a/docs/data/tree-view/rich-tree-view/customization/CustomContentTreeView.js
+++ b/docs/data/tree-view/rich-tree-view/customization/HeadlessAPI.js
@@ -81,12 +81,10 @@ const CustomTreeItem = React.forwardRef(function CustomTreeItem(props, ref) {
   );
 });
 
-export default function CustomContentTreeView() {
+export default function HeadlessAPI() {
   return (
-    <Box sx={{ minHeight: 180, flexGrow: 1, maxWidth: 300 }}>
+    <Box sx={{ minHeight: 200, minWidth: 250 }}>
       <RichTreeView
-        aria-label="icon expansion"
-        sx={{ position: 'relative' }}
         defaultExpandedItems={['3']}
         items={ITEMS}
         slots={{ item: CustomTreeItem }}
diff --git a/docs/data/tree-view/rich-tree-view/customization/CustomContentTreeView.tsx b/docs/data/tree-view/rich-tree-view/customization/HeadlessAPI.tsx
similarity index 93%
rename from docs/data/tree-view/rich-tree-view/customization/CustomContentTreeView.tsx
rename to docs/data/tree-view/rich-tree-view/customization/HeadlessAPI.tsx
index 0caea393d6977..8d0929895b2c5 100644
--- a/docs/data/tree-view/rich-tree-view/customization/CustomContentTreeView.tsx
+++ b/docs/data/tree-view/rich-tree-view/customization/HeadlessAPI.tsx
@@ -91,12 +91,10 @@ const CustomTreeItem = React.forwardRef(function CustomTreeItem(
   );
 });
 
-export default function CustomContentTreeView() {
+export default function HeadlessAPI() {
   return (
-    <Box sx={{ minHeight: 180, flexGrow: 1, maxWidth: 300 }}>
+    <Box sx={{ minHeight: 200, minWidth: 250 }}>
       <RichTreeView
-        aria-label="icon expansion"
-        sx={{ position: 'relative' }}
         defaultExpandedItems={['3']}
         items={ITEMS}
         slots={{ item: CustomTreeItem }}
diff --git a/docs/data/tree-view/rich-tree-view/customization/CustomContentTreeView.tsx.preview b/docs/data/tree-view/rich-tree-view/customization/HeadlessAPI.tsx.preview
similarity index 61%
rename from docs/data/tree-view/rich-tree-view/customization/CustomContentTreeView.tsx.preview
rename to docs/data/tree-view/rich-tree-view/customization/HeadlessAPI.tsx.preview
index e37df6849fe22..58e2294ec29d0 100644
--- a/docs/data/tree-view/rich-tree-view/customization/CustomContentTreeView.tsx.preview
+++ b/docs/data/tree-view/rich-tree-view/customization/HeadlessAPI.tsx.preview
@@ -1,6 +1,4 @@
 <RichTreeView
-  aria-label="icon expansion"
-  sx={{ position: 'relative' }}
   defaultExpandedItems={['3']}
   items={ITEMS}
   slots={{ item: CustomTreeItem }}
diff --git a/docs/data/tree-view/rich-tree-view/customization/LabelSlotProps.js b/docs/data/tree-view/rich-tree-view/customization/LabelSlotProps.js
index 0261e5154c827..d6c415bbbe420 100644
--- a/docs/data/tree-view/rich-tree-view/customization/LabelSlotProps.js
+++ b/docs/data/tree-view/rich-tree-view/customization/LabelSlotProps.js
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import Box from '@mui/material/Box';
 import { RichTreeView } from '@mui/x-tree-view/RichTreeView';
 import { TreeItem2 } from '@mui/x-tree-view/TreeItem2';
 
@@ -20,6 +21,16 @@ const MUI_X_PRODUCTS = [
       { id: 'pickers-pro', label: '@mui/x-date-pickers-pro' },
     ],
   },
+  {
+    id: 'charts',
+    label: 'Charts',
+    children: [{ id: 'charts-community', label: '@mui/x-charts' }],
+  },
+  {
+    id: 'tree-view',
+    label: 'Tree View',
+    children: [{ id: 'tree-view-community', label: '@mui/x-tree-view' }],
+  },
 ];
 
 const CustomTreeItem = React.forwardRef((props, ref) => (
@@ -36,12 +47,12 @@ const CustomTreeItem = React.forwardRef((props, ref) => (
 
 export default function LabelSlotProps() {
   return (
-    <RichTreeView
-      items={MUI_X_PRODUCTS}
-      aria-label="customized"
-      defaultExpandedItems={['pickers']}
-      sx={{ overflowX: 'hidden', minHeight: 224, flexGrow: 1, maxWidth: 300 }}
-      slots={{ item: CustomTreeItem }}
-    />
+    <Box sx={{ minHeight: 352, minWidth: 250 }}>
+      <RichTreeView
+        items={MUI_X_PRODUCTS}
+        defaultExpandedItems={['grid']}
+        slots={{ item: CustomTreeItem }}
+      />
+    </Box>
   );
 }
diff --git a/docs/data/tree-view/rich-tree-view/customization/LabelSlotProps.tsx b/docs/data/tree-view/rich-tree-view/customization/LabelSlotProps.tsx
index 99f29c8d5d29d..a94af1fab5afc 100644
--- a/docs/data/tree-view/rich-tree-view/customization/LabelSlotProps.tsx
+++ b/docs/data/tree-view/rich-tree-view/customization/LabelSlotProps.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import Box from '@mui/material/Box';
 import { RichTreeView } from '@mui/x-tree-view/RichTreeView';
 import { TreeItem2, TreeItem2Props } from '@mui/x-tree-view/TreeItem2';
 import { TreeViewBaseItem } from '@mui/x-tree-view/models';
@@ -21,6 +22,16 @@ const MUI_X_PRODUCTS: TreeViewBaseItem[] = [
       { id: 'pickers-pro', label: '@mui/x-date-pickers-pro' },
     ],
   },
+  {
+    id: 'charts',
+    label: 'Charts',
+    children: [{ id: 'charts-community', label: '@mui/x-charts' }],
+  },
+  {
+    id: 'tree-view',
+    label: 'Tree View',
+    children: [{ id: 'tree-view-community', label: '@mui/x-tree-view' }],
+  },
 ];
 
 const CustomTreeItem = React.forwardRef(
@@ -39,12 +50,12 @@ const CustomTreeItem = React.forwardRef(
 
 export default function LabelSlotProps() {
   return (
-    <RichTreeView
-      items={MUI_X_PRODUCTS}
-      aria-label="customized"
-      defaultExpandedItems={['pickers']}
-      sx={{ overflowX: 'hidden', minHeight: 224, flexGrow: 1, maxWidth: 300 }}
-      slots={{ item: CustomTreeItem }}
-    />
+    <Box sx={{ minHeight: 352, minWidth: 250 }}>
+      <RichTreeView
+        items={MUI_X_PRODUCTS}
+        defaultExpandedItems={['grid']}
+        slots={{ item: CustomTreeItem }}
+      />
+    </Box>
   );
 }
diff --git a/docs/data/tree-view/rich-tree-view/customization/LabelSlotProps.tsx.preview b/docs/data/tree-view/rich-tree-view/customization/LabelSlotProps.tsx.preview
index 511debc05ff2a..fafc88534a229 100644
--- a/docs/data/tree-view/rich-tree-view/customization/LabelSlotProps.tsx.preview
+++ b/docs/data/tree-view/rich-tree-view/customization/LabelSlotProps.tsx.preview
@@ -1,7 +1,5 @@
 <RichTreeView
   items={MUI_X_PRODUCTS}
-  aria-label="customized"
-  defaultExpandedItems={['pickers']}
-  sx={{ overflowX: 'hidden', minHeight: 224, flexGrow: 1, maxWidth: 300 }}
+  defaultExpandedItems={['grid']}
   slots={{ item: CustomTreeItem }}
 />
\ No newline at end of file
diff --git a/docs/data/tree-view/rich-tree-view/customization/LabelSlots.js b/docs/data/tree-view/rich-tree-view/customization/LabelSlots.js
index 52402c34a18b8..a60e4b522ba56 100644
--- a/docs/data/tree-view/rich-tree-view/customization/LabelSlots.js
+++ b/docs/data/tree-view/rich-tree-view/customization/LabelSlots.js
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import Box from '@mui/material/Box';
 import { TreeItem2, TreeItem2Label } from '@mui/x-tree-view/TreeItem2';
 import { RichTreeView } from '@mui/x-tree-view/RichTreeView';
 
@@ -114,6 +115,16 @@ const DEFAULT_MUI_X_PRODUCTS = [
       { id: 'pickers-pro', label: '@mui/x-date-pickers-pro' },
     ],
   },
+  {
+    id: 'charts',
+    label: 'Charts',
+    children: [{ id: 'charts-community', label: '@mui/x-charts' }],
+  },
+  {
+    id: 'tree-view',
+    label: 'Tree View',
+    children: [{ id: 'tree-view-community', label: '@mui/x-tree-view' }],
+  },
 ];
 
 const DEFAULT_EXPANDED_ITEMS = ['pickers'];
@@ -143,14 +154,16 @@ export default function LabelSlots() {
   );
 
   return (
-    <TreeItemContext.Provider value={context}>
-      <RichTreeView
-        items={products}
-        aria-label="customized"
-        defaultExpandedItems={DEFAULT_EXPANDED_ITEMS}
-        sx={{ overflowX: 'hidden', minHeight: 224, flexGrow: 1, maxWidth: 300 }}
-        slots={{ item: CustomTreeItem }}
-      />
-    </TreeItemContext.Provider>
+    <Box sx={{ minHeight: 352, minWidth: 250 }}>
+      <TreeItemContext.Provider value={context}>
+        <RichTreeView
+          items={products}
+          aria-label="customized"
+          defaultExpandedItems={DEFAULT_EXPANDED_ITEMS}
+          sx={{ overflowX: 'hidden', minHeight: 224, flexGrow: 1, maxWidth: 300 }}
+          slots={{ item: CustomTreeItem }}
+        />
+      </TreeItemContext.Provider>
+    </Box>
   );
 }
diff --git a/docs/data/tree-view/rich-tree-view/customization/LabelSlots.tsx b/docs/data/tree-view/rich-tree-view/customization/LabelSlots.tsx
index e4975c392a44c..0c9b86ebd330b 100644
--- a/docs/data/tree-view/rich-tree-view/customization/LabelSlots.tsx
+++ b/docs/data/tree-view/rich-tree-view/customization/LabelSlots.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import Box from '@mui/material/Box';
 import {
   TreeItem2,
   TreeItem2Label,
@@ -131,6 +132,16 @@ const DEFAULT_MUI_X_PRODUCTS: TreeViewBaseItem[] = [
       { id: 'pickers-pro', label: '@mui/x-date-pickers-pro' },
     ],
   },
+  {
+    id: 'charts',
+    label: 'Charts',
+    children: [{ id: 'charts-community', label: '@mui/x-charts' }],
+  },
+  {
+    id: 'tree-view',
+    label: 'Tree View',
+    children: [{ id: 'tree-view-community', label: '@mui/x-tree-view' }],
+  },
 ];
 
 const DEFAULT_EXPANDED_ITEMS = ['pickers'];
@@ -160,14 +171,16 @@ export default function LabelSlots() {
   );
 
   return (
-    <TreeItemContext.Provider value={context}>
-      <RichTreeView
-        items={products}
-        aria-label="customized"
-        defaultExpandedItems={DEFAULT_EXPANDED_ITEMS}
-        sx={{ overflowX: 'hidden', minHeight: 224, flexGrow: 1, maxWidth: 300 }}
-        slots={{ item: CustomTreeItem }}
-      />
-    </TreeItemContext.Provider>
+    <Box sx={{ minHeight: 352, minWidth: 250 }}>
+      <TreeItemContext.Provider value={context}>
+        <RichTreeView
+          items={products}
+          aria-label="customized"
+          defaultExpandedItems={DEFAULT_EXPANDED_ITEMS}
+          sx={{ overflowX: 'hidden', minHeight: 224, flexGrow: 1, maxWidth: 300 }}
+          slots={{ item: CustomTreeItem }}
+        />
+      </TreeItemContext.Provider>
+    </Box>
   );
 }
diff --git a/docs/data/tree-view/rich-tree-view/customization/customization.md b/docs/data/tree-view/rich-tree-view/customization/customization.md
index da4b3e57a2cce..8f1552b6f0df4 100644
--- a/docs/data/tree-view/rich-tree-view/customization/customization.md
+++ b/docs/data/tree-view/rich-tree-view/customization/customization.md
@@ -51,7 +51,7 @@ The demo below shows how to pass an `id` attribute to the Tree Item label:
 {{"demo": "LabelSlotProps.js", "defaultCodeOpen": false }}
 
 The `slots` prop allows you to replace the default label with your own component:
-The demo below shows how to add a tooltip on the Tree Item label:
+The demo below shows how to add a basic edition feature on the Tree Item label:
 
 {{"demo": "LabelSlots.js", "defaultCodeOpen": false}}
 
@@ -60,7 +60,7 @@ The demo below shows how to add a tooltip on the Tree Item label:
 Use the `useTreeItem2` hook to create your own component.
 The demo below shows how to add an avatar and custom typography elements.
 
-{{"demo": "CustomContentTreeView.js", "defaultCodeOpen": false}}
+{{"demo": "HeadlessAPI.js", "defaultCodeOpen": false}}
 
 ## Common examples
 
diff --git a/docs/data/tree-view/rich-tree-view/expansion/ApiMethodSetItemExpansion.js b/docs/data/tree-view/rich-tree-view/expansion/ApiMethodSetItemExpansion.js
index 54ef0fe7b1732..403f4f30d65a3 100644
--- a/docs/data/tree-view/rich-tree-view/expansion/ApiMethodSetItemExpansion.js
+++ b/docs/data/tree-view/rich-tree-view/expansion/ApiMethodSetItemExpansion.js
@@ -24,6 +24,16 @@ const MUI_X_PRODUCTS = [
       { id: 'pickers-pro', label: '@mui/x-date-pickers-pro' },
     ],
   },
+  {
+    id: 'charts',
+    label: 'Charts',
+    children: [{ id: 'charts-community', label: '@mui/x-charts' }],
+  },
+  {
+    id: 'tree-view',
+    label: 'Tree View',
+    children: [{ id: 'tree-view-community', label: '@mui/x-tree-view' }],
+  },
 ];
 
 export default function ApiMethodSetItemExpansion() {
@@ -38,14 +48,14 @@ export default function ApiMethodSetItemExpansion() {
   };
 
   return (
-    <Box sx={{ flexGrow: 1, maxWidth: 400 }}>
-      <Stack sx={{ mb: 1 }} spacing={2} direction="row">
+    <Stack spacing={2}>
+      <Stack spacing={2} direction="row">
         <Button onClick={handleExpandClick}>Expand Data Grid</Button>
         <Button onClick={handleCollapseClick}>Collapse Data Grid</Button>
       </Stack>
-      <Box sx={{ minHeight: 220, flexGrow: 1 }}>
+      <Box sx={{ minHeight: 352, minWidth: 250 }}>
         <RichTreeView items={MUI_X_PRODUCTS} apiRef={apiRef} />
       </Box>
-    </Box>
+    </Stack>
   );
 }
diff --git a/docs/data/tree-view/rich-tree-view/expansion/ApiMethodSetItemExpansion.tsx b/docs/data/tree-view/rich-tree-view/expansion/ApiMethodSetItemExpansion.tsx
index 051424e259509..f0788877de8df 100644
--- a/docs/data/tree-view/rich-tree-view/expansion/ApiMethodSetItemExpansion.tsx
+++ b/docs/data/tree-view/rich-tree-view/expansion/ApiMethodSetItemExpansion.tsx
@@ -24,6 +24,16 @@ const MUI_X_PRODUCTS: TreeViewBaseItem[] = [
       { id: 'pickers-pro', label: '@mui/x-date-pickers-pro' },
     ],
   },
+  {
+    id: 'charts',
+    label: 'Charts',
+    children: [{ id: 'charts-community', label: '@mui/x-charts' }],
+  },
+  {
+    id: 'tree-view',
+    label: 'Tree View',
+    children: [{ id: 'tree-view-community', label: '@mui/x-tree-view' }],
+  },
 ];
 
 export default function ApiMethodSetItemExpansion() {
@@ -38,14 +48,14 @@ export default function ApiMethodSetItemExpansion() {
   };
 
   return (
-    <Box sx={{ flexGrow: 1, maxWidth: 400 }}>
-      <Stack sx={{ mb: 1 }} spacing={2} direction="row">
+    <Stack spacing={2}>
+      <Stack spacing={2} direction="row">
         <Button onClick={handleExpandClick}>Expand Data Grid</Button>
         <Button onClick={handleCollapseClick}>Collapse Data Grid</Button>
       </Stack>
-      <Box sx={{ minHeight: 220, flexGrow: 1 }}>
+      <Box sx={{ minHeight: 352, minWidth: 250 }}>
         <RichTreeView items={MUI_X_PRODUCTS} apiRef={apiRef} />
       </Box>
-    </Box>
+    </Stack>
   );
 }
diff --git a/docs/data/tree-view/rich-tree-view/expansion/ApiMethodSetItemExpansion.tsx.preview b/docs/data/tree-view/rich-tree-view/expansion/ApiMethodSetItemExpansion.tsx.preview
index ca89ea196b8b9..d07881acb938f 100644
--- a/docs/data/tree-view/rich-tree-view/expansion/ApiMethodSetItemExpansion.tsx.preview
+++ b/docs/data/tree-view/rich-tree-view/expansion/ApiMethodSetItemExpansion.tsx.preview
@@ -1,7 +1,7 @@
-<Stack sx={{ mb: 1 }} spacing={2} direction="row">
+<Stack spacing={2} direction="row">
   <Button onClick={handleExpandClick}>Expand Data Grid</Button>
   <Button onClick={handleCollapseClick}>Collapse Data Grid</Button>
 </Stack>
-<Box sx={{ minHeight: 220, flexGrow: 1 }}>
+<Box sx={{ minHeight: 352, minWidth: 250 }}>
   <RichTreeView items={MUI_X_PRODUCTS} apiRef={apiRef} />
 </Box>
\ No newline at end of file
diff --git a/docs/data/tree-view/rich-tree-view/expansion/ControlledExpansion.js b/docs/data/tree-view/rich-tree-view/expansion/ControlledExpansion.js
index bcc49a4c33c45..4a18499fcc8e3 100644
--- a/docs/data/tree-view/rich-tree-view/expansion/ControlledExpansion.js
+++ b/docs/data/tree-view/rich-tree-view/expansion/ControlledExpansion.js
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
 import Button from '@mui/material/Button';
 import { RichTreeView } from '@mui/x-tree-view/RichTreeView';
 
@@ -61,19 +62,19 @@ export default function ControlledExpansion() {
   };
 
   return (
-    <Box sx={{ flexGrow: 1, maxWidth: 400 }}>
-      <Box sx={{ mb: 1 }}>
+    <Stack spacing={2}>
+      <div>
         <Button onClick={handleExpandClick}>
           {expandedItems.length === 0 ? 'Expand all' : 'Collapse all'}
         </Button>
-      </Box>
-      <Box sx={{ minHeight: 200, flexGrow: 1 }}>
+      </div>
+      <Box sx={{ minHeight: 352, minWidth: 250 }}>
         <RichTreeView
           items={MUI_X_PRODUCTS}
           expandedItems={expandedItems}
           onExpandedItemsChange={handleExpandedItemsChange}
         />
       </Box>
-    </Box>
+    </Stack>
   );
 }
diff --git a/docs/data/tree-view/rich-tree-view/expansion/ControlledExpansion.tsx b/docs/data/tree-view/rich-tree-view/expansion/ControlledExpansion.tsx
index 83d8260914785..44009d3868d14 100644
--- a/docs/data/tree-view/rich-tree-view/expansion/ControlledExpansion.tsx
+++ b/docs/data/tree-view/rich-tree-view/expansion/ControlledExpansion.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
 import Button from '@mui/material/Button';
 import { RichTreeView } from '@mui/x-tree-view/RichTreeView';
 import { TreeViewBaseItem, TreeViewItemId } from '@mui/x-tree-view/models';
@@ -65,19 +66,19 @@ export default function ControlledExpansion() {
   };
 
   return (
-    <Box sx={{ flexGrow: 1, maxWidth: 400 }}>
-      <Box sx={{ mb: 1 }}>
+    <Stack spacing={2}>
+      <div>
         <Button onClick={handleExpandClick}>
           {expandedItems.length === 0 ? 'Expand all' : 'Collapse all'}
         </Button>
-      </Box>
-      <Box sx={{ minHeight: 200, flexGrow: 1 }}>
+      </div>
+      <Box sx={{ minHeight: 352, minWidth: 250 }}>
         <RichTreeView
           items={MUI_X_PRODUCTS}
           expandedItems={expandedItems}
           onExpandedItemsChange={handleExpandedItemsChange}
         />
       </Box>
-    </Box>
+    </Stack>
   );
 }
diff --git a/docs/data/tree-view/rich-tree-view/expansion/ControlledExpansion.tsx.preview b/docs/data/tree-view/rich-tree-view/expansion/ControlledExpansion.tsx.preview
index 8a83ec46e5411..de405a6043118 100644
--- a/docs/data/tree-view/rich-tree-view/expansion/ControlledExpansion.tsx.preview
+++ b/docs/data/tree-view/rich-tree-view/expansion/ControlledExpansion.tsx.preview
@@ -1,9 +1,9 @@
-<Box sx={{ mb: 1 }}>
+<div>
   <Button onClick={handleExpandClick}>
     {expandedItems.length === 0 ? 'Expand all' : 'Collapse all'}
   </Button>
-</Box>
-<Box sx={{ minHeight: 200, flexGrow: 1 }}>
+</div>
+<Box sx={{ minHeight: 352, minWidth: 250 }}>
   <RichTreeView
     items={MUI_X_PRODUCTS}
     expandedItems={expandedItems}
diff --git a/docs/data/tree-view/rich-tree-view/expansion/TrackItemExpansionToggle.js b/docs/data/tree-view/rich-tree-view/expansion/TrackItemExpansionToggle.js
index 22ab08e87b2a4..ad135b68d7fa1 100644
--- a/docs/data/tree-view/rich-tree-view/expansion/TrackItemExpansionToggle.js
+++ b/docs/data/tree-view/rich-tree-view/expansion/TrackItemExpansionToggle.js
@@ -52,7 +52,7 @@ export default function TrackItemExpansionToggle() {
         </Typography>
       )}
 
-      <Box sx={{ minHeight: 200, minWidth: 300, flexGrow: 1 }}>
+      <Box sx={{ minHeight: 352, minWidth: 250 }}>
         <RichTreeView
           items={MUI_X_PRODUCTS}
           onItemExpansionToggle={handleItemExpansionToggle}
diff --git a/docs/data/tree-view/rich-tree-view/expansion/TrackItemExpansionToggle.tsx b/docs/data/tree-view/rich-tree-view/expansion/TrackItemExpansionToggle.tsx
index 987bb9b2f6747..51f806149b21e 100644
--- a/docs/data/tree-view/rich-tree-view/expansion/TrackItemExpansionToggle.tsx
+++ b/docs/data/tree-view/rich-tree-view/expansion/TrackItemExpansionToggle.tsx
@@ -58,7 +58,7 @@ export default function TrackItemExpansionToggle() {
           Last action: {action.isExpanded ? 'expand' : 'collapse'} {action.itemId}
         </Typography>
       )}
-      <Box sx={{ minHeight: 200, minWidth: 300, flexGrow: 1 }}>
+      <Box sx={{ minHeight: 352, minWidth: 250 }}>
         <RichTreeView
           items={MUI_X_PRODUCTS}
           onItemExpansionToggle={handleItemExpansionToggle}
diff --git a/docs/data/tree-view/rich-tree-view/expansion/TrackItemExpansionToggle.tsx.preview b/docs/data/tree-view/rich-tree-view/expansion/TrackItemExpansionToggle.tsx.preview
index 81762cedbdb45..e58c7c00526bd 100644
--- a/docs/data/tree-view/rich-tree-view/expansion/TrackItemExpansionToggle.tsx.preview
+++ b/docs/data/tree-view/rich-tree-view/expansion/TrackItemExpansionToggle.tsx.preview
@@ -5,7 +5,7 @@
     Last action: {action.isExpanded ? 'expand' : 'collapse'} {action.itemId}
   </Typography>
 )}
-<Box sx={{ minHeight: 200, minWidth: 300, flexGrow: 1 }}>
+<Box sx={{ minHeight: 352, minWidth: 250 }}>
   <RichTreeView
     items={MUI_X_PRODUCTS}
     onItemExpansionToggle={handleItemExpansionToggle}
diff --git a/docs/data/tree-view/rich-tree-view/focus/ApiMethodFocusItem.js b/docs/data/tree-view/rich-tree-view/focus/ApiMethodFocusItem.js
index 4dc583c1c6a8f..21edd6b04eac4 100644
--- a/docs/data/tree-view/rich-tree-view/focus/ApiMethodFocusItem.js
+++ b/docs/data/tree-view/rich-tree-view/focus/ApiMethodFocusItem.js
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
 import Button from '@mui/material/Button';
 import { RichTreeView } from '@mui/x-tree-view/RichTreeView';
 
@@ -42,13 +43,13 @@ export default function ApiMethodFocusItem() {
   };
 
   return (
-    <Box sx={{ flexGrow: 1, maxWidth: 400 }}>
-      <Box sx={{ mb: 1 }}>
+    <Stack spacing={2}>
+      <div>
         <Button onClick={handleButtonClick}>Focus pickers item</Button>
-      </Box>
-      <Box sx={{ height: 264, flexGrow: 1 }}>
+      </div>
+      <Box sx={{ minHeight: 352, minWidth: 250 }}>
         <RichTreeView items={MUI_X_PRODUCTS} apiRef={apiRef} />
       </Box>
-    </Box>
+    </Stack>
   );
 }
diff --git a/docs/data/tree-view/rich-tree-view/focus/ApiMethodFocusItem.tsx b/docs/data/tree-view/rich-tree-view/focus/ApiMethodFocusItem.tsx
index 364a83f58a5c3..22732137d9ff1 100644
--- a/docs/data/tree-view/rich-tree-view/focus/ApiMethodFocusItem.tsx
+++ b/docs/data/tree-view/rich-tree-view/focus/ApiMethodFocusItem.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
 import Button from '@mui/material/Button';
 import { RichTreeView } from '@mui/x-tree-view/RichTreeView';
 import { TreeViewBaseItem } from '@mui/x-tree-view/models';
@@ -42,13 +43,13 @@ export default function ApiMethodFocusItem() {
   };
 
   return (
-    <Box sx={{ flexGrow: 1, maxWidth: 400 }}>
-      <Box sx={{ mb: 1 }}>
+    <Stack spacing={2}>
+      <div>
         <Button onClick={handleButtonClick}>Focus pickers item</Button>
-      </Box>
-      <Box sx={{ height: 264, flexGrow: 1 }}>
+      </div>
+      <Box sx={{ minHeight: 352, minWidth: 250 }}>
         <RichTreeView items={MUI_X_PRODUCTS} apiRef={apiRef} />
       </Box>
-    </Box>
+    </Stack>
   );
 }
diff --git a/docs/data/tree-view/rich-tree-view/focus/ApiMethodFocusItem.tsx.preview b/docs/data/tree-view/rich-tree-view/focus/ApiMethodFocusItem.tsx.preview
index 144d8e4e8dd5d..d1343eb1f83dd 100644
--- a/docs/data/tree-view/rich-tree-view/focus/ApiMethodFocusItem.tsx.preview
+++ b/docs/data/tree-view/rich-tree-view/focus/ApiMethodFocusItem.tsx.preview
@@ -1,6 +1,6 @@
-<Box sx={{ mb: 1 }}>
+<div>
   <Button onClick={handleButtonClick}>Focus pickers item</Button>
-</Box>
-<Box sx={{ height: 264, flexGrow: 1 }}>
+</div>
+<Box sx={{ minHeight: 352, minWidth: 250 }}>
   <RichTreeView items={MUI_X_PRODUCTS} apiRef={apiRef} />
 </Box>
\ No newline at end of file
diff --git a/docs/data/tree-view/rich-tree-view/items/ApiMethodGetItem.js b/docs/data/tree-view/rich-tree-view/items/ApiMethodGetItem.js
index 84b3d54baaccc..088f827593f06 100644
--- a/docs/data/tree-view/rich-tree-view/items/ApiMethodGetItem.js
+++ b/docs/data/tree-view/rich-tree-view/items/ApiMethodGetItem.js
@@ -24,6 +24,16 @@ const MUI_X_PRODUCTS = [
       { id: 'pickers-pro', label: '@mui/x-date-pickers-pro' },
     ],
   },
+  {
+    id: 'charts',
+    label: 'Charts',
+    children: [{ id: 'charts-community', label: '@mui/x-charts' }],
+  },
+  {
+    id: 'tree-view',
+    label: 'Tree View',
+    children: [{ id: 'tree-view-community', label: '@mui/x-tree-view' }],
+  },
 ];
 
 export default function ApiMethodGetItem() {
@@ -40,10 +50,10 @@ export default function ApiMethodGetItem() {
 
   return (
     <Stack spacing={2}>
-      <Typography>
+      <Typography sx={{ minWidth: 300 }}>
         Selected item: {selectedItem == null ? 'none' : selectedItem.label}
       </Typography>
-      <Box sx={{ minHeight: 220, minWidth: 320, flexGrow: 1 }}>
+      <Box sx={{ minHeight: 352, minWidth: 250 }}>
         <RichTreeView
           items={MUI_X_PRODUCTS}
           apiRef={apiRef}
diff --git a/docs/data/tree-view/rich-tree-view/items/ApiMethodGetItem.tsx b/docs/data/tree-view/rich-tree-view/items/ApiMethodGetItem.tsx
index b21fbbc7f888b..94679340fad7b 100644
--- a/docs/data/tree-view/rich-tree-view/items/ApiMethodGetItem.tsx
+++ b/docs/data/tree-view/rich-tree-view/items/ApiMethodGetItem.tsx
@@ -24,6 +24,16 @@ const MUI_X_PRODUCTS: TreeViewBaseItem[] = [
       { id: 'pickers-pro', label: '@mui/x-date-pickers-pro' },
     ],
   },
+  {
+    id: 'charts',
+    label: 'Charts',
+    children: [{ id: 'charts-community', label: '@mui/x-charts' }],
+  },
+  {
+    id: 'tree-view',
+    label: 'Tree View',
+    children: [{ id: 'tree-view-community', label: '@mui/x-tree-view' }],
+  },
 ];
 
 export default function ApiMethodGetItem() {
@@ -45,10 +55,10 @@ export default function ApiMethodGetItem() {
 
   return (
     <Stack spacing={2}>
-      <Typography>
+      <Typography sx={{ minWidth: 300 }}>
         Selected item: {selectedItem == null ? 'none' : selectedItem.label}
       </Typography>
-      <Box sx={{ minHeight: 220, minWidth: 320, flexGrow: 1 }}>
+      <Box sx={{ minHeight: 352, minWidth: 250 }}>
         <RichTreeView
           items={MUI_X_PRODUCTS}
           apiRef={apiRef}
diff --git a/docs/data/tree-view/rich-tree-view/items/ApiMethodGetItem.tsx.preview b/docs/data/tree-view/rich-tree-view/items/ApiMethodGetItem.tsx.preview
index 640e65a388c39..8e43259ee7084 100644
--- a/docs/data/tree-view/rich-tree-view/items/ApiMethodGetItem.tsx.preview
+++ b/docs/data/tree-view/rich-tree-view/items/ApiMethodGetItem.tsx.preview
@@ -1,7 +1,7 @@
-<Typography>
+<Typography sx={{ minWidth: 300 }}>
   Selected item: {selectedItem == null ? 'none' : selectedItem.label}
 </Typography>
-<Box sx={{ minHeight: 220, minWidth: 320, flexGrow: 1 }}>
+<Box sx={{ minHeight: 352, minWidth: 250 }}>
   <RichTreeView
     items={MUI_X_PRODUCTS}
     apiRef={apiRef}
diff --git a/docs/data/tree-view/rich-tree-view/items/BasicRichTreeView.js b/docs/data/tree-view/rich-tree-view/items/BasicRichTreeView.js
index 1758169287e64..7bb6d22d66dd2 100644
--- a/docs/data/tree-view/rich-tree-view/items/BasicRichTreeView.js
+++ b/docs/data/tree-view/rich-tree-view/items/BasicRichTreeView.js
@@ -21,11 +21,21 @@ const MUI_X_PRODUCTS = [
       { id: 'pickers-pro', label: '@mui/x-date-pickers-pro' },
     ],
   },
+  {
+    id: 'charts',
+    label: 'Charts',
+    children: [{ id: 'charts-community', label: '@mui/x-charts' }],
+  },
+  {
+    id: 'tree-view',
+    label: 'Tree View',
+    children: [{ id: 'tree-view-community', label: '@mui/x-tree-view' }],
+  },
 ];
 
 export default function BasicRichTreeView() {
   return (
-    <Box sx={{ minHeight: 200, flexGrow: 1, maxWidth: 400 }}>
+    <Box sx={{ minHeight: 352, minWidth: 250 }}>
       <RichTreeView items={MUI_X_PRODUCTS} />
     </Box>
   );
diff --git a/docs/data/tree-view/rich-tree-view/items/BasicRichTreeView.tsx b/docs/data/tree-view/rich-tree-view/items/BasicRichTreeView.tsx
index 12357940fd8b9..e18e3bfcc0701 100644
--- a/docs/data/tree-view/rich-tree-view/items/BasicRichTreeView.tsx
+++ b/docs/data/tree-view/rich-tree-view/items/BasicRichTreeView.tsx
@@ -21,11 +21,21 @@ const MUI_X_PRODUCTS: TreeViewBaseItem[] = [
       { id: 'pickers-pro', label: '@mui/x-date-pickers-pro' },
     ],
   },
+  {
+    id: 'charts',
+    label: 'Charts',
+    children: [{ id: 'charts-community', label: '@mui/x-charts' }],
+  },
+  {
+    id: 'tree-view',
+    label: 'Tree View',
+    children: [{ id: 'tree-view-community', label: '@mui/x-tree-view' }],
+  },
 ];
 
 export default function BasicRichTreeView() {
   return (
-    <Box sx={{ minHeight: 200, flexGrow: 1, maxWidth: 400 }}>
+    <Box sx={{ minHeight: 352, minWidth: 250 }}>
       <RichTreeView items={MUI_X_PRODUCTS} />
     </Box>
   );
diff --git a/docs/data/tree-view/rich-tree-view/items/DisabledItemsFocusable.js b/docs/data/tree-view/rich-tree-view/items/DisabledItemsFocusable.js
index 01d3c61bd5f5c..250b4943b8256 100644
--- a/docs/data/tree-view/rich-tree-view/items/DisabledItemsFocusable.js
+++ b/docs/data/tree-view/rich-tree-view/items/DisabledItemsFocusable.js
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import Stack from '@mui/material/Stack';
 import Box from '@mui/material/Box';
 import Switch from '@mui/material/Switch';
 import FormControlLabel from '@mui/material/FormControlLabel';
@@ -26,21 +27,13 @@ const MUI_X_PRODUCTS = [
   {
     id: 'charts',
     label: 'Charts',
-    children: [{ id: 'charts-community', label: '@mui/x-charts' }],
+    children: [{ id: 'charts-community', label: '@mui/x-charts', disabled: true }],
   },
   {
     id: 'tree-view',
     label: 'Tree View',
-    children: [
-      { id: 'tree-view-community', label: '@mui/x-tree-view' },
-      { id: 'tree-view-pro', label: '@mui/x-tree-view-pro', disabled: true },
-    ],
-  },
-  {
-    id: 'scheduler',
-    label: 'Scheduler',
     disabled: true,
-    children: [{ id: 'scheduler-community', label: '@mui/x-scheduler' }],
+    children: [{ id: 'tree-view-community', label: '@mui/x-tree-view' }],
   },
 ];
 
@@ -53,26 +46,24 @@ export default function DisabledItemsFocusable() {
   };
 
   return (
-    <Box sx={{ flexGrow: 1, maxWidth: 400 }}>
-      <Box sx={{ mb: 1 }}>
-        <FormControlLabel
-          control={
-            <Switch
-              checked={disabledItemsFocusable}
-              onChange={handleToggle}
-              name="disabledItemsFocusable"
-            />
-          }
-          label="Allow focusing disabled items"
-        />
-      </Box>
-      <Box sx={{ minHeight: 200, flexGrow: 1, maxWidth: 400 }}>
+    <Stack spacing={2}>
+      <FormControlLabel
+        control={
+          <Switch
+            checked={disabledItemsFocusable}
+            onChange={handleToggle}
+            name="disabledItemsFocusable"
+          />
+        }
+        label="Allow focusing disabled items"
+      />
+      <Box sx={{ minHeight: 352, minWidth: 250 }}>
         <RichTreeView
           items={MUI_X_PRODUCTS}
           isItemDisabled={isItemDisabled}
           disabledItemsFocusable={disabledItemsFocusable}
         />
       </Box>
-    </Box>
+    </Stack>
   );
 }
diff --git a/docs/data/tree-view/rich-tree-view/items/DisabledItemsFocusable.tsx b/docs/data/tree-view/rich-tree-view/items/DisabledItemsFocusable.tsx
index 47525b38aedd0..967e820febdea 100644
--- a/docs/data/tree-view/rich-tree-view/items/DisabledItemsFocusable.tsx
+++ b/docs/data/tree-view/rich-tree-view/items/DisabledItemsFocusable.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import Stack from '@mui/material/Stack';
 import Box from '@mui/material/Box';
 import Switch from '@mui/material/Switch';
 import FormControlLabel from '@mui/material/FormControlLabel';
@@ -32,21 +33,13 @@ const MUI_X_PRODUCTS: MuiXProduct[] = [
   {
     id: 'charts',
     label: 'Charts',
-    children: [{ id: 'charts-community', label: '@mui/x-charts' }],
+    children: [{ id: 'charts-community', label: '@mui/x-charts', disabled: true }],
   },
   {
     id: 'tree-view',
     label: 'Tree View',
-    children: [
-      { id: 'tree-view-community', label: '@mui/x-tree-view' },
-      { id: 'tree-view-pro', label: '@mui/x-tree-view-pro', disabled: true },
-    ],
-  },
-  {
-    id: 'scheduler',
-    label: 'Scheduler',
     disabled: true,
-    children: [{ id: 'scheduler-community', label: '@mui/x-scheduler' }],
+    children: [{ id: 'tree-view-community', label: '@mui/x-tree-view' }],
   },
 ];
 
@@ -59,26 +52,24 @@ export default function DisabledItemsFocusable() {
   };
 
   return (
-    <Box sx={{ flexGrow: 1, maxWidth: 400 }}>
-      <Box sx={{ mb: 1 }}>
-        <FormControlLabel
-          control={
-            <Switch
-              checked={disabledItemsFocusable}
-              onChange={handleToggle}
-              name="disabledItemsFocusable"
-            />
-          }
-          label="Allow focusing disabled items"
-        />
-      </Box>
-      <Box sx={{ minHeight: 200, flexGrow: 1, maxWidth: 400 }}>
+    <Stack spacing={2}>
+      <FormControlLabel
+        control={
+          <Switch
+            checked={disabledItemsFocusable}
+            onChange={handleToggle}
+            name="disabledItemsFocusable"
+          />
+        }
+        label="Allow focusing disabled items"
+      />
+      <Box sx={{ minHeight: 352, minWidth: 250 }}>
         <RichTreeView
           items={MUI_X_PRODUCTS}
           isItemDisabled={isItemDisabled}
           disabledItemsFocusable={disabledItemsFocusable}
         />
       </Box>
-    </Box>
+    </Stack>
   );
 }
diff --git a/docs/data/tree-view/rich-tree-view/items/DisabledPropItem.js b/docs/data/tree-view/rich-tree-view/items/DisabledPropItem.js
index 07994b675ecbc..07a64c0e72adf 100644
--- a/docs/data/tree-view/rich-tree-view/items/DisabledPropItem.js
+++ b/docs/data/tree-view/rich-tree-view/items/DisabledPropItem.js
@@ -24,21 +24,13 @@ const MUI_X_PRODUCTS = [
   {
     id: 'charts',
     label: 'Charts',
-    children: [{ id: 'charts-community', label: '@mui/x-charts' }],
+    children: [{ id: 'charts-community', label: '@mui/x-charts', disabled: true }],
   },
   {
     id: 'tree-view',
     label: 'Tree View',
-    children: [
-      { id: 'tree-view-community', label: '@mui/x-tree-view' },
-      { id: 'tree-view-pro', label: '@mui/x-tree-view-pro', disabled: true },
-    ],
-  },
-  {
-    id: 'scheduler',
-    label: 'Scheduler',
     disabled: true,
-    children: [{ id: 'scheduler-community', label: '@mui/x-scheduler' }],
+    children: [{ id: 'tree-view-community', label: '@mui/x-tree-view' }],
   },
 ];
 
@@ -46,7 +38,7 @@ const isItemDisabled = (item) => !!item.disabled;
 
 export default function DisabledPropItem() {
   return (
-    <Box sx={{ minHeight: 200, flexGrow: 1, maxWidth: 400 }}>
+    <Box sx={{ minHeight: 352, minWidth: 250 }}>
       <RichTreeView items={MUI_X_PRODUCTS} isItemDisabled={isItemDisabled} />
     </Box>
   );
diff --git a/docs/data/tree-view/rich-tree-view/items/DisabledPropItem.tsx b/docs/data/tree-view/rich-tree-view/items/DisabledPropItem.tsx
index 5d5b0a2a9c624..bdff28a6ddfbd 100644
--- a/docs/data/tree-view/rich-tree-view/items/DisabledPropItem.tsx
+++ b/docs/data/tree-view/rich-tree-view/items/DisabledPropItem.tsx
@@ -30,21 +30,13 @@ const MUI_X_PRODUCTS: MuiXProduct[] = [
   {
     id: 'charts',
     label: 'Charts',
-    children: [{ id: 'charts-community', label: '@mui/x-charts' }],
+    children: [{ id: 'charts-community', label: '@mui/x-charts', disabled: true }],
   },
   {
     id: 'tree-view',
     label: 'Tree View',
-    children: [
-      { id: 'tree-view-community', label: '@mui/x-tree-view' },
-      { id: 'tree-view-pro', label: '@mui/x-tree-view-pro', disabled: true },
-    ],
-  },
-  {
-    id: 'scheduler',
-    label: 'Scheduler',
     disabled: true,
-    children: [{ id: 'scheduler-community', label: '@mui/x-scheduler' }],
+    children: [{ id: 'tree-view-community', label: '@mui/x-tree-view' }],
   },
 ];
 
@@ -52,7 +44,7 @@ const isItemDisabled = (item: MuiXProduct) => !!item.disabled;
 
 export default function DisabledPropItem() {
   return (
-    <Box sx={{ minHeight: 200, flexGrow: 1, maxWidth: 400 }}>
+    <Box sx={{ minHeight: 352, minWidth: 250 }}>
       <RichTreeView items={MUI_X_PRODUCTS} isItemDisabled={isItemDisabled} />
     </Box>
   );
diff --git a/docs/data/tree-view/rich-tree-view/items/GetItemId.js b/docs/data/tree-view/rich-tree-view/items/GetItemId.js
index 72a50eaeb7e63..10dc7537fa377 100644
--- a/docs/data/tree-view/rich-tree-view/items/GetItemId.js
+++ b/docs/data/tree-view/rich-tree-view/items/GetItemId.js
@@ -21,13 +21,23 @@ const MUI_X_PRODUCTS = [
       { internalId: 'pickers-pro', label: '@mui/x-date-pickers-pro' },
     ],
   },
+  {
+    internalId: 'charts',
+    label: 'Charts',
+    children: [{ internalId: 'charts-community', label: '@mui/x-charts' }],
+  },
+  {
+    internalId: 'tree-view',
+    label: 'Tree View',
+    children: [{ internalId: 'tree-view-community', label: '@mui/x-tree-view' }],
+  },
 ];
 
 const getItemId = (item) => item.internalId;
 
 export default function GetItemId() {
   return (
-    <Box sx={{ minHeight: 200, flexGrow: 1, maxWidth: 400 }}>
+    <Box sx={{ minHeight: 352, minWidth: 250 }}>
       <RichTreeView items={MUI_X_PRODUCTS} getItemId={getItemId} />
     </Box>
   );
diff --git a/docs/data/tree-view/rich-tree-view/items/GetItemId.tsx b/docs/data/tree-view/rich-tree-view/items/GetItemId.tsx
index deca6e972944a..862f837b48b6f 100644
--- a/docs/data/tree-view/rich-tree-view/items/GetItemId.tsx
+++ b/docs/data/tree-view/rich-tree-view/items/GetItemId.tsx
@@ -26,13 +26,23 @@ const MUI_X_PRODUCTS: MuiXProduct[] = [
       { internalId: 'pickers-pro', label: '@mui/x-date-pickers-pro' },
     ],
   },
+  {
+    internalId: 'charts',
+    label: 'Charts',
+    children: [{ internalId: 'charts-community', label: '@mui/x-charts' }],
+  },
+  {
+    internalId: 'tree-view',
+    label: 'Tree View',
+    children: [{ internalId: 'tree-view-community', label: '@mui/x-tree-view' }],
+  },
 ];
 
 const getItemId = (item: MuiXProduct) => item.internalId;
 
 export default function GetItemId() {
   return (
-    <Box sx={{ minHeight: 200, flexGrow: 1, maxWidth: 400 }}>
+    <Box sx={{ minHeight: 352, minWidth: 250 }}>
       <RichTreeView items={MUI_X_PRODUCTS} getItemId={getItemId} />
     </Box>
   );
diff --git a/docs/data/tree-view/rich-tree-view/items/GetItemLabel.js b/docs/data/tree-view/rich-tree-view/items/GetItemLabel.js
index 830a782582043..a6248d09346f9 100644
--- a/docs/data/tree-view/rich-tree-view/items/GetItemLabel.js
+++ b/docs/data/tree-view/rich-tree-view/items/GetItemLabel.js
@@ -21,13 +21,23 @@ const MUI_X_PRODUCTS = [
       { id: 'pickers-pro', name: '@mui/x-date-pickers-pro' },
     ],
   },
+  {
+    id: 'charts',
+    name: 'Charts',
+    children: [{ id: 'charts-community', name: '@mui/x-charts' }],
+  },
+  {
+    id: 'tree-view',
+    name: 'Tree View',
+    children: [{ id: 'tree-view-community', name: '@mui/x-tree-view' }],
+  },
 ];
 
 const getItemLabel = (item) => item.name;
 
 export default function GetItemLabel() {
   return (
-    <Box sx={{ minHeight: 200, flexGrow: 1, maxWidth: 400 }}>
+    <Box sx={{ minHeight: 352, minWidth: 250 }}>
       <RichTreeView items={MUI_X_PRODUCTS} getItemLabel={getItemLabel} />
     </Box>
   );
diff --git a/docs/data/tree-view/rich-tree-view/items/GetItemLabel.tsx b/docs/data/tree-view/rich-tree-view/items/GetItemLabel.tsx
index 0d6815d0d6776..c122ca5773598 100644
--- a/docs/data/tree-view/rich-tree-view/items/GetItemLabel.tsx
+++ b/docs/data/tree-view/rich-tree-view/items/GetItemLabel.tsx
@@ -26,13 +26,23 @@ const MUI_X_PRODUCTS: MuiXProduct[] = [
       { id: 'pickers-pro', name: '@mui/x-date-pickers-pro' },
     ],
   },
+  {
+    id: 'charts',
+    name: 'Charts',
+    children: [{ id: 'charts-community', name: '@mui/x-charts' }],
+  },
+  {
+    id: 'tree-view',
+    name: 'Tree View',
+    children: [{ id: 'tree-view-community', name: '@mui/x-tree-view' }],
+  },
 ];
 
 const getItemLabel = (item: MuiXProduct) => item.name;
 
 export default function GetItemLabel() {
   return (
-    <Box sx={{ minHeight: 200, flexGrow: 1, maxWidth: 400 }}>
+    <Box sx={{ minHeight: 352, minWidth: 250 }}>
       <RichTreeView items={MUI_X_PRODUCTS} getItemLabel={getItemLabel} />
     </Box>
   );
diff --git a/docs/data/tree-view/rich-tree-view/items/items.md b/docs/data/tree-view/rich-tree-view/items/items.md
index 053934eabefae..9370571c23e39 100644
--- a/docs/data/tree-view/rich-tree-view/items/items.md
+++ b/docs/data/tree-view/rich-tree-view/items/items.md
@@ -141,6 +141,8 @@ When it's set to true:
 - <kbd class="key">Shift</kbd> + arrow keys will not skip disabled items, but the disabled item will not be selected.
 - Programmatic focus will focus disabled items.
 
+{{"demo": "DisabledItemsFocusable.js", "defaultCodeOpen": false}}
+
 ## Imperative API
 
 ### Get an item by ID
diff --git a/docs/data/tree-view/rich-tree-view/selection/CheckboxMultiSelection.js b/docs/data/tree-view/rich-tree-view/selection/CheckboxMultiSelection.js
index 32ecf3762dede..f5cbb0dc177d8 100644
--- a/docs/data/tree-view/rich-tree-view/selection/CheckboxMultiSelection.js
+++ b/docs/data/tree-view/rich-tree-view/selection/CheckboxMultiSelection.js
@@ -34,7 +34,7 @@ const MUI_X_PRODUCTS = [
 
 export default function CheckboxMultiSelection() {
   return (
-    <Box sx={{ height: 264, flexGrow: 1, maxWidth: 400 }}>
+    <Box sx={{ minHeight: 352, minWidth: 290 }}>
       <RichTreeView multiSelect checkboxSelection items={MUI_X_PRODUCTS} />
     </Box>
   );
diff --git a/docs/data/tree-view/rich-tree-view/selection/CheckboxMultiSelection.tsx b/docs/data/tree-view/rich-tree-view/selection/CheckboxMultiSelection.tsx
index 0c064df157468..3f63814f8ee7e 100644
--- a/docs/data/tree-view/rich-tree-view/selection/CheckboxMultiSelection.tsx
+++ b/docs/data/tree-view/rich-tree-view/selection/CheckboxMultiSelection.tsx
@@ -35,7 +35,7 @@ const MUI_X_PRODUCTS: TreeViewBaseItem[] = [
 
 export default function CheckboxMultiSelection() {
   return (
-    <Box sx={{ height: 264, flexGrow: 1, maxWidth: 400 }}>
+    <Box sx={{ minHeight: 352, minWidth: 290 }}>
       <RichTreeView multiSelect checkboxSelection items={MUI_X_PRODUCTS} />
     </Box>
   );
diff --git a/docs/data/tree-view/rich-tree-view/selection/CheckboxSelection.js b/docs/data/tree-view/rich-tree-view/selection/CheckboxSelection.js
index 12b1b503c2b21..2099278403a9b 100644
--- a/docs/data/tree-view/rich-tree-view/selection/CheckboxSelection.js
+++ b/docs/data/tree-view/rich-tree-view/selection/CheckboxSelection.js
@@ -34,7 +34,7 @@ const MUI_X_PRODUCTS = [
 
 export default function CheckboxSelection() {
   return (
-    <Box sx={{ height: 264, flexGrow: 1, maxWidth: 400 }}>
+    <Box sx={{ minHeight: 352, minWidth: 290 }}>
       <RichTreeView checkboxSelection items={MUI_X_PRODUCTS} />
     </Box>
   );
diff --git a/docs/data/tree-view/rich-tree-view/selection/CheckboxSelection.tsx b/docs/data/tree-view/rich-tree-view/selection/CheckboxSelection.tsx
index 16eac642a2408..2e329937cc92d 100644
--- a/docs/data/tree-view/rich-tree-view/selection/CheckboxSelection.tsx
+++ b/docs/data/tree-view/rich-tree-view/selection/CheckboxSelection.tsx
@@ -35,7 +35,7 @@ const MUI_X_PRODUCTS: TreeViewBaseItem[] = [
 
 export default function CheckboxSelection() {
   return (
-    <Box sx={{ height: 264, flexGrow: 1, maxWidth: 400 }}>
+    <Box sx={{ minHeight: 352, minWidth: 290 }}>
       <RichTreeView checkboxSelection items={MUI_X_PRODUCTS} />
     </Box>
   );
diff --git a/docs/data/tree-view/rich-tree-view/selection/ControlledSelection.js b/docs/data/tree-view/rich-tree-view/selection/ControlledSelection.js
index 537b04fc53cb7..30af214c7fbd3 100644
--- a/docs/data/tree-view/rich-tree-view/selection/ControlledSelection.js
+++ b/docs/data/tree-view/rich-tree-view/selection/ControlledSelection.js
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
 import Button from '@mui/material/Button';
 import { RichTreeView } from '@mui/x-tree-view/RichTreeView';
 
@@ -59,13 +60,13 @@ export default function ControlledSelection() {
   };
 
   return (
-    <Box sx={{ flexGrow: 1, maxWidth: 400 }}>
-      <Box sx={{ mb: 1 }}>
+    <Stack spacing={2}>
+      <div>
         <Button onClick={handleSelectClick}>
           {selectedItems.length === 0 ? 'Select all' : 'Unselect all'}
         </Button>
-      </Box>
-      <Box sx={{ minHeight: 200, flexGrow: 1 }}>
+      </div>
+      <Box sx={{ minHeight: 352, minWidth: 250 }}>
         <RichTreeView
           items={MUI_X_PRODUCTS}
           selectedItems={selectedItems}
@@ -73,6 +74,6 @@ export default function ControlledSelection() {
           multiSelect
         />
       </Box>
-    </Box>
+    </Stack>
   );
 }
diff --git a/docs/data/tree-view/rich-tree-view/selection/ControlledSelection.tsx b/docs/data/tree-view/rich-tree-view/selection/ControlledSelection.tsx
index 3f2967a50d4ae..a0333944ed2b4 100644
--- a/docs/data/tree-view/rich-tree-view/selection/ControlledSelection.tsx
+++ b/docs/data/tree-view/rich-tree-view/selection/ControlledSelection.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
 import Button from '@mui/material/Button';
 import { RichTreeView } from '@mui/x-tree-view/RichTreeView';
 import { TreeViewBaseItem, TreeViewItemId } from '@mui/x-tree-view/models';
@@ -60,13 +61,13 @@ export default function ControlledSelection() {
   };
 
   return (
-    <Box sx={{ flexGrow: 1, maxWidth: 400 }}>
-      <Box sx={{ mb: 1 }}>
+    <Stack spacing={2}>
+      <div>
         <Button onClick={handleSelectClick}>
           {selectedItems.length === 0 ? 'Select all' : 'Unselect all'}
         </Button>
-      </Box>
-      <Box sx={{ minHeight: 200, flexGrow: 1 }}>
+      </div>
+      <Box sx={{ minHeight: 352, minWidth: 250 }}>
         <RichTreeView
           items={MUI_X_PRODUCTS}
           selectedItems={selectedItems}
@@ -74,6 +75,6 @@ export default function ControlledSelection() {
           multiSelect
         />
       </Box>
-    </Box>
+    </Stack>
   );
 }
diff --git a/docs/data/tree-view/rich-tree-view/selection/ControlledSelection.tsx.preview b/docs/data/tree-view/rich-tree-view/selection/ControlledSelection.tsx.preview
index e1b7677fd7547..f05fb2f2435d1 100644
--- a/docs/data/tree-view/rich-tree-view/selection/ControlledSelection.tsx.preview
+++ b/docs/data/tree-view/rich-tree-view/selection/ControlledSelection.tsx.preview
@@ -1,9 +1,9 @@
-<Box sx={{ mb: 1 }}>
+<div>
   <Button onClick={handleSelectClick}>
     {selectedItems.length === 0 ? 'Select all' : 'Unselect all'}
   </Button>
-</Box>
-<Box sx={{ minHeight: 200, flexGrow: 1 }}>
+</div>
+<Box sx={{ minHeight: 352, minWidth: 250 }}>
   <RichTreeView
     items={MUI_X_PRODUCTS}
     selectedItems={selectedItems}
diff --git a/docs/data/tree-view/rich-tree-view/selection/DisableSelection.js b/docs/data/tree-view/rich-tree-view/selection/DisableSelection.js
index 45f155a4b3e4e..540c2d0911e2c 100644
--- a/docs/data/tree-view/rich-tree-view/selection/DisableSelection.js
+++ b/docs/data/tree-view/rich-tree-view/selection/DisableSelection.js
@@ -34,7 +34,7 @@ const MUI_X_PRODUCTS = [
 
 export default function DisableSelection() {
   return (
-    <Box sx={{ minHeight: 200, flexGrow: 1, maxWidth: 400 }}>
+    <Box sx={{ minHeight: 352, minWidth: 250 }}>
       <RichTreeView disableSelection items={MUI_X_PRODUCTS} />
     </Box>
   );
diff --git a/docs/data/tree-view/rich-tree-view/selection/DisableSelection.tsx b/docs/data/tree-view/rich-tree-view/selection/DisableSelection.tsx
index 7937123a72e34..17d4a19d088bb 100644
--- a/docs/data/tree-view/rich-tree-view/selection/DisableSelection.tsx
+++ b/docs/data/tree-view/rich-tree-view/selection/DisableSelection.tsx
@@ -35,7 +35,7 @@ const MUI_X_PRODUCTS: TreeViewBaseItem[] = [
 
 export default function DisableSelection() {
   return (
-    <Box sx={{ minHeight: 200, flexGrow: 1, maxWidth: 400 }}>
+    <Box sx={{ minHeight: 352, minWidth: 250 }}>
       <RichTreeView disableSelection items={MUI_X_PRODUCTS} />
     </Box>
   );
diff --git a/docs/data/tree-view/rich-tree-view/selection/MultiSelectTreeView.js b/docs/data/tree-view/rich-tree-view/selection/MultiSelectTreeView.js
index ea21e6cb404b8..aa65993ee26a5 100644
--- a/docs/data/tree-view/rich-tree-view/selection/MultiSelectTreeView.js
+++ b/docs/data/tree-view/rich-tree-view/selection/MultiSelectTreeView.js
@@ -34,7 +34,7 @@ const MUI_X_PRODUCTS = [
 
 export default function MultiSelectTreeView() {
   return (
-    <Box sx={{ minHeight: 200, flexGrow: 1, maxWidth: 400 }}>
+    <Box sx={{ minHeight: 352, minWidth: 250 }}>
       <RichTreeView multiSelect items={MUI_X_PRODUCTS} />
     </Box>
   );
diff --git a/docs/data/tree-view/rich-tree-view/selection/MultiSelectTreeView.tsx b/docs/data/tree-view/rich-tree-view/selection/MultiSelectTreeView.tsx
index deea7256e615e..8b6627572ca80 100644
--- a/docs/data/tree-view/rich-tree-view/selection/MultiSelectTreeView.tsx
+++ b/docs/data/tree-view/rich-tree-view/selection/MultiSelectTreeView.tsx
@@ -35,7 +35,7 @@ const MUI_X_PRODUCTS: TreeViewBaseItem[] = [
 
 export default function MultiSelectTreeView() {
   return (
-    <Box sx={{ minHeight: 200, flexGrow: 1, maxWidth: 400 }}>
+    <Box sx={{ minHeight: 352, minWidth: 250 }}>
       <RichTreeView multiSelect items={MUI_X_PRODUCTS} />
     </Box>
   );
diff --git a/docs/data/tree-view/rich-tree-view/selection/ParentChildrenSelectionRelationship.js b/docs/data/tree-view/rich-tree-view/selection/ParentChildrenSelectionRelationship.js
index 056b2d2cb4bd7..d5f3687639b78 100644
--- a/docs/data/tree-view/rich-tree-view/selection/ParentChildrenSelectionRelationship.js
+++ b/docs/data/tree-view/rich-tree-view/selection/ParentChildrenSelectionRelationship.js
@@ -84,7 +84,7 @@ export default function ParentChildrenSelectionRelationship() {
   };
 
   return (
-    <Box sx={{ height: 264, flexGrow: 1, maxWidth: 400 }}>
+    <Box sx={{ minHeight: 352, minWidth: 290 }}>
       <RichTreeView
         multiSelect
         checkboxSelection
diff --git a/docs/data/tree-view/rich-tree-view/selection/ParentChildrenSelectionRelationship.tsx b/docs/data/tree-view/rich-tree-view/selection/ParentChildrenSelectionRelationship.tsx
index c7ed6099696e6..e45bdbb4fb3c3 100644
--- a/docs/data/tree-view/rich-tree-view/selection/ParentChildrenSelectionRelationship.tsx
+++ b/docs/data/tree-view/rich-tree-view/selection/ParentChildrenSelectionRelationship.tsx
@@ -1,8 +1,8 @@
 import * as React from 'react';
 import Box from '@mui/material/Box';
 import { RichTreeView } from '@mui/x-tree-view/RichTreeView';
-import { TreeViewBaseItem } from '@mui/x-tree-view/models';
 import { useTreeViewApiRef } from '@mui/x-tree-view/hooks';
+import { TreeViewBaseItem } from '@mui/x-tree-view/models';
 
 const MUI_X_PRODUCTS: TreeViewBaseItem[] = [
   {
@@ -91,7 +91,7 @@ export default function ParentChildrenSelectionRelationship() {
   };
 
   return (
-    <Box sx={{ height: 264, flexGrow: 1, maxWidth: 400 }}>
+    <Box sx={{ minHeight: 352, minWidth: 290 }}>
       <RichTreeView
         multiSelect
         checkboxSelection
diff --git a/docs/data/tree-view/rich-tree-view/selection/SingleSelectTreeView.js b/docs/data/tree-view/rich-tree-view/selection/SingleSelectTreeView.js
index 60caf9c535862..adde68fa51532 100644
--- a/docs/data/tree-view/rich-tree-view/selection/SingleSelectTreeView.js
+++ b/docs/data/tree-view/rich-tree-view/selection/SingleSelectTreeView.js
@@ -34,7 +34,7 @@ const MUI_X_PRODUCTS = [
 
 export default function SingleSelectTreeView() {
   return (
-    <Box sx={{ minHeight: 200, flexGrow: 1, maxWidth: 400 }}>
+    <Box sx={{ minHeight: 352, minWidth: 250 }}>
       <RichTreeView items={MUI_X_PRODUCTS} />
     </Box>
   );
diff --git a/docs/data/tree-view/rich-tree-view/selection/SingleSelectTreeView.tsx b/docs/data/tree-view/rich-tree-view/selection/SingleSelectTreeView.tsx
index fbd000d8af63d..dca2893bc1620 100644
--- a/docs/data/tree-view/rich-tree-view/selection/SingleSelectTreeView.tsx
+++ b/docs/data/tree-view/rich-tree-view/selection/SingleSelectTreeView.tsx
@@ -35,7 +35,7 @@ const MUI_X_PRODUCTS: TreeViewBaseItem[] = [
 
 export default function SingleSelectTreeView() {
   return (
-    <Box sx={{ minHeight: 200, flexGrow: 1, maxWidth: 400 }}>
+    <Box sx={{ minHeight: 352, minWidth: 250 }}>
       <RichTreeView items={MUI_X_PRODUCTS} />
     </Box>
   );
diff --git a/docs/data/tree-view/rich-tree-view/selection/TrackItemSelectionToggle.js b/docs/data/tree-view/rich-tree-view/selection/TrackItemSelectionToggle.js
index 4c3bb49281bbb..9d310064592c0 100644
--- a/docs/data/tree-view/rich-tree-view/selection/TrackItemSelectionToggle.js
+++ b/docs/data/tree-view/rich-tree-view/selection/TrackItemSelectionToggle.js
@@ -51,7 +51,7 @@ export default function TrackItemSelectionToggle() {
           ? 'No item selection recorded'
           : `Last selected item: ${lastSelectedItem}`}
       </Typography>
-      <Box sx={{ minHeight: 200, minWidth: 300, flexGrow: 1 }}>
+      <Box sx={{ minHeight: 352, minWidth: 300 }}>
         <RichTreeView
           items={MUI_X_PRODUCTS}
           onItemSelectionToggle={handleItemSelectionToggle}
diff --git a/docs/data/tree-view/rich-tree-view/selection/TrackItemSelectionToggle.tsx b/docs/data/tree-view/rich-tree-view/selection/TrackItemSelectionToggle.tsx
index d769a7a99d76e..50893614cde5c 100644
--- a/docs/data/tree-view/rich-tree-view/selection/TrackItemSelectionToggle.tsx
+++ b/docs/data/tree-view/rich-tree-view/selection/TrackItemSelectionToggle.tsx
@@ -57,7 +57,7 @@ export default function TrackItemSelectionToggle() {
           ? 'No item selection recorded'
           : `Last selected item: ${lastSelectedItem}`}
       </Typography>
-      <Box sx={{ minHeight: 200, minWidth: 300, flexGrow: 1 }}>
+      <Box sx={{ minHeight: 352, minWidth: 300 }}>
         <RichTreeView
           items={MUI_X_PRODUCTS}
           onItemSelectionToggle={handleItemSelectionToggle}
diff --git a/docs/data/tree-view/rich-tree-view/selection/TrackItemSelectionToggle.tsx.preview b/docs/data/tree-view/rich-tree-view/selection/TrackItemSelectionToggle.tsx.preview
index 8e3053bf4f653..c45b26bfb96d1 100644
--- a/docs/data/tree-view/rich-tree-view/selection/TrackItemSelectionToggle.tsx.preview
+++ b/docs/data/tree-view/rich-tree-view/selection/TrackItemSelectionToggle.tsx.preview
@@ -3,7 +3,7 @@
     ? 'No item selection recorded'
     : `Last selected item: ${lastSelectedItem}`}
 </Typography>
-<Box sx={{ minHeight: 200, minWidth: 300, flexGrow: 1 }}>
+<Box sx={{ minHeight: 352, minWidth: 300 }}>
   <RichTreeView
     items={MUI_X_PRODUCTS}
     onItemSelectionToggle={handleItemSelectionToggle}
diff --git a/docs/data/tree-view/rich-tree-view/selection/selection.md b/docs/data/tree-view/rich-tree-view/selection/selection.md
index d58f37d61b5dd..2fb893baee650 100644
--- a/docs/data/tree-view/rich-tree-view/selection/selection.md
+++ b/docs/data/tree-view/rich-tree-view/selection/selection.md
@@ -82,7 +82,7 @@ Automatically select an item when all of its children are selected and automatic
 :::warning
 This feature isn't implemented yet. It's coming.
 
-👍 Upvote [issue #12883](https://github.com/mui/mui-x/issues/4821) if you want to see it land faster.
+👍 Upvote [issue #4821](https://github.com/mui/mui-x/issues/4821) if you want to see it land faster.
 
 Don't hesitate to leave a comment on the same issue to influence what gets built.
 Especially if you already have a use case for this component,
diff --git a/docs/data/tree-view/simple-tree-view/customization/CustomAnimation.js b/docs/data/tree-view/simple-tree-view/customization/CustomAnimation.js
index 8db5e31fc09df..f507b6768cca7 100644
--- a/docs/data/tree-view/simple-tree-view/customization/CustomAnimation.js
+++ b/docs/data/tree-view/simple-tree-view/customization/CustomAnimation.js
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import Box from '@mui/material/Box';
 import Collapse from '@mui/material/Collapse';
 
 import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView';
@@ -30,25 +31,24 @@ const CustomTreeItem = React.forwardRef((props, ref) => (
 
 export default function CustomAnimation() {
   return (
-    <SimpleTreeView
-      aria-label="customized"
-      defaultExpandedItems={['1']}
-      sx={{ overflowX: 'hidden', minHeight: 270, flexGrow: 1, maxWidth: 300 }}
-    >
-      <CustomTreeItem itemId="1" label="Main">
-        <CustomTreeItem itemId="2" label="Hello" />
-        <CustomTreeItem itemId="3" label="Subtree with children">
-          <CustomTreeItem itemId="6" label="Hello" />
-          <CustomTreeItem itemId="7" label="Sub-subtree with children">
-            <CustomTreeItem itemId="9" label="Child 1" />
-            <CustomTreeItem itemId="10" label="Child 2" />
-            <CustomTreeItem itemId="11" label="Child 3" />
-          </CustomTreeItem>
-          <CustomTreeItem itemId="8" label="Hello" />
+    <Box sx={{ minHeight: 352, minWidth: 250 }}>
+      <SimpleTreeView defaultExpandedItems={['grid']}>
+        <CustomTreeItem itemId="grid" label="Data Grid">
+          <CustomTreeItem itemId="grid-community" label="@mui/x-data-grid" />
+          <CustomTreeItem itemId="grid-pro" label="@mui/x-data-grid-pro" />
+          <CustomTreeItem itemId="grid-premium" label="@mui/x-data-grid-premium" />
         </CustomTreeItem>
-        <CustomTreeItem itemId="4" label="World" />
-        <CustomTreeItem itemId="5" label="Something something" />
-      </CustomTreeItem>
-    </SimpleTreeView>
+        <CustomTreeItem itemId="pickers" label="Date and Time Pickers">
+          <CustomTreeItem itemId="pickers-community" label="@mui/x-date-pickers" />
+          <CustomTreeItem itemId="pickers-pro" label="@mui/x-date-pickers-pro" />
+        </CustomTreeItem>
+        <CustomTreeItem itemId="charts" label="Charts">
+          <CustomTreeItem itemId="charts-community" label="@mui/x-charts" />
+        </CustomTreeItem>
+        <CustomTreeItem itemId="tree-view" label="Tree View">
+          <CustomTreeItem itemId="tree-view-community" label="@mui/x-tree-view" />
+        </CustomTreeItem>
+      </SimpleTreeView>
+    </Box>
   );
 }
diff --git a/docs/data/tree-view/simple-tree-view/customization/CustomAnimation.tsx b/docs/data/tree-view/simple-tree-view/customization/CustomAnimation.tsx
index 786650ea38e08..5a2428ac5a08d 100644
--- a/docs/data/tree-view/simple-tree-view/customization/CustomAnimation.tsx
+++ b/docs/data/tree-view/simple-tree-view/customization/CustomAnimation.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import Box from '@mui/material/Box';
 import Collapse from '@mui/material/Collapse';
 import { TransitionProps } from '@mui/material/transitions';
 import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView';
@@ -32,25 +33,24 @@ const CustomTreeItem = React.forwardRef(
 
 export default function CustomAnimation() {
   return (
-    <SimpleTreeView
-      aria-label="customized"
-      defaultExpandedItems={['1']}
-      sx={{ overflowX: 'hidden', minHeight: 270, flexGrow: 1, maxWidth: 300 }}
-    >
-      <CustomTreeItem itemId="1" label="Main">
-        <CustomTreeItem itemId="2" label="Hello" />
-        <CustomTreeItem itemId="3" label="Subtree with children">
-          <CustomTreeItem itemId="6" label="Hello" />
-          <CustomTreeItem itemId="7" label="Sub-subtree with children">
-            <CustomTreeItem itemId="9" label="Child 1" />
-            <CustomTreeItem itemId="10" label="Child 2" />
-            <CustomTreeItem itemId="11" label="Child 3" />
-          </CustomTreeItem>
-          <CustomTreeItem itemId="8" label="Hello" />
+    <Box sx={{ minHeight: 352, minWidth: 250 }}>
+      <SimpleTreeView defaultExpandedItems={['grid']}>
+        <CustomTreeItem itemId="grid" label="Data Grid">
+          <CustomTreeItem itemId="grid-community" label="@mui/x-data-grid" />
+          <CustomTreeItem itemId="grid-pro" label="@mui/x-data-grid-pro" />
+          <CustomTreeItem itemId="grid-premium" label="@mui/x-data-grid-premium" />
         </CustomTreeItem>
-        <CustomTreeItem itemId="4" label="World" />
-        <CustomTreeItem itemId="5" label="Something something" />
-      </CustomTreeItem>
-    </SimpleTreeView>
+        <CustomTreeItem itemId="pickers" label="Date and Time Pickers">
+          <CustomTreeItem itemId="pickers-community" label="@mui/x-date-pickers" />
+          <CustomTreeItem itemId="pickers-pro" label="@mui/x-date-pickers-pro" />
+        </CustomTreeItem>
+        <CustomTreeItem itemId="charts" label="Charts">
+          <CustomTreeItem itemId="charts-community" label="@mui/x-charts" />
+        </CustomTreeItem>
+        <CustomTreeItem itemId="tree-view" label="Tree View">
+          <CustomTreeItem itemId="tree-view-community" label="@mui/x-tree-view" />
+        </CustomTreeItem>
+      </SimpleTreeView>
+    </Box>
   );
 }
diff --git a/docs/data/tree-view/simple-tree-view/customization/CustomIcons.js b/docs/data/tree-view/simple-tree-view/customization/CustomIcons.js
index 3bfdaf46af80e..99b4b6c4f0b6e 100644
--- a/docs/data/tree-view/simple-tree-view/customization/CustomIcons.js
+++ b/docs/data/tree-view/simple-tree-view/customization/CustomIcons.js
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import Box from '@mui/material/Box';
 import AddBoxIcon from '@mui/icons-material/AddBox';
 import IndeterminateCheckBoxIcon from '@mui/icons-material/IndeterminateCheckBox';
 import SvgIcon from '@mui/material/SvgIcon';
@@ -30,30 +31,31 @@ function CloseSquare(props) {
 
 export default function CustomIcons() {
   return (
-    <SimpleTreeView
-      aria-label="customized"
-      defaultExpandedItems={['1']}
-      slots={{
-        expandIcon: AddBoxIcon,
-        collapseIcon: IndeterminateCheckBoxIcon,
-        endIcon: CloseSquare,
-      }}
-      sx={{ overflowX: 'hidden', minHeight: 270, flexGrow: 1, maxWidth: 300 }}
-    >
-      <CustomTreeItem itemId="1" label="Main">
-        <CustomTreeItem itemId="2" label="Hello" />
-        <CustomTreeItem itemId="3" label="Subtree with children">
-          <CustomTreeItem itemId="6" label="Hello" />
-          <CustomTreeItem itemId="7" label="Sub-subtree with children">
-            <CustomTreeItem itemId="9" label="Child 1" />
-            <CustomTreeItem itemId="10" label="Child 2" />
-            <CustomTreeItem itemId="11" label="Child 3" />
-          </CustomTreeItem>
-          <CustomTreeItem itemId="8" label="Hello" />
+    <Box sx={{ minHeight: 352, minWidth: 250 }}>
+      <SimpleTreeView
+        defaultExpandedItems={['grid']}
+        slots={{
+          expandIcon: AddBoxIcon,
+          collapseIcon: IndeterminateCheckBoxIcon,
+          endIcon: CloseSquare,
+        }}
+      >
+        <CustomTreeItem itemId="grid" label="Data Grid">
+          <CustomTreeItem itemId="grid-community" label="@mui/x-data-grid" />
+          <CustomTreeItem itemId="grid-pro" label="@mui/x-data-grid-pro" />
+          <CustomTreeItem itemId="grid-premium" label="@mui/x-data-grid-premium" />
+        </CustomTreeItem>
+        <CustomTreeItem itemId="pickers" label="Date and Time Pickers">
+          <CustomTreeItem itemId="pickers-community" label="@mui/x-date-pickers" />
+          <CustomTreeItem itemId="pickers-pro" label="@mui/x-date-pickers-pro" />
+        </CustomTreeItem>
+        <CustomTreeItem itemId="charts" label="Charts">
+          <CustomTreeItem itemId="charts-community" label="@mui/x-charts" />
+        </CustomTreeItem>
+        <CustomTreeItem itemId="tree-view" label="Tree View">
+          <CustomTreeItem itemId="tree-view-community" label="@mui/x-tree-view" />
         </CustomTreeItem>
-        <CustomTreeItem itemId="4" label="World" />
-        <CustomTreeItem itemId="5" label="Something something" />
-      </CustomTreeItem>
-    </SimpleTreeView>
+      </SimpleTreeView>
+    </Box>
   );
 }
diff --git a/docs/data/tree-view/simple-tree-view/customization/CustomIcons.tsx b/docs/data/tree-view/simple-tree-view/customization/CustomIcons.tsx
index f8746f6dd376f..202b636b1fd5a 100644
--- a/docs/data/tree-view/simple-tree-view/customization/CustomIcons.tsx
+++ b/docs/data/tree-view/simple-tree-view/customization/CustomIcons.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import Box from '@mui/material/Box';
 import AddBoxIcon from '@mui/icons-material/AddBox';
 import IndeterminateCheckBoxIcon from '@mui/icons-material/IndeterminateCheckBox';
 import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon';
@@ -30,30 +31,31 @@ function CloseSquare(props: SvgIconProps) {
 
 export default function CustomIcons() {
   return (
-    <SimpleTreeView
-      aria-label="customized"
-      defaultExpandedItems={['1']}
-      slots={{
-        expandIcon: AddBoxIcon,
-        collapseIcon: IndeterminateCheckBoxIcon,
-        endIcon: CloseSquare,
-      }}
-      sx={{ overflowX: 'hidden', minHeight: 270, flexGrow: 1, maxWidth: 300 }}
-    >
-      <CustomTreeItem itemId="1" label="Main">
-        <CustomTreeItem itemId="2" label="Hello" />
-        <CustomTreeItem itemId="3" label="Subtree with children">
-          <CustomTreeItem itemId="6" label="Hello" />
-          <CustomTreeItem itemId="7" label="Sub-subtree with children">
-            <CustomTreeItem itemId="9" label="Child 1" />
-            <CustomTreeItem itemId="10" label="Child 2" />
-            <CustomTreeItem itemId="11" label="Child 3" />
-          </CustomTreeItem>
-          <CustomTreeItem itemId="8" label="Hello" />
+    <Box sx={{ minHeight: 352, minWidth: 250 }}>
+      <SimpleTreeView
+        defaultExpandedItems={['grid']}
+        slots={{
+          expandIcon: AddBoxIcon,
+          collapseIcon: IndeterminateCheckBoxIcon,
+          endIcon: CloseSquare,
+        }}
+      >
+        <CustomTreeItem itemId="grid" label="Data Grid">
+          <CustomTreeItem itemId="grid-community" label="@mui/x-data-grid" />
+          <CustomTreeItem itemId="grid-pro" label="@mui/x-data-grid-pro" />
+          <CustomTreeItem itemId="grid-premium" label="@mui/x-data-grid-premium" />
+        </CustomTreeItem>
+        <CustomTreeItem itemId="pickers" label="Date and Time Pickers">
+          <CustomTreeItem itemId="pickers-community" label="@mui/x-date-pickers" />
+          <CustomTreeItem itemId="pickers-pro" label="@mui/x-date-pickers-pro" />
+        </CustomTreeItem>
+        <CustomTreeItem itemId="charts" label="Charts">
+          <CustomTreeItem itemId="charts-community" label="@mui/x-charts" />
+        </CustomTreeItem>
+        <CustomTreeItem itemId="tree-view" label="Tree View">
+          <CustomTreeItem itemId="tree-view-community" label="@mui/x-tree-view" />
         </CustomTreeItem>
-        <CustomTreeItem itemId="4" label="World" />
-        <CustomTreeItem itemId="5" label="Something something" />
-      </CustomTreeItem>
-    </SimpleTreeView>
+      </SimpleTreeView>
+    </Box>
   );
 }
diff --git a/docs/data/tree-view/simple-tree-view/customization/CustomStyling.js b/docs/data/tree-view/simple-tree-view/customization/CustomStyling.js
index f2426eb5cbf07..3b2fc9d59aa69 100644
--- a/docs/data/tree-view/simple-tree-view/customization/CustomStyling.js
+++ b/docs/data/tree-view/simple-tree-view/customization/CustomStyling.js
@@ -1,9 +1,10 @@
 import * as React from 'react';
+import Box from '@mui/material/Box';
 import { styled, alpha } from '@mui/material/styles';
 import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView';
 import { TreeItem, treeItemClasses } from '@mui/x-tree-view/TreeItem';
 
-const StyledTreeItem = styled(TreeItem)(({ theme }) => ({
+const CustomTreeItem = styled(TreeItem)(({ theme }) => ({
   color:
     theme.palette.mode === 'light'
       ? theme.palette.grey[800]
@@ -26,29 +27,33 @@ const StyledTreeItem = styled(TreeItem)(({ theme }) => ({
     color: theme.palette.mode === 'dark' && theme.palette.primary.contrastText,
     padding: theme.spacing(0, 1.2),
   },
+  [`& .${treeItemClasses.groupTransition}`]: {
+    marginLeft: 15,
+    paddingLeft: 18,
+    borderLeft: `1px dashed ${alpha(theme.palette.text.primary, 0.4)}`,
+  },
 }));
 
 export default function CustomStyling() {
   return (
-    <SimpleTreeView
-      aria-label="customized"
-      defaultExpandedItems={['1']}
-      sx={{ overflowX: 'hidden', minHeight: 270, flexGrow: 1, maxWidth: 300 }}
-    >
-      <StyledTreeItem itemId="1" label="Main">
-        <StyledTreeItem itemId="2" label="Hello" />
-        <StyledTreeItem itemId="3" label="Subtree with children">
-          <StyledTreeItem itemId="6" label="Hello" />
-          <StyledTreeItem itemId="7" label="Sub-subtree with children">
-            <StyledTreeItem itemId="9" label="Child 1" />
-            <StyledTreeItem itemId="10" label="Child 2" />
-            <StyledTreeItem itemId="11" label="Child 3" />
-          </StyledTreeItem>
-          <StyledTreeItem itemId="8" label="Hello" />
-        </StyledTreeItem>
-        <StyledTreeItem itemId="4" label="World" />
-        <StyledTreeItem itemId="5" label="Something something" />
-      </StyledTreeItem>
-    </SimpleTreeView>
+    <Box sx={{ minHeight: 352, minWidth: 250 }}>
+      <SimpleTreeView defaultExpandedItems={['grid']}>
+        <CustomTreeItem itemId="grid" label="Data Grid">
+          <CustomTreeItem itemId="grid-community" label="@mui/x-data-grid" />
+          <CustomTreeItem itemId="grid-pro" label="@mui/x-data-grid-pro" />
+          <CustomTreeItem itemId="grid-premium" label="@mui/x-data-grid-premium" />
+        </CustomTreeItem>
+        <CustomTreeItem itemId="pickers" label="Date and Time Pickers">
+          <CustomTreeItem itemId="pickers-community" label="@mui/x-date-pickers" />
+          <CustomTreeItem itemId="pickers-pro" label="@mui/x-date-pickers-pro" />
+        </CustomTreeItem>
+        <CustomTreeItem itemId="charts" label="Charts">
+          <CustomTreeItem itemId="charts-community" label="@mui/x-charts" />
+        </CustomTreeItem>
+        <CustomTreeItem itemId="tree-view" label="Tree View">
+          <CustomTreeItem itemId="tree-view-community" label="@mui/x-tree-view" />
+        </CustomTreeItem>
+      </SimpleTreeView>
+    </Box>
   );
 }
diff --git a/docs/data/tree-view/simple-tree-view/customization/CustomStyling.tsx b/docs/data/tree-view/simple-tree-view/customization/CustomStyling.tsx
index 1f9aa0a895b67..8a8b2d2137194 100644
--- a/docs/data/tree-view/simple-tree-view/customization/CustomStyling.tsx
+++ b/docs/data/tree-view/simple-tree-view/customization/CustomStyling.tsx
@@ -1,9 +1,10 @@
 import * as React from 'react';
+import Box from '@mui/material/Box';
 import { styled, alpha } from '@mui/material/styles';
 import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView';
 import { TreeItem, treeItemClasses } from '@mui/x-tree-view/TreeItem';
 
-const StyledTreeItem = styled(TreeItem)(({ theme }) => ({
+const CustomTreeItem = styled(TreeItem)(({ theme }) => ({
   color:
     theme.palette.mode === 'light'
       ? theme.palette.grey[800]
@@ -27,29 +28,33 @@ const StyledTreeItem = styled(TreeItem)(({ theme }) => ({
     color: theme.palette.mode === 'dark' && theme.palette.primary.contrastText,
     padding: theme.spacing(0, 1.2),
   },
+  [`& .${treeItemClasses.groupTransition}`]: {
+    marginLeft: 15,
+    paddingLeft: 18,
+    borderLeft: `1px dashed ${alpha(theme.palette.text.primary, 0.4)}`,
+  },
 }));
 
 export default function CustomStyling() {
   return (
-    <SimpleTreeView
-      aria-label="customized"
-      defaultExpandedItems={['1']}
-      sx={{ overflowX: 'hidden', minHeight: 270, flexGrow: 1, maxWidth: 300 }}
-    >
-      <StyledTreeItem itemId="1" label="Main">
-        <StyledTreeItem itemId="2" label="Hello" />
-        <StyledTreeItem itemId="3" label="Subtree with children">
-          <StyledTreeItem itemId="6" label="Hello" />
-          <StyledTreeItem itemId="7" label="Sub-subtree with children">
-            <StyledTreeItem itemId="9" label="Child 1" />
-            <StyledTreeItem itemId="10" label="Child 2" />
-            <StyledTreeItem itemId="11" label="Child 3" />
-          </StyledTreeItem>
-          <StyledTreeItem itemId="8" label="Hello" />
-        </StyledTreeItem>
-        <StyledTreeItem itemId="4" label="World" />
-        <StyledTreeItem itemId="5" label="Something something" />
-      </StyledTreeItem>
-    </SimpleTreeView>
+    <Box sx={{ minHeight: 352, minWidth: 250 }}>
+      <SimpleTreeView defaultExpandedItems={['grid']}>
+        <CustomTreeItem itemId="grid" label="Data Grid">
+          <CustomTreeItem itemId="grid-community" label="@mui/x-data-grid" />
+          <CustomTreeItem itemId="grid-pro" label="@mui/x-data-grid-pro" />
+          <CustomTreeItem itemId="grid-premium" label="@mui/x-data-grid-premium" />
+        </CustomTreeItem>
+        <CustomTreeItem itemId="pickers" label="Date and Time Pickers">
+          <CustomTreeItem itemId="pickers-community" label="@mui/x-date-pickers" />
+          <CustomTreeItem itemId="pickers-pro" label="@mui/x-date-pickers-pro" />
+        </CustomTreeItem>
+        <CustomTreeItem itemId="charts" label="Charts">
+          <CustomTreeItem itemId="charts-community" label="@mui/x-charts" />
+        </CustomTreeItem>
+        <CustomTreeItem itemId="tree-view" label="Tree View">
+          <CustomTreeItem itemId="tree-view-community" label="@mui/x-tree-view" />
+        </CustomTreeItem>
+      </SimpleTreeView>
+    </Box>
   );
 }
diff --git a/docs/data/tree-view/simple-tree-view/customization/CustomContentTreeView.js b/docs/data/tree-view/simple-tree-view/customization/HeadlessAPI.js
similarity index 90%
rename from docs/data/tree-view/simple-tree-view/customization/CustomContentTreeView.js
rename to docs/data/tree-view/simple-tree-view/customization/HeadlessAPI.js
index c16dc8ac924a5..6716593964400 100644
--- a/docs/data/tree-view/simple-tree-view/customization/CustomContentTreeView.js
+++ b/docs/data/tree-view/simple-tree-view/customization/HeadlessAPI.js
@@ -60,14 +60,10 @@ const CustomTreeItem = React.forwardRef(function CustomTreeItem(props, ref) {
   );
 });
 
-export default function CustomContentTreeView() {
+export default function HeadlessAPI() {
   return (
-    <Box sx={{ minHeight: 180, flexGrow: 1, maxWidth: 300 }}>
-      <SimpleTreeView
-        aria-label="icon expansion"
-        sx={{ position: 'relative' }}
-        defaultExpandedItems={['3']}
-      >
+    <Box sx={{ minHeight: 200, minWidth: 250 }}>
+      <SimpleTreeView defaultExpandedItems={['3']}>
         <CustomTreeItem itemId="1" label="Amelia Hart">
           <CustomTreeItem itemId="2" label="Jane Fisher" />
         </CustomTreeItem>
diff --git a/docs/data/tree-view/simple-tree-view/customization/CustomContentTreeView.tsx b/docs/data/tree-view/simple-tree-view/customization/HeadlessAPI.tsx
similarity index 91%
rename from docs/data/tree-view/simple-tree-view/customization/CustomContentTreeView.tsx
rename to docs/data/tree-view/simple-tree-view/customization/HeadlessAPI.tsx
index c4d333d40f08a..e810c4bf4ce2d 100644
--- a/docs/data/tree-view/simple-tree-view/customization/CustomContentTreeView.tsx
+++ b/docs/data/tree-view/simple-tree-view/customization/HeadlessAPI.tsx
@@ -70,14 +70,10 @@ const CustomTreeItem = React.forwardRef(function CustomTreeItem(
   );
 });
 
-export default function CustomContentTreeView() {
+export default function HeadlessAPI() {
   return (
-    <Box sx={{ minHeight: 180, flexGrow: 1, maxWidth: 300 }}>
-      <SimpleTreeView
-        aria-label="icon expansion"
-        sx={{ position: 'relative' }}
-        defaultExpandedItems={['3']}
-      >
+    <Box sx={{ minHeight: 200, minWidth: 250 }}>
+      <SimpleTreeView defaultExpandedItems={['3']}>
         <CustomTreeItem itemId="1" label="Amelia Hart">
           <CustomTreeItem itemId="2" label="Jane Fisher" />
         </CustomTreeItem>
diff --git a/docs/data/tree-view/simple-tree-view/customization/CustomContentTreeView.tsx.preview b/docs/data/tree-view/simple-tree-view/customization/HeadlessAPI.tsx.preview
similarity index 78%
rename from docs/data/tree-view/simple-tree-view/customization/CustomContentTreeView.tsx.preview
rename to docs/data/tree-view/simple-tree-view/customization/HeadlessAPI.tsx.preview
index 8d935ef57ba73..66f9d114b23b3 100644
--- a/docs/data/tree-view/simple-tree-view/customization/CustomContentTreeView.tsx.preview
+++ b/docs/data/tree-view/simple-tree-view/customization/HeadlessAPI.tsx.preview
@@ -1,8 +1,4 @@
-<SimpleTreeView
-  aria-label="icon expansion"
-  sx={{ position: 'relative' }}
-  defaultExpandedItems={['3']}
->
+<SimpleTreeView defaultExpandedItems={['3']}>
   <CustomTreeItem itemId="1" label="Amelia Hart">
     <CustomTreeItem itemId="2" label="Jane Fisher" />
   </CustomTreeItem>
diff --git a/docs/data/tree-view/simple-tree-view/customization/LabelSlotProps.js b/docs/data/tree-view/simple-tree-view/customization/LabelSlotProps.js
index 59c40e034d249..4908de784996d 100644
--- a/docs/data/tree-view/simple-tree-view/customization/LabelSlotProps.js
+++ b/docs/data/tree-view/simple-tree-view/customization/LabelSlotProps.js
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import Box from '@mui/material/Box';
 import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView';
 import { TreeItem2 } from '@mui/x-tree-view/TreeItem2';
 
@@ -16,20 +17,24 @@ const CustomTreeItem = React.forwardRef((props, ref) => (
 
 export default function LabelSlotProps() {
   return (
-    <SimpleTreeView
-      aria-label="customized"
-      defaultExpandedItems={['pickers']}
-      sx={{ overflowX: 'hidden', minHeight: 224, flexGrow: 1, maxWidth: 300 }}
-    >
-      <CustomTreeItem itemId="grid" label="Data Grid">
-        <CustomTreeItem itemId="grid-community" label="@mui/x-data-grid" />
-        <CustomTreeItem itemId="grid-pro" label="@mui/x-data-grid-pro" />
-        <CustomTreeItem itemId="grid-premium" label="@mui/x-data-grid-premium" />
-      </CustomTreeItem>
-      <CustomTreeItem itemId="pickers" label="Date and Time Pickers">
-        <CustomTreeItem itemId="pickers-community" label="@mui/x-date-pickers" />
-        <CustomTreeItem itemId="pickers-pro" label="@mui/x-date-pickers-pro" />
-      </CustomTreeItem>
-    </SimpleTreeView>
+    <Box sx={{ minHeight: 352, minWidth: 250 }}>
+      <SimpleTreeView defaultExpandedItems={['grid']}>
+        <CustomTreeItem itemId="grid" label="Data Grid">
+          <CustomTreeItem itemId="grid-community" label="@mui/x-data-grid" />
+          <CustomTreeItem itemId="grid-pro" label="@mui/x-data-grid-pro" />
+          <CustomTreeItem itemId="grid-premium" label="@mui/x-data-grid-premium" />
+        </CustomTreeItem>
+        <CustomTreeItem itemId="pickers" label="Date and Time Pickers">
+          <CustomTreeItem itemId="pickers-community" label="@mui/x-date-pickers" />
+          <CustomTreeItem itemId="pickers-pro" label="@mui/x-date-pickers-pro" />
+        </CustomTreeItem>
+        <CustomTreeItem itemId="charts" label="Charts">
+          <CustomTreeItem itemId="charts-community" label="@mui/x-charts" />
+        </CustomTreeItem>
+        <CustomTreeItem itemId="tree-view" label="Tree View">
+          <CustomTreeItem itemId="tree-view-community" label="@mui/x-tree-view" />
+        </CustomTreeItem>
+      </SimpleTreeView>
+    </Box>
   );
 }
diff --git a/docs/data/tree-view/simple-tree-view/customization/LabelSlotProps.tsx b/docs/data/tree-view/simple-tree-view/customization/LabelSlotProps.tsx
index 3476b3b8e13ca..99bb07a10be05 100644
--- a/docs/data/tree-view/simple-tree-view/customization/LabelSlotProps.tsx
+++ b/docs/data/tree-view/simple-tree-view/customization/LabelSlotProps.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import Box from '@mui/material/Box';
 import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView';
 import { TreeItem2, TreeItem2Props } from '@mui/x-tree-view/TreeItem2';
 
@@ -18,20 +19,24 @@ const CustomTreeItem = React.forwardRef(
 
 export default function LabelSlotProps() {
   return (
-    <SimpleTreeView
-      aria-label="customized"
-      defaultExpandedItems={['pickers']}
-      sx={{ overflowX: 'hidden', minHeight: 224, flexGrow: 1, maxWidth: 300 }}
-    >
-      <CustomTreeItem itemId="grid" label="Data Grid">
-        <CustomTreeItem itemId="grid-community" label="@mui/x-data-grid" />
-        <CustomTreeItem itemId="grid-pro" label="@mui/x-data-grid-pro" />
-        <CustomTreeItem itemId="grid-premium" label="@mui/x-data-grid-premium" />
-      </CustomTreeItem>
-      <CustomTreeItem itemId="pickers" label="Date and Time Pickers">
-        <CustomTreeItem itemId="pickers-community" label="@mui/x-date-pickers" />
-        <CustomTreeItem itemId="pickers-pro" label="@mui/x-date-pickers-pro" />
-      </CustomTreeItem>
-    </SimpleTreeView>
+    <Box sx={{ minHeight: 352, minWidth: 250 }}>
+      <SimpleTreeView defaultExpandedItems={['grid']}>
+        <CustomTreeItem itemId="grid" label="Data Grid">
+          <CustomTreeItem itemId="grid-community" label="@mui/x-data-grid" />
+          <CustomTreeItem itemId="grid-pro" label="@mui/x-data-grid-pro" />
+          <CustomTreeItem itemId="grid-premium" label="@mui/x-data-grid-premium" />
+        </CustomTreeItem>
+        <CustomTreeItem itemId="pickers" label="Date and Time Pickers">
+          <CustomTreeItem itemId="pickers-community" label="@mui/x-date-pickers" />
+          <CustomTreeItem itemId="pickers-pro" label="@mui/x-date-pickers-pro" />
+        </CustomTreeItem>
+        <CustomTreeItem itemId="charts" label="Charts">
+          <CustomTreeItem itemId="charts-community" label="@mui/x-charts" />
+        </CustomTreeItem>
+        <CustomTreeItem itemId="tree-view" label="Tree View">
+          <CustomTreeItem itemId="tree-view-community" label="@mui/x-tree-view" />
+        </CustomTreeItem>
+      </SimpleTreeView>
+    </Box>
   );
 }
diff --git a/docs/data/tree-view/simple-tree-view/customization/LabelSlotProps.tsx.preview b/docs/data/tree-view/simple-tree-view/customization/LabelSlotProps.tsx.preview
deleted file mode 100644
index 1aaad97525e67..0000000000000
--- a/docs/data/tree-view/simple-tree-view/customization/LabelSlotProps.tsx.preview
+++ /dev/null
@@ -1,15 +0,0 @@
-<SimpleTreeView
-  aria-label="customized"
-  defaultExpandedItems={['pickers']}
-  sx={{ overflowX: 'hidden', minHeight: 224, flexGrow: 1, maxWidth: 300 }}
->
-  <CustomTreeItem itemId="grid" label="Data Grid">
-    <CustomTreeItem itemId="grid-community" label="@mui/x-data-grid" />
-    <CustomTreeItem itemId="grid-pro" label="@mui/x-data-grid-pro" />
-    <CustomTreeItem itemId="grid-premium" label="@mui/x-data-grid-premium" />
-  </CustomTreeItem>
-  <CustomTreeItem itemId="pickers" label="Date and Time Pickers">
-    <CustomTreeItem itemId="pickers-community" label="@mui/x-date-pickers" />
-    <CustomTreeItem itemId="pickers-pro" label="@mui/x-date-pickers-pro" />
-  </CustomTreeItem>
-</SimpleTreeView>
\ No newline at end of file
diff --git a/docs/data/tree-view/simple-tree-view/customization/LabelSlots.js b/docs/data/tree-view/simple-tree-view/customization/LabelSlots.js
index cec9de6b0aebc..e5ff0f51a96d7 100644
--- a/docs/data/tree-view/simple-tree-view/customization/LabelSlots.js
+++ b/docs/data/tree-view/simple-tree-view/customization/LabelSlots.js
@@ -29,8 +29,8 @@ const CustomTreeItem = React.forwardRef((props, ref) => {
 
 export default function LabelSlots() {
   return (
-    <Box sx={{ height: 220, flexGrow: 1, maxWidth: 400 }}>
-      <SimpleTreeView defaultExpandedItems={['pickers']}>
+    <Box sx={{ minHeight: 352, minWidth: 250 }}>
+      <SimpleTreeView defaultExpandedItems={['grid']}>
         <CustomTreeItem itemId="grid" label="Data Grid">
           <CustomTreeItem
             itemId="grid-community"
@@ -60,6 +60,20 @@ export default function LabelSlots() {
             labelTooltip="Pro version (commercial) of the Date and Time Pickers"
           />
         </CustomTreeItem>
+        <CustomTreeItem itemId="charts" label="Charts">
+          <CustomTreeItem
+            itemId="charts-community"
+            label="@mui/x-charts"
+            labelTooltip="Community version (MIT) of the Charts"
+          />
+        </CustomTreeItem>
+        <CustomTreeItem itemId="tree-view" label="Tree View">
+          <CustomTreeItem
+            itemId="tree-view-community"
+            label="@mui/x-tree-view"
+            labelTooltip="Community version (MIT) of the Tree View"
+          />
+        </CustomTreeItem>
       </SimpleTreeView>
     </Box>
   );
diff --git a/docs/data/tree-view/simple-tree-view/customization/LabelSlots.tsx b/docs/data/tree-view/simple-tree-view/customization/LabelSlots.tsx
index 59882c3023c13..36bf15aae8862 100644
--- a/docs/data/tree-view/simple-tree-view/customization/LabelSlots.tsx
+++ b/docs/data/tree-view/simple-tree-view/customization/LabelSlots.tsx
@@ -44,8 +44,8 @@ const CustomTreeItem = React.forwardRef(
 
 export default function LabelSlots() {
   return (
-    <Box sx={{ height: 220, flexGrow: 1, maxWidth: 400 }}>
-      <SimpleTreeView defaultExpandedItems={['pickers']}>
+    <Box sx={{ minHeight: 352, minWidth: 250 }}>
+      <SimpleTreeView defaultExpandedItems={['grid']}>
         <CustomTreeItem itemId="grid" label="Data Grid">
           <CustomTreeItem
             itemId="grid-community"
@@ -75,6 +75,20 @@ export default function LabelSlots() {
             labelTooltip="Pro version (commercial) of the Date and Time Pickers"
           />
         </CustomTreeItem>
+        <CustomTreeItem itemId="charts" label="Charts">
+          <CustomTreeItem
+            itemId="charts-community"
+            label="@mui/x-charts"
+            labelTooltip="Community version (MIT) of the Charts"
+          />
+        </CustomTreeItem>
+        <CustomTreeItem itemId="tree-view" label="Tree View">
+          <CustomTreeItem
+            itemId="tree-view-community"
+            label="@mui/x-tree-view"
+            labelTooltip="Community version (MIT) of the Tree View"
+          />
+        </CustomTreeItem>
       </SimpleTreeView>
     </Box>
   );
diff --git a/docs/data/tree-view/simple-tree-view/customization/customization.md b/docs/data/tree-view/simple-tree-view/customization/customization.md
index 4e74f185137d5..e5e70b9e4aa89 100644
--- a/docs/data/tree-view/simple-tree-view/customization/customization.md
+++ b/docs/data/tree-view/simple-tree-view/customization/customization.md
@@ -60,7 +60,7 @@ The demo below shows how to add a tooltip on the Tree Item label:
 Use the `useTreeItem2` hook to create your own component.
 The demo below shows how to add an avatar and custom typography elements.
 
-{{"demo": "CustomContentTreeView.js", "defaultCodeOpen": false}}
+{{"demo": "HeadlessAPI.js", "defaultCodeOpen": false}}
 
 ## Common examples
 
diff --git a/docs/data/tree-view/simple-tree-view/expansion/ApiMethodSetItemExpansion.js b/docs/data/tree-view/simple-tree-view/expansion/ApiMethodSetItemExpansion.js
index 4015d5b926f4a..4d62aacd55256 100644
--- a/docs/data/tree-view/simple-tree-view/expansion/ApiMethodSetItemExpansion.js
+++ b/docs/data/tree-view/simple-tree-view/expansion/ApiMethodSetItemExpansion.js
@@ -18,12 +18,12 @@ export default function ApiMethodSetItemExpansion() {
   };
 
   return (
-    <Box sx={{ flexGrow: 1, maxWidth: 400 }}>
-      <Stack sx={{ mb: 1 }} spacing={2} direction="row">
+    <Stack spacing={2}>
+      <Stack spacing={2} direction="row">
         <Button onClick={handleExpandClick}>Expand Data Grid</Button>
         <Button onClick={handleCollapseClick}>Collapse Data Grid</Button>
       </Stack>
-      <Box sx={{ minHeight: 220, flexGrow: 1 }}>
+      <Box sx={{ minHeight: 352, minWidth: 250 }}>
         <SimpleTreeView apiRef={apiRef}>
           <TreeItem itemId="grid" label="Data Grid">
             <TreeItem itemId="grid-community" label="@mui/x-data-grid" />
@@ -34,8 +34,14 @@ export default function ApiMethodSetItemExpansion() {
             <TreeItem itemId="pickers-community" label="@mui/x-date-pickers" />
             <TreeItem itemId="pickers-pro" label="@mui/x-date-pickers-pro" />
           </TreeItem>
+          <TreeItem itemId="charts" label="Charts">
+            <TreeItem itemId="charts-community" label="@mui/x-charts" />
+          </TreeItem>
+          <TreeItem itemId="tree-view" label="Tree View">
+            <TreeItem itemId="tree-view-community" label="@mui/x-tree-view" />
+          </TreeItem>
         </SimpleTreeView>
       </Box>
-    </Box>
+    </Stack>
   );
 }
diff --git a/docs/data/tree-view/simple-tree-view/expansion/ApiMethodSetItemExpansion.tsx b/docs/data/tree-view/simple-tree-view/expansion/ApiMethodSetItemExpansion.tsx
index ea0bfb3d3cab5..01393a180d9d9 100644
--- a/docs/data/tree-view/simple-tree-view/expansion/ApiMethodSetItemExpansion.tsx
+++ b/docs/data/tree-view/simple-tree-view/expansion/ApiMethodSetItemExpansion.tsx
@@ -18,12 +18,12 @@ export default function ApiMethodSetItemExpansion() {
   };
 
   return (
-    <Box sx={{ flexGrow: 1, maxWidth: 400 }}>
-      <Stack sx={{ mb: 1 }} spacing={2} direction="row">
+    <Stack spacing={2}>
+      <Stack spacing={2} direction="row">
         <Button onClick={handleExpandClick}>Expand Data Grid</Button>
         <Button onClick={handleCollapseClick}>Collapse Data Grid</Button>
       </Stack>
-      <Box sx={{ minHeight: 220, flexGrow: 1 }}>
+      <Box sx={{ minHeight: 352, minWidth: 250 }}>
         <SimpleTreeView apiRef={apiRef}>
           <TreeItem itemId="grid" label="Data Grid">
             <TreeItem itemId="grid-community" label="@mui/x-data-grid" />
@@ -34,8 +34,14 @@ export default function ApiMethodSetItemExpansion() {
             <TreeItem itemId="pickers-community" label="@mui/x-date-pickers" />
             <TreeItem itemId="pickers-pro" label="@mui/x-date-pickers-pro" />
           </TreeItem>
+          <TreeItem itemId="charts" label="Charts">
+            <TreeItem itemId="charts-community" label="@mui/x-charts" />
+          </TreeItem>
+          <TreeItem itemId="tree-view" label="Tree View">
+            <TreeItem itemId="tree-view-community" label="@mui/x-tree-view" />
+          </TreeItem>
         </SimpleTreeView>
       </Box>
-    </Box>
+    </Stack>
   );
 }
diff --git a/docs/data/tree-view/simple-tree-view/expansion/ControlledExpansion.js b/docs/data/tree-view/simple-tree-view/expansion/ControlledExpansion.js
index a11d874a46598..60988ccb5108e 100644
--- a/docs/data/tree-view/simple-tree-view/expansion/ControlledExpansion.js
+++ b/docs/data/tree-view/simple-tree-view/expansion/ControlledExpansion.js
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
 import Button from '@mui/material/Button';
 import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView';
 import { TreeItem } from '@mui/x-tree-view/TreeItem';
@@ -32,13 +33,13 @@ export default function ControlledExpansion() {
   };
 
   return (
-    <Box sx={{ flexGrow: 1, maxWidth: 400 }}>
-      <Box sx={{ mb: 1 }}>
+    <Stack spacing={2}>
+      <div>
         <Button onClick={handleExpandClick}>
           {expandedItems.length === 0 ? 'Expand all' : 'Collapse all'}
         </Button>
-      </Box>
-      <Box sx={{ minHeight: 200, flexGrow: 1 }}>
+      </div>
+      <Box sx={{ minHeight: 352, minWidth: 250 }}>
         <SimpleTreeView
           expandedItems={expandedItems}
           onExpandedItemsChange={handleExpandedItemsChange}
@@ -60,6 +61,6 @@ export default function ControlledExpansion() {
           </TreeItem>
         </SimpleTreeView>
       </Box>
-    </Box>
+    </Stack>
   );
 }
diff --git a/docs/data/tree-view/simple-tree-view/expansion/ControlledExpansion.tsx b/docs/data/tree-view/simple-tree-view/expansion/ControlledExpansion.tsx
index ec0f524d81cf1..7846e0452a273 100644
--- a/docs/data/tree-view/simple-tree-view/expansion/ControlledExpansion.tsx
+++ b/docs/data/tree-view/simple-tree-view/expansion/ControlledExpansion.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
 import Button from '@mui/material/Button';
 import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView';
 import { TreeItem } from '@mui/x-tree-view/TreeItem';
@@ -35,13 +36,13 @@ export default function ControlledExpansion() {
   };
 
   return (
-    <Box sx={{ flexGrow: 1, maxWidth: 400 }}>
-      <Box sx={{ mb: 1 }}>
+    <Stack spacing={2}>
+      <div>
         <Button onClick={handleExpandClick}>
           {expandedItems.length === 0 ? 'Expand all' : 'Collapse all'}
         </Button>
-      </Box>
-      <Box sx={{ minHeight: 200, flexGrow: 1 }}>
+      </div>
+      <Box sx={{ minHeight: 352, minWidth: 250 }}>
         <SimpleTreeView
           expandedItems={expandedItems}
           onExpandedItemsChange={handleExpandedItemsChange}
@@ -63,6 +64,6 @@ export default function ControlledExpansion() {
           </TreeItem>
         </SimpleTreeView>
       </Box>
-    </Box>
+    </Stack>
   );
 }
diff --git a/docs/data/tree-view/simple-tree-view/expansion/TrackItemExpansionToggle.js b/docs/data/tree-view/simple-tree-view/expansion/TrackItemExpansionToggle.js
index e46f59e50ff67..6164a3bc57499 100644
--- a/docs/data/tree-view/simple-tree-view/expansion/TrackItemExpansionToggle.js
+++ b/docs/data/tree-view/simple-tree-view/expansion/TrackItemExpansionToggle.js
@@ -22,7 +22,7 @@ export default function TrackItemExpansionToggle() {
         </Typography>
       )}
 
-      <Box sx={{ minHeight: 200, minWidth: 300, flexGrow: 1 }}>
+      <Box sx={{ minHeight: 352, minWidth: 250 }}>
         <SimpleTreeView onItemExpansionToggle={handleItemExpansionToggle}>
           <TreeItem itemId="grid" label="Data Grid">
             <TreeItem itemId="grid-community" label="@mui/x-data-grid" />
diff --git a/docs/data/tree-view/simple-tree-view/expansion/TrackItemExpansionToggle.tsx b/docs/data/tree-view/simple-tree-view/expansion/TrackItemExpansionToggle.tsx
index 549b9e66e4770..a8945812b2d91 100644
--- a/docs/data/tree-view/simple-tree-view/expansion/TrackItemExpansionToggle.tsx
+++ b/docs/data/tree-view/simple-tree-view/expansion/TrackItemExpansionToggle.tsx
@@ -28,7 +28,7 @@ export default function TrackItemExpansionToggle() {
           Last action: {action.isExpanded ? 'expand' : 'collapse'} {action.itemId}
         </Typography>
       )}
-      <Box sx={{ minHeight: 200, minWidth: 300, flexGrow: 1 }}>
+      <Box sx={{ minHeight: 352, minWidth: 250 }}>
         <SimpleTreeView onItemExpansionToggle={handleItemExpansionToggle}>
           <TreeItem itemId="grid" label="Data Grid">
             <TreeItem itemId="grid-community" label="@mui/x-data-grid" />
diff --git a/docs/data/tree-view/simple-tree-view/focus/ApiMethodFocusItem.js b/docs/data/tree-view/simple-tree-view/focus/ApiMethodFocusItem.js
index 97950e48843af..52053493b5ae1 100644
--- a/docs/data/tree-view/simple-tree-view/focus/ApiMethodFocusItem.js
+++ b/docs/data/tree-view/simple-tree-view/focus/ApiMethodFocusItem.js
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
 import Button from '@mui/material/Button';
 import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView';
 import { TreeItem } from '@mui/x-tree-view/TreeItem';
@@ -12,11 +13,11 @@ export default function ApiMethodFocusItem() {
   };
 
   return (
-    <Box sx={{ flexGrow: 1, maxWidth: 400 }}>
-      <Box sx={{ mb: 1 }}>
+    <Stack spacing={2}>
+      <div>
         <Button onClick={handleButtonClick}>Focus pickers item</Button>
-      </Box>
-      <Box sx={{ minHeight: 264, flexGrow: 1 }}>
+      </div>
+      <Box sx={{ minHeight: 352, minWidth: 250 }}>
         <SimpleTreeView apiRef={apiRef}>
           <TreeItem itemId="grid" label="Data Grid">
             <TreeItem itemId="grid-community" label="@mui/x-data-grid" />
@@ -35,6 +36,6 @@ export default function ApiMethodFocusItem() {
           </TreeItem>
         </SimpleTreeView>
       </Box>
-    </Box>
+    </Stack>
   );
 }
diff --git a/docs/data/tree-view/simple-tree-view/focus/ApiMethodFocusItem.tsx b/docs/data/tree-view/simple-tree-view/focus/ApiMethodFocusItem.tsx
index 919cd401fb6f4..1f881952954a1 100644
--- a/docs/data/tree-view/simple-tree-view/focus/ApiMethodFocusItem.tsx
+++ b/docs/data/tree-view/simple-tree-view/focus/ApiMethodFocusItem.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
 import Button from '@mui/material/Button';
 import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView';
 import { TreeItem } from '@mui/x-tree-view/TreeItem';
@@ -12,11 +13,11 @@ export default function ApiMethodFocusItem() {
   };
 
   return (
-    <Box sx={{ flexGrow: 1, maxWidth: 400 }}>
-      <Box sx={{ mb: 1 }}>
+    <Stack spacing={2}>
+      <div>
         <Button onClick={handleButtonClick}>Focus pickers item</Button>
-      </Box>
-      <Box sx={{ minHeight: 264, flexGrow: 1 }}>
+      </div>
+      <Box sx={{ minHeight: 352, minWidth: 250 }}>
         <SimpleTreeView apiRef={apiRef}>
           <TreeItem itemId="grid" label="Data Grid">
             <TreeItem itemId="grid-community" label="@mui/x-data-grid" />
@@ -35,6 +36,6 @@ export default function ApiMethodFocusItem() {
           </TreeItem>
         </SimpleTreeView>
       </Box>
-    </Box>
+    </Stack>
   );
 }
diff --git a/docs/data/tree-view/simple-tree-view/items/BasicSimpleTreeView.js b/docs/data/tree-view/simple-tree-view/items/BasicSimpleTreeView.js
index 5757cfb2964e7..a1d3763587f3c 100644
--- a/docs/data/tree-view/simple-tree-view/items/BasicSimpleTreeView.js
+++ b/docs/data/tree-view/simple-tree-view/items/BasicSimpleTreeView.js
@@ -5,7 +5,7 @@ import { TreeItem } from '@mui/x-tree-view/TreeItem';
 
 export default function BasicSimpleTreeView() {
   return (
-    <Box sx={{ height: 220, flexGrow: 1, maxWidth: 400 }}>
+    <Box sx={{ minHeight: 352, minWidth: 250 }}>
       <SimpleTreeView>
         <TreeItem itemId="grid" label="Data Grid">
           <TreeItem itemId="grid-community" label="@mui/x-data-grid" />
@@ -16,6 +16,12 @@ export default function BasicSimpleTreeView() {
           <TreeItem itemId="pickers-community" label="@mui/x-date-pickers" />
           <TreeItem itemId="pickers-pro" label="@mui/x-date-pickers-pro" />
         </TreeItem>
+        <TreeItem itemId="charts" label="Charts">
+          <TreeItem itemId="charts-community" label="@mui/x-charts" />
+        </TreeItem>
+        <TreeItem itemId="tree-view" label="Tree View">
+          <TreeItem itemId="tree-view-community" label="@mui/x-tree-view" />
+        </TreeItem>
       </SimpleTreeView>
     </Box>
   );
diff --git a/docs/data/tree-view/simple-tree-view/items/BasicSimpleTreeView.tsx b/docs/data/tree-view/simple-tree-view/items/BasicSimpleTreeView.tsx
index 5757cfb2964e7..a1d3763587f3c 100644
--- a/docs/data/tree-view/simple-tree-view/items/BasicSimpleTreeView.tsx
+++ b/docs/data/tree-view/simple-tree-view/items/BasicSimpleTreeView.tsx
@@ -5,7 +5,7 @@ import { TreeItem } from '@mui/x-tree-view/TreeItem';
 
 export default function BasicSimpleTreeView() {
   return (
-    <Box sx={{ height: 220, flexGrow: 1, maxWidth: 400 }}>
+    <Box sx={{ minHeight: 352, minWidth: 250 }}>
       <SimpleTreeView>
         <TreeItem itemId="grid" label="Data Grid">
           <TreeItem itemId="grid-community" label="@mui/x-data-grid" />
@@ -16,6 +16,12 @@ export default function BasicSimpleTreeView() {
           <TreeItem itemId="pickers-community" label="@mui/x-date-pickers" />
           <TreeItem itemId="pickers-pro" label="@mui/x-date-pickers-pro" />
         </TreeItem>
+        <TreeItem itemId="charts" label="Charts">
+          <TreeItem itemId="charts-community" label="@mui/x-charts" />
+        </TreeItem>
+        <TreeItem itemId="tree-view" label="Tree View">
+          <TreeItem itemId="tree-view-community" label="@mui/x-tree-view" />
+        </TreeItem>
       </SimpleTreeView>
     </Box>
   );
diff --git a/docs/data/tree-view/simple-tree-view/items/BasicSimpleTreeView.tsx.preview b/docs/data/tree-view/simple-tree-view/items/BasicSimpleTreeView.tsx.preview
deleted file mode 100644
index 3641f9443f57a..0000000000000
--- a/docs/data/tree-view/simple-tree-view/items/BasicSimpleTreeView.tsx.preview
+++ /dev/null
@@ -1,11 +0,0 @@
-<SimpleTreeView>
-  <TreeItem itemId="grid" label="Data Grid">
-    <TreeItem itemId="grid-community" label="@mui/x-data-grid" />
-    <TreeItem itemId="grid-pro" label="@mui/x-data-grid-pro" />
-    <TreeItem itemId="grid-premium" label="@mui/x-data-grid-premium" />
-  </TreeItem>
-  <TreeItem itemId="pickers" label="Date and Time Pickers">
-    <TreeItem itemId="pickers-community" label="@mui/x-date-pickers" />
-    <TreeItem itemId="pickers-pro" label="@mui/x-date-pickers-pro" />
-  </TreeItem>
-</SimpleTreeView>
\ No newline at end of file
diff --git a/docs/data/tree-view/simple-tree-view/items/DisabledItemsFocusable.js b/docs/data/tree-view/simple-tree-view/items/DisabledItemsFocusable.js
index 773e68d490d01..f3712332000ac 100644
--- a/docs/data/tree-view/simple-tree-view/items/DisabledItemsFocusable.js
+++ b/docs/data/tree-view/simple-tree-view/items/DisabledItemsFocusable.js
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import Stack from '@mui/material/Stack';
 import Box from '@mui/material/Box';
 import Switch from '@mui/material/Switch';
 import FormControlLabel from '@mui/material/FormControlLabel';
@@ -12,20 +13,18 @@ export default function DisabledItemsFocusable() {
   };
 
   return (
-    <Box sx={{ flexGrow: 1, maxWidth: 400 }}>
-      <Box sx={{ mb: 1 }}>
-        <FormControlLabel
-          control={
-            <Switch
-              checked={disabledItemsFocusable}
-              onChange={handleToggle}
-              name="disabledItemsFocusable"
-            />
-          }
-          label="Allow focusing disabled items"
-        />
-      </Box>
-      <Box sx={{ minHeight: 200, flexGrow: 1, maxWidth: 400 }}>
+    <Stack spacing={2}>
+      <FormControlLabel
+        control={
+          <Switch
+            checked={disabledItemsFocusable}
+            onChange={handleToggle}
+            name="disabledItemsFocusable"
+          />
+        }
+        label="Allow focusing disabled items"
+      />
+      <Box sx={{ minHeight: 352, minWidth: 250 }}>
         <SimpleTreeView disabledItemsFocusable={disabledItemsFocusable}>
           <TreeItem itemId="grid" label="Data Grid">
             <TreeItem itemId="grid-community" label="@mui/x-data-grid" />
@@ -37,17 +36,13 @@ export default function DisabledItemsFocusable() {
             <TreeItem itemId="pickers-pro" label="@mui/x-date-pickers-pro" />
           </TreeItem>
           <TreeItem itemId="charts" label="Charts">
-            <TreeItem itemId="charts-community" label="@mui/x-charts" />
+            <TreeItem itemId="charts-community" label="@mui/x-charts" disabled />
           </TreeItem>
-          <TreeItem itemId="tree-view" label="Tree View">
+          <TreeItem itemId="tree-view" label="Tree View" disabled>
             <TreeItem itemId="tree-view-community" label="@mui/x-tree-view" />
-            <TreeItem itemId="tree-view-pro" label="@mui/x-tree-view-pro" disabled />
-          </TreeItem>
-          <TreeItem itemId="scheduler" label="Scheduler" disabled>
-            <TreeItem itemId="scheduler-community" label="@mui/x-scheduler" />
           </TreeItem>
         </SimpleTreeView>
       </Box>
-    </Box>
+    </Stack>
   );
 }
diff --git a/docs/data/tree-view/simple-tree-view/items/DisabledItemsFocusable.tsx b/docs/data/tree-view/simple-tree-view/items/DisabledItemsFocusable.tsx
index 2cab7252b0a98..010c5ff421623 100644
--- a/docs/data/tree-view/simple-tree-view/items/DisabledItemsFocusable.tsx
+++ b/docs/data/tree-view/simple-tree-view/items/DisabledItemsFocusable.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import Stack from '@mui/material/Stack';
 import Box from '@mui/material/Box';
 import Switch from '@mui/material/Switch';
 import FormControlLabel from '@mui/material/FormControlLabel';
@@ -12,20 +13,18 @@ export default function DisabledItemsFocusable() {
   };
 
   return (
-    <Box sx={{ flexGrow: 1, maxWidth: 400 }}>
-      <Box sx={{ mb: 1 }}>
-        <FormControlLabel
-          control={
-            <Switch
-              checked={disabledItemsFocusable}
-              onChange={handleToggle}
-              name="disabledItemsFocusable"
-            />
-          }
-          label="Allow focusing disabled items"
-        />
-      </Box>
-      <Box sx={{ minHeight: 200, flexGrow: 1, maxWidth: 400 }}>
+    <Stack spacing={2}>
+      <FormControlLabel
+        control={
+          <Switch
+            checked={disabledItemsFocusable}
+            onChange={handleToggle}
+            name="disabledItemsFocusable"
+          />
+        }
+        label="Allow focusing disabled items"
+      />
+      <Box sx={{ minHeight: 352, minWidth: 250 }}>
         <SimpleTreeView disabledItemsFocusable={disabledItemsFocusable}>
           <TreeItem itemId="grid" label="Data Grid">
             <TreeItem itemId="grid-community" label="@mui/x-data-grid" />
@@ -37,17 +36,13 @@ export default function DisabledItemsFocusable() {
             <TreeItem itemId="pickers-pro" label="@mui/x-date-pickers-pro" />
           </TreeItem>
           <TreeItem itemId="charts" label="Charts">
-            <TreeItem itemId="charts-community" label="@mui/x-charts" />
+            <TreeItem itemId="charts-community" label="@mui/x-charts" disabled />
           </TreeItem>
-          <TreeItem itemId="tree-view" label="Tree View">
+          <TreeItem itemId="tree-view" label="Tree View" disabled>
             <TreeItem itemId="tree-view-community" label="@mui/x-tree-view" />
-            <TreeItem itemId="tree-view-pro" label="@mui/x-tree-view-pro" disabled />
-          </TreeItem>
-          <TreeItem itemId="scheduler" label="Scheduler" disabled>
-            <TreeItem itemId="scheduler-community" label="@mui/x-scheduler" />
           </TreeItem>
         </SimpleTreeView>
       </Box>
-    </Box>
+    </Stack>
   );
 }
diff --git a/docs/data/tree-view/simple-tree-view/items/DisabledJSXItem.js b/docs/data/tree-view/simple-tree-view/items/DisabledJSXItem.js
index 14a73027e0ad4..4ae365f859a99 100644
--- a/docs/data/tree-view/simple-tree-view/items/DisabledJSXItem.js
+++ b/docs/data/tree-view/simple-tree-view/items/DisabledJSXItem.js
@@ -5,7 +5,7 @@ import { TreeItem } from '@mui/x-tree-view/TreeItem';
 
 export default function DisabledJSXItem() {
   return (
-    <Box sx={{ height: 264, flexGrow: 1, maxWidth: 400 }}>
+    <Box sx={{ minHeight: 320, minWidth: 250 }}>
       <SimpleTreeView>
         <TreeItem itemId="grid" label="Data Grid">
           <TreeItem itemId="grid-community" label="@mui/x-data-grid" />
@@ -17,14 +17,10 @@ export default function DisabledJSXItem() {
           <TreeItem itemId="pickers-pro" label="@mui/x-date-pickers-pro" />
         </TreeItem>
         <TreeItem itemId="charts" label="Charts">
-          <TreeItem itemId="charts-community" label="@mui/x-charts" />
+          <TreeItem itemId="charts-community" label="@mui/x-charts" disabled />
         </TreeItem>
-        <TreeItem itemId="tree-view" label="Tree View">
+        <TreeItem itemId="tree-view" label="Tree View" disabled>
           <TreeItem itemId="tree-view-community" label="@mui/x-tree-view" />
-          <TreeItem itemId="tree-view-pro" label="@mui/x-tree-view-pro" disabled />
-        </TreeItem>
-        <TreeItem itemId="scheduler" label="Scheduler" disabled>
-          <TreeItem itemId="scheduler-community" label="@mui/x-scheduler" />
         </TreeItem>
       </SimpleTreeView>
     </Box>
diff --git a/docs/data/tree-view/simple-tree-view/items/DisabledJSXItem.tsx b/docs/data/tree-view/simple-tree-view/items/DisabledJSXItem.tsx
index 14a73027e0ad4..4ae365f859a99 100644
--- a/docs/data/tree-view/simple-tree-view/items/DisabledJSXItem.tsx
+++ b/docs/data/tree-view/simple-tree-view/items/DisabledJSXItem.tsx
@@ -5,7 +5,7 @@ import { TreeItem } from '@mui/x-tree-view/TreeItem';
 
 export default function DisabledJSXItem() {
   return (
-    <Box sx={{ height: 264, flexGrow: 1, maxWidth: 400 }}>
+    <Box sx={{ minHeight: 320, minWidth: 250 }}>
       <SimpleTreeView>
         <TreeItem itemId="grid" label="Data Grid">
           <TreeItem itemId="grid-community" label="@mui/x-data-grid" />
@@ -17,14 +17,10 @@ export default function DisabledJSXItem() {
           <TreeItem itemId="pickers-pro" label="@mui/x-date-pickers-pro" />
         </TreeItem>
         <TreeItem itemId="charts" label="Charts">
-          <TreeItem itemId="charts-community" label="@mui/x-charts" />
+          <TreeItem itemId="charts-community" label="@mui/x-charts" disabled />
         </TreeItem>
-        <TreeItem itemId="tree-view" label="Tree View">
+        <TreeItem itemId="tree-view" label="Tree View" disabled>
           <TreeItem itemId="tree-view-community" label="@mui/x-tree-view" />
-          <TreeItem itemId="tree-view-pro" label="@mui/x-tree-view-pro" disabled />
-        </TreeItem>
-        <TreeItem itemId="scheduler" label="Scheduler" disabled>
-          <TreeItem itemId="scheduler-community" label="@mui/x-scheduler" />
         </TreeItem>
       </SimpleTreeView>
     </Box>
diff --git a/docs/data/tree-view/simple-tree-view/items/items.md b/docs/data/tree-view/simple-tree-view/items/items.md
index 9105dc5588cc4..a35ce2f3119c8 100644
--- a/docs/data/tree-view/simple-tree-view/items/items.md
+++ b/docs/data/tree-view/simple-tree-view/items/items.md
@@ -47,7 +47,7 @@ You must pass a `label` prop to each Tree Item component, as shown below:
 
 Use the `disabled` prop on the Tree Item component to disable interaction and focus:
 
-{{"demo": "DisabledItemsFocusable.js", "defaultCodeOpen": false}}
+{{"demo": "DisabledJSXItem.js", "defaultCodeOpen": false}}
 
 #### The disabledItemsFocusable prop
 
@@ -71,3 +71,5 @@ When it's set to true:
 - Mouse or keyboard interaction will not select disabled items.
 - <kbd class="key">Shift</kbd> + arrow keys will not skip disabled items, but the disabled item will not be selected.
 - Programmatic focus will focus disabled items.
+
+{{"demo": "DisabledItemsFocusable.js", "defaultCodeOpen": false}}
diff --git a/docs/data/tree-view/simple-tree-view/selection/CheckboxMultiSelection.js b/docs/data/tree-view/simple-tree-view/selection/CheckboxMultiSelection.js
index 4c5cc2874d520..1fa61790720c3 100644
--- a/docs/data/tree-view/simple-tree-view/selection/CheckboxMultiSelection.js
+++ b/docs/data/tree-view/simple-tree-view/selection/CheckboxMultiSelection.js
@@ -5,7 +5,7 @@ import { TreeItem } from '@mui/x-tree-view/TreeItem';
 
 export default function CheckboxMultiSelection() {
   return (
-    <Box sx={{ height: 264, flexGrow: 1, maxWidth: 400 }}>
+    <Box sx={{ minHeight: 352, minWidth: 290 }}>
       <SimpleTreeView multiSelect checkboxSelection>
         <TreeItem itemId="grid" label="Data Grid">
           <TreeItem itemId="grid-community" label="@mui/x-data-grid" />
diff --git a/docs/data/tree-view/simple-tree-view/selection/CheckboxMultiSelection.tsx b/docs/data/tree-view/simple-tree-view/selection/CheckboxMultiSelection.tsx
index 4c5cc2874d520..1fa61790720c3 100644
--- a/docs/data/tree-view/simple-tree-view/selection/CheckboxMultiSelection.tsx
+++ b/docs/data/tree-view/simple-tree-view/selection/CheckboxMultiSelection.tsx
@@ -5,7 +5,7 @@ import { TreeItem } from '@mui/x-tree-view/TreeItem';
 
 export default function CheckboxMultiSelection() {
   return (
-    <Box sx={{ height: 264, flexGrow: 1, maxWidth: 400 }}>
+    <Box sx={{ minHeight: 352, minWidth: 290 }}>
       <SimpleTreeView multiSelect checkboxSelection>
         <TreeItem itemId="grid" label="Data Grid">
           <TreeItem itemId="grid-community" label="@mui/x-data-grid" />
diff --git a/docs/data/tree-view/simple-tree-view/selection/CheckboxSelection.js b/docs/data/tree-view/simple-tree-view/selection/CheckboxSelection.js
index 1b1d057131b7d..9f4c9b6a77b7a 100644
--- a/docs/data/tree-view/simple-tree-view/selection/CheckboxSelection.js
+++ b/docs/data/tree-view/simple-tree-view/selection/CheckboxSelection.js
@@ -5,7 +5,7 @@ import { TreeItem } from '@mui/x-tree-view/TreeItem';
 
 export default function CheckboxSelection() {
   return (
-    <Box sx={{ height: 264, flexGrow: 1, maxWidth: 400 }}>
+    <Box sx={{ minHeight: 352, minWidth: 290 }}>
       <SimpleTreeView checkboxSelection>
         <TreeItem itemId="grid" label="Data Grid">
           <TreeItem itemId="grid-community" label="@mui/x-data-grid" />
diff --git a/docs/data/tree-view/simple-tree-view/selection/CheckboxSelection.tsx b/docs/data/tree-view/simple-tree-view/selection/CheckboxSelection.tsx
index 1b1d057131b7d..9f4c9b6a77b7a 100644
--- a/docs/data/tree-view/simple-tree-view/selection/CheckboxSelection.tsx
+++ b/docs/data/tree-view/simple-tree-view/selection/CheckboxSelection.tsx
@@ -5,7 +5,7 @@ import { TreeItem } from '@mui/x-tree-view/TreeItem';
 
 export default function CheckboxSelection() {
   return (
-    <Box sx={{ height: 264, flexGrow: 1, maxWidth: 400 }}>
+    <Box sx={{ minHeight: 352, minWidth: 290 }}>
       <SimpleTreeView checkboxSelection>
         <TreeItem itemId="grid" label="Data Grid">
           <TreeItem itemId="grid-community" label="@mui/x-data-grid" />
diff --git a/docs/data/tree-view/simple-tree-view/selection/ControlledSelection.js b/docs/data/tree-view/simple-tree-view/selection/ControlledSelection.js
index 12f8708449c37..2ede54e6e32c6 100644
--- a/docs/data/tree-view/simple-tree-view/selection/ControlledSelection.js
+++ b/docs/data/tree-view/simple-tree-view/selection/ControlledSelection.js
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
 import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView';
 import { TreeItem } from '@mui/x-tree-view/TreeItem';
 import Button from '@mui/material/Button';
@@ -32,13 +33,13 @@ export default function ControlledSelection() {
   };
 
   return (
-    <Box sx={{ flexGrow: 1, maxWidth: 400 }}>
-      <Box sx={{ mb: 1 }}>
+    <Stack spacing={2}>
+      <div>
         <Button onClick={handleSelectClick}>
           {selectedItems.length === 0 ? 'Select all' : 'Unselect all'}
         </Button>
-      </Box>
-      <Box sx={{ minHeight: 200, flexGrow: 1 }}>
+      </div>
+      <Box sx={{ minHeight: 352, minWidth: 250 }}>
         <SimpleTreeView
           selectedItems={selectedItems}
           onSelectedItemsChange={handleSelectedItemsChange}
@@ -61,6 +62,6 @@ export default function ControlledSelection() {
           </TreeItem>
         </SimpleTreeView>
       </Box>
-    </Box>
+    </Stack>
   );
 }
diff --git a/docs/data/tree-view/simple-tree-view/selection/ControlledSelection.tsx b/docs/data/tree-view/simple-tree-view/selection/ControlledSelection.tsx
index b638e19eeceea..21465a8b44ab7 100644
--- a/docs/data/tree-view/simple-tree-view/selection/ControlledSelection.tsx
+++ b/docs/data/tree-view/simple-tree-view/selection/ControlledSelection.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
 import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView';
 import { TreeItem } from '@mui/x-tree-view/TreeItem';
 import Button from '@mui/material/Button';
@@ -32,13 +33,13 @@ export default function ControlledSelection() {
   };
 
   return (
-    <Box sx={{ flexGrow: 1, maxWidth: 400 }}>
-      <Box sx={{ mb: 1 }}>
+    <Stack spacing={2}>
+      <div>
         <Button onClick={handleSelectClick}>
           {selectedItems.length === 0 ? 'Select all' : 'Unselect all'}
         </Button>
-      </Box>
-      <Box sx={{ minHeight: 200, flexGrow: 1 }}>
+      </div>
+      <Box sx={{ minHeight: 352, minWidth: 250 }}>
         <SimpleTreeView
           selectedItems={selectedItems}
           onSelectedItemsChange={handleSelectedItemsChange}
@@ -61,6 +62,6 @@ export default function ControlledSelection() {
           </TreeItem>
         </SimpleTreeView>
       </Box>
-    </Box>
+    </Stack>
   );
 }
diff --git a/docs/data/tree-view/simple-tree-view/selection/DisableSelection.js b/docs/data/tree-view/simple-tree-view/selection/DisableSelection.js
index 9db0d16ef7e6b..ffc7d808332f8 100644
--- a/docs/data/tree-view/simple-tree-view/selection/DisableSelection.js
+++ b/docs/data/tree-view/simple-tree-view/selection/DisableSelection.js
@@ -5,7 +5,7 @@ import { TreeItem } from '@mui/x-tree-view/TreeItem';
 
 export default function DisableSelection() {
   return (
-    <Box sx={{ minHeight: 200, flexGrow: 1, maxWidth: 400 }}>
+    <Box sx={{ minHeight: 352, minWidth: 250 }}>
       <SimpleTreeView disableSelection>
         <TreeItem itemId="grid" label="Data Grid">
           <TreeItem itemId="grid-community" label="@mui/x-data-grid" />
diff --git a/docs/data/tree-view/simple-tree-view/selection/DisableSelection.tsx b/docs/data/tree-view/simple-tree-view/selection/DisableSelection.tsx
index 9db0d16ef7e6b..ffc7d808332f8 100644
--- a/docs/data/tree-view/simple-tree-view/selection/DisableSelection.tsx
+++ b/docs/data/tree-view/simple-tree-view/selection/DisableSelection.tsx
@@ -5,7 +5,7 @@ import { TreeItem } from '@mui/x-tree-view/TreeItem';
 
 export default function DisableSelection() {
   return (
-    <Box sx={{ minHeight: 200, flexGrow: 1, maxWidth: 400 }}>
+    <Box sx={{ minHeight: 352, minWidth: 250 }}>
       <SimpleTreeView disableSelection>
         <TreeItem itemId="grid" label="Data Grid">
           <TreeItem itemId="grid-community" label="@mui/x-data-grid" />
diff --git a/docs/data/tree-view/simple-tree-view/selection/MultiSelectTreeView.js b/docs/data/tree-view/simple-tree-view/selection/MultiSelectTreeView.js
index eba9bb8cd17fe..affd5bdee3e80 100644
--- a/docs/data/tree-view/simple-tree-view/selection/MultiSelectTreeView.js
+++ b/docs/data/tree-view/simple-tree-view/selection/MultiSelectTreeView.js
@@ -5,7 +5,7 @@ import { TreeItem } from '@mui/x-tree-view/TreeItem';
 
 export default function MultiSelectTreeView() {
   return (
-    <Box sx={{ minHeight: 200, flexGrow: 1, maxWidth: 400 }}>
+    <Box sx={{ minHeight: 352, minWidth: 250 }}>
       <SimpleTreeView multiSelect>
         <TreeItem itemId="grid" label="Data Grid">
           <TreeItem itemId="grid-community" label="@mui/x-data-grid" />
diff --git a/docs/data/tree-view/simple-tree-view/selection/MultiSelectTreeView.tsx b/docs/data/tree-view/simple-tree-view/selection/MultiSelectTreeView.tsx
index eba9bb8cd17fe..affd5bdee3e80 100644
--- a/docs/data/tree-view/simple-tree-view/selection/MultiSelectTreeView.tsx
+++ b/docs/data/tree-view/simple-tree-view/selection/MultiSelectTreeView.tsx
@@ -5,7 +5,7 @@ import { TreeItem } from '@mui/x-tree-view/TreeItem';
 
 export default function MultiSelectTreeView() {
   return (
-    <Box sx={{ minHeight: 200, flexGrow: 1, maxWidth: 400 }}>
+    <Box sx={{ minHeight: 352, minWidth: 250 }}>
       <SimpleTreeView multiSelect>
         <TreeItem itemId="grid" label="Data Grid">
           <TreeItem itemId="grid-community" label="@mui/x-data-grid" />
diff --git a/docs/data/tree-view/simple-tree-view/selection/SingleSelectTreeView.js b/docs/data/tree-view/simple-tree-view/selection/SingleSelectTreeView.js
index 60caf9c535862..ab9bd504a607e 100644
--- a/docs/data/tree-view/simple-tree-view/selection/SingleSelectTreeView.js
+++ b/docs/data/tree-view/simple-tree-view/selection/SingleSelectTreeView.js
@@ -1,41 +1,28 @@
 import * as React from 'react';
 import Box from '@mui/material/Box';
-import { RichTreeView } from '@mui/x-tree-view/RichTreeView';
-
-const MUI_X_PRODUCTS = [
-  {
-    id: 'grid',
-    label: 'Data Grid',
-    children: [
-      { id: 'grid-community', label: '@mui/x-data-grid' },
-      { id: 'grid-pro', label: '@mui/x-data-grid-pro' },
-      { id: 'grid-premium', label: '@mui/x-data-grid-premium' },
-    ],
-  },
-  {
-    id: 'pickers',
-    label: 'Date and Time Pickers',
-    children: [
-      { id: 'pickers-community', label: '@mui/x-date-pickers' },
-      { id: 'pickers-pro', label: '@mui/x-date-pickers-pro' },
-    ],
-  },
-  {
-    id: 'charts',
-    label: 'Charts',
-    children: [{ id: 'charts-community', label: '@mui/x-charts' }],
-  },
-  {
-    id: 'tree-view',
-    label: 'Tree View',
-    children: [{ id: 'tree-view-community', label: '@mui/x-tree-view' }],
-  },
-];
+import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView';
+import { TreeItem } from '@mui/x-tree-view/TreeItem';
 
 export default function SingleSelectTreeView() {
   return (
-    <Box sx={{ minHeight: 200, flexGrow: 1, maxWidth: 400 }}>
-      <RichTreeView items={MUI_X_PRODUCTS} />
+    <Box sx={{ minHeight: 352, minWidth: 250 }}>
+      <SimpleTreeView>
+        <TreeItem itemId="grid" label="Data Grid">
+          <TreeItem itemId="grid-community" label="@mui/x-data-grid" />
+          <TreeItem itemId="grid-pro" label="@mui/x-data-grid-pro" />
+          <TreeItem itemId="grid-premium" label="@mui/x-data-grid-premium" />
+        </TreeItem>
+        <TreeItem itemId="pickers" label="Date and Time Pickers">
+          <TreeItem itemId="pickers-community" label="@mui/x-date-pickers" />
+          <TreeItem itemId="pickers-pro" label="@mui/x-date-pickers-pro" />
+        </TreeItem>
+        <TreeItem itemId="charts" label="Charts">
+          <TreeItem itemId="charts-community" label="@mui/x-charts" />
+        </TreeItem>
+        <TreeItem itemId="tree-view" label="Tree View">
+          <TreeItem itemId="tree-view-community" label="@mui/x-tree-view" />
+        </TreeItem>
+      </SimpleTreeView>
     </Box>
   );
 }
diff --git a/docs/data/tree-view/simple-tree-view/selection/SingleSelectTreeView.tsx b/docs/data/tree-view/simple-tree-view/selection/SingleSelectTreeView.tsx
index fbd000d8af63d..ab9bd504a607e 100644
--- a/docs/data/tree-view/simple-tree-view/selection/SingleSelectTreeView.tsx
+++ b/docs/data/tree-view/simple-tree-view/selection/SingleSelectTreeView.tsx
@@ -1,42 +1,28 @@
 import * as React from 'react';
 import Box from '@mui/material/Box';
-import { RichTreeView } from '@mui/x-tree-view/RichTreeView';
-import { TreeViewBaseItem } from '@mui/x-tree-view/models';
-
-const MUI_X_PRODUCTS: TreeViewBaseItem[] = [
-  {
-    id: 'grid',
-    label: 'Data Grid',
-    children: [
-      { id: 'grid-community', label: '@mui/x-data-grid' },
-      { id: 'grid-pro', label: '@mui/x-data-grid-pro' },
-      { id: 'grid-premium', label: '@mui/x-data-grid-premium' },
-    ],
-  },
-  {
-    id: 'pickers',
-    label: 'Date and Time Pickers',
-    children: [
-      { id: 'pickers-community', label: '@mui/x-date-pickers' },
-      { id: 'pickers-pro', label: '@mui/x-date-pickers-pro' },
-    ],
-  },
-  {
-    id: 'charts',
-    label: 'Charts',
-    children: [{ id: 'charts-community', label: '@mui/x-charts' }],
-  },
-  {
-    id: 'tree-view',
-    label: 'Tree View',
-    children: [{ id: 'tree-view-community', label: '@mui/x-tree-view' }],
-  },
-];
+import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView';
+import { TreeItem } from '@mui/x-tree-view/TreeItem';
 
 export default function SingleSelectTreeView() {
   return (
-    <Box sx={{ minHeight: 200, flexGrow: 1, maxWidth: 400 }}>
-      <RichTreeView items={MUI_X_PRODUCTS} />
+    <Box sx={{ minHeight: 352, minWidth: 250 }}>
+      <SimpleTreeView>
+        <TreeItem itemId="grid" label="Data Grid">
+          <TreeItem itemId="grid-community" label="@mui/x-data-grid" />
+          <TreeItem itemId="grid-pro" label="@mui/x-data-grid-pro" />
+          <TreeItem itemId="grid-premium" label="@mui/x-data-grid-premium" />
+        </TreeItem>
+        <TreeItem itemId="pickers" label="Date and Time Pickers">
+          <TreeItem itemId="pickers-community" label="@mui/x-date-pickers" />
+          <TreeItem itemId="pickers-pro" label="@mui/x-date-pickers-pro" />
+        </TreeItem>
+        <TreeItem itemId="charts" label="Charts">
+          <TreeItem itemId="charts-community" label="@mui/x-charts" />
+        </TreeItem>
+        <TreeItem itemId="tree-view" label="Tree View">
+          <TreeItem itemId="tree-view-community" label="@mui/x-tree-view" />
+        </TreeItem>
+      </SimpleTreeView>
     </Box>
   );
 }
diff --git a/docs/data/tree-view/simple-tree-view/selection/SingleSelectTreeView.tsx.preview b/docs/data/tree-view/simple-tree-view/selection/SingleSelectTreeView.tsx.preview
deleted file mode 100644
index 19ab6390267f1..0000000000000
--- a/docs/data/tree-view/simple-tree-view/selection/SingleSelectTreeView.tsx.preview
+++ /dev/null
@@ -1 +0,0 @@
-<RichTreeView items={MUI_X_PRODUCTS} />
\ No newline at end of file
diff --git a/docs/data/tree-view/simple-tree-view/selection/TrackItemSelectionToggle.js b/docs/data/tree-view/simple-tree-view/selection/TrackItemSelectionToggle.js
index 55c76b326e225..a42fbf9f74a7f 100644
--- a/docs/data/tree-view/simple-tree-view/selection/TrackItemSelectionToggle.js
+++ b/docs/data/tree-view/simple-tree-view/selection/TrackItemSelectionToggle.js
@@ -21,7 +21,7 @@ export default function TrackItemSelectionToggle() {
           ? 'No item selection recorded'
           : `Last selected item: ${lastSelectedItem}`}
       </Typography>
-      <Box sx={{ minHeight: 200, minWidth: 300, flexGrow: 1 }}>
+      <Box sx={{ minHeight: 352, minWidth: 300 }}>
         <SimpleTreeView onItemSelectionToggle={handleItemSelectionToggle}>
           <TreeItem itemId="grid" label="Data Grid">
             <TreeItem itemId="grid-community" label="@mui/x-data-grid" />
diff --git a/docs/data/tree-view/simple-tree-view/selection/TrackItemSelectionToggle.tsx b/docs/data/tree-view/simple-tree-view/selection/TrackItemSelectionToggle.tsx
index ccc5bde9bfed8..665c44a496fcb 100644
--- a/docs/data/tree-view/simple-tree-view/selection/TrackItemSelectionToggle.tsx
+++ b/docs/data/tree-view/simple-tree-view/selection/TrackItemSelectionToggle.tsx
@@ -27,7 +27,7 @@ export default function TrackItemSelectionToggle() {
           ? 'No item selection recorded'
           : `Last selected item: ${lastSelectedItem}`}
       </Typography>
-      <Box sx={{ minHeight: 200, minWidth: 300, flexGrow: 1 }}>
+      <Box sx={{ minHeight: 352, minWidth: 300 }}>
         <SimpleTreeView onItemSelectionToggle={handleItemSelectionToggle}>
           <TreeItem itemId="grid" label="Data Grid">
             <TreeItem itemId="grid-community" label="@mui/x-data-grid" />