diff --git a/docs/data/tree-view/getting-started/FirstComponent.js b/docs/data/tree-view/getting-started/FirstComponent.js
index f5b1eb6a7691..1daadc188de2 100644
--- a/docs/data/tree-view/getting-started/FirstComponent.js
+++ b/docs/data/tree-view/getting-started/FirstComponent.js
@@ -1,22 +1,28 @@
 import * as React from 'react';
+import Box from '@mui/material/Box';
 import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView';
 import { TreeItem } from '@mui/x-tree-view/TreeItem';
 
 export default function FirstComponent() {
   return (
-    <SimpleTreeView
-      aria-label="file system navigator"
-      sx={{ height: 200, flexGrow: 1, maxWidth: 400, overflowY: 'auto' }}
-    >
-      <TreeItem itemId="1" label="Applications">
-        <TreeItem itemId="2" label="Calendar" />
-      </TreeItem>
-      <TreeItem itemId="5" label="Documents">
-        <TreeItem itemId="10" label="OSS" />
-        <TreeItem itemId="6" label="MUI">
-          <TreeItem itemId="8" label="index.js" />
+    <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>
-    </SimpleTreeView>
+        <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/getting-started/FirstComponent.tsx b/docs/data/tree-view/getting-started/FirstComponent.tsx
index f5b1eb6a7691..1daadc188de2 100644
--- a/docs/data/tree-view/getting-started/FirstComponent.tsx
+++ b/docs/data/tree-view/getting-started/FirstComponent.tsx
@@ -1,22 +1,28 @@
 import * as React from 'react';
+import Box from '@mui/material/Box';
 import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView';
 import { TreeItem } from '@mui/x-tree-view/TreeItem';
 
 export default function FirstComponent() {
   return (
-    <SimpleTreeView
-      aria-label="file system navigator"
-      sx={{ height: 200, flexGrow: 1, maxWidth: 400, overflowY: 'auto' }}
-    >
-      <TreeItem itemId="1" label="Applications">
-        <TreeItem itemId="2" label="Calendar" />
-      </TreeItem>
-      <TreeItem itemId="5" label="Documents">
-        <TreeItem itemId="10" label="OSS" />
-        <TreeItem itemId="6" label="MUI">
-          <TreeItem itemId="8" label="index.js" />
+    <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>
-    </SimpleTreeView>
+        <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/getting-started/FirstComponent.tsx.preview b/docs/data/tree-view/getting-started/FirstComponent.tsx.preview
deleted file mode 100644
index 8228e866c065..000000000000
--- a/docs/data/tree-view/getting-started/FirstComponent.tsx.preview
+++ /dev/null
@@ -1,14 +0,0 @@
-<SimpleTreeView
-  aria-label="file system navigator"
-  sx={{ height: 200, flexGrow: 1, maxWidth: 400, overflowY: 'auto' }}
->
-  <TreeItem itemId="1" label="Applications">
-    <TreeItem itemId="2" label="Calendar" />
-  </TreeItem>
-  <TreeItem itemId="5" label="Documents">
-    <TreeItem itemId="10" label="OSS" />
-    <TreeItem itemId="6" label="MUI">
-      <TreeItem itemId="8" label="index.js" />
-    </TreeItem>
-  </TreeItem>
-</SimpleTreeView>
\ No newline at end of file
diff --git a/docs/data/tree-view/overview/BasicRichTreeView.js b/docs/data/tree-view/overview/BasicRichTreeView.js
index 6891094201b0..7bb6d22d66dd 100644
--- a/docs/data/tree-view/overview/BasicRichTreeView.js
+++ b/docs/data/tree-view/overview/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={{ height: 220, flexGrow: 1, maxWidth: 400 }}>
+    <Box sx={{ minHeight: 352, minWidth: 250 }}>
       <RichTreeView items={MUI_X_PRODUCTS} />
     </Box>
   );
diff --git a/docs/data/tree-view/overview/BasicRichTreeView.tsx b/docs/data/tree-view/overview/BasicRichTreeView.tsx
index 5f89f65503c3..e18e3bfcc070 100644
--- a/docs/data/tree-view/overview/BasicRichTreeView.tsx
+++ b/docs/data/tree-view/overview/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={{ height: 220, flexGrow: 1, maxWidth: 400 }}>
+    <Box sx={{ minHeight: 352, minWidth: 250 }}>
       <RichTreeView items={MUI_X_PRODUCTS} />
     </Box>
   );
diff --git a/docs/data/tree-view/overview/BasicSimpleTreeView.js b/docs/data/tree-view/overview/BasicSimpleTreeView.js
index 5757cfb2964e..a1d3763587f3 100644
--- a/docs/data/tree-view/overview/BasicSimpleTreeView.js
+++ b/docs/data/tree-view/overview/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/overview/BasicSimpleTreeView.tsx b/docs/data/tree-view/overview/BasicSimpleTreeView.tsx
index 5757cfb2964e..a1d3763587f3 100644
--- a/docs/data/tree-view/overview/BasicSimpleTreeView.tsx
+++ b/docs/data/tree-view/overview/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/overview/BasicSimpleTreeView.tsx.preview b/docs/data/tree-view/overview/BasicSimpleTreeView.tsx.preview
deleted file mode 100644
index 3641f9443f57..000000000000
--- a/docs/data/tree-view/overview/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/rich-tree-view/customization/CustomAnimation.js b/docs/data/tree-view/rich-tree-view/customization/CustomAnimation.js
index 53d9edc89c93..7941d92b58e5 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 c0f7dc541b51..234b4b656bd9 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 56ad322fe2d0..0e834c371ea1 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 9b6787b5c825..ddafd6e850a0 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 8fe4f628f2ce..b22872ffde54 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 209560af6131..688a706a7f54 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 255f2ec67c29..9f943fa5f554 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 ab3760093459..dd1a123cb753 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 3aef020f6665..d2d3246c76fb 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/FileExplorer.js b/docs/data/tree-view/rich-tree-view/customization/FileExplorer.js
index 4f11f68fa6e5..ee988f862845 100644
--- a/docs/data/tree-view/rich-tree-view/customization/FileExplorer.js
+++ b/docs/data/tree-view/rich-tree-view/customization/FileExplorer.js
@@ -256,7 +256,6 @@ export default function FileExplorer() {
   return (
     <RichTreeView
       items={ITEMS}
-      aria-label="file explorer"
       defaultExpandedItems={['1', '1.1']}
       defaultSelectedItems="1.1"
       sx={{ height: 'fit-content', flexGrow: 1, maxWidth: 400, overflowY: 'auto' }}
diff --git a/docs/data/tree-view/rich-tree-view/customization/FileExplorer.tsx b/docs/data/tree-view/rich-tree-view/customization/FileExplorer.tsx
index b7361409735a..3bee383e9d96 100644
--- a/docs/data/tree-view/rich-tree-view/customization/FileExplorer.tsx
+++ b/docs/data/tree-view/rich-tree-view/customization/FileExplorer.tsx
@@ -292,7 +292,6 @@ export default function FileExplorer() {
   return (
     <RichTreeView
       items={ITEMS}
-      aria-label="file explorer"
       defaultExpandedItems={['1', '1.1']}
       defaultSelectedItems="1.1"
       sx={{ height: 'fit-content', flexGrow: 1, maxWidth: 400, overflowY: 'auto' }}
diff --git a/docs/data/tree-view/rich-tree-view/customization/FileExplorer.tsx.preview b/docs/data/tree-view/rich-tree-view/customization/FileExplorer.tsx.preview
index 5f87458bdbbe..9efaa97d6eb4 100644
--- a/docs/data/tree-view/rich-tree-view/customization/FileExplorer.tsx.preview
+++ b/docs/data/tree-view/rich-tree-view/customization/FileExplorer.tsx.preview
@@ -1,6 +1,5 @@
 <RichTreeView
   items={ITEMS}
-  aria-label="file explorer"
   defaultExpandedItems={['1', '1.1']}
   defaultSelectedItems="1.1"
   sx={{ height: 'fit-content', flexGrow: 1, maxWidth: 400, overflowY: 'auto' }}
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 24ddeb962f48..e3915dd7caba 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 0caea393d697..8d0929895b2c 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 e37df6849fe2..58e2294ec29d 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/IconExpansionTreeView.js b/docs/data/tree-view/rich-tree-view/customization/IconExpansionTreeView.js
index 0a57a4123f6a..fa2935769a63 100644
--- a/docs/data/tree-view/rich-tree-view/customization/IconExpansionTreeView.js
+++ b/docs/data/tree-view/rich-tree-view/customization/IconExpansionTreeView.js
@@ -5,24 +5,34 @@ import { useTreeItem2Utils } from '@mui/x-tree-view/hooks';
 
 import { TreeItem2 } from '@mui/x-tree-view/TreeItem2';
 
-const ITEMS = [
+const MUI_X_PRODUCTS = [
   {
-    id: '1',
-    label: 'Applications',
-    children: [{ id: '2', label: 'Calendar' }],
+    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: '3',
-    label: 'Documents',
+    id: 'pickers',
+    label: 'Date and Time Pickers',
     children: [
-      { id: '6', label: 'OSS' },
-      {
-        id: '4',
-        label: 'MUI',
-        children: [{ id: '5', label: 'index.js' }],
-      },
+      { 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 = React.forwardRef(function MyTreeItem(props, ref) {
@@ -54,12 +64,8 @@ const CustomTreeItem = React.forwardRef(function MyTreeItem(props, ref) {
 
 export default function IconExpansionTreeView() {
   return (
-    <Box sx={{ minHeight: 180, flexGrow: 1, maxWidth: 300 }}>
-      <RichTreeView
-        aria-label="icon expansion"
-        items={ITEMS}
-        slots={{ item: CustomTreeItem }}
-      />
+    <Box sx={{ minHeight: 352, minWidth: 250 }}>
+      <RichTreeView items={MUI_X_PRODUCTS} slots={{ item: CustomTreeItem }} />
     </Box>
   );
 }
diff --git a/docs/data/tree-view/rich-tree-view/customization/IconExpansionTreeView.tsx b/docs/data/tree-view/rich-tree-view/customization/IconExpansionTreeView.tsx
index 37f6f43aa73a..0d7345a1047d 100644
--- a/docs/data/tree-view/rich-tree-view/customization/IconExpansionTreeView.tsx
+++ b/docs/data/tree-view/rich-tree-view/customization/IconExpansionTreeView.tsx
@@ -6,24 +6,34 @@ import { UseTreeItem2ContentSlotOwnProps } from '@mui/x-tree-view/useTreeItem2';
 import { TreeItem2, TreeItem2Props } from '@mui/x-tree-view/TreeItem2';
 import { TreeViewBaseItem } from '@mui/x-tree-view/models';
 
-const ITEMS: TreeViewBaseItem[] = [
+const MUI_X_PRODUCTS: TreeViewBaseItem[] = [
   {
-    id: '1',
-    label: 'Applications',
-    children: [{ id: '2', label: 'Calendar' }],
+    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: '3',
-    label: 'Documents',
+    id: 'pickers',
+    label: 'Date and Time Pickers',
     children: [
-      { id: '6', label: 'OSS' },
-      {
-        id: '4',
-        label: 'MUI',
-        children: [{ id: '5', label: 'index.js' }],
-      },
+      { 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 = React.forwardRef(function MyTreeItem(
@@ -58,12 +68,8 @@ const CustomTreeItem = React.forwardRef(function MyTreeItem(
 
 export default function IconExpansionTreeView() {
   return (
-    <Box sx={{ minHeight: 180, flexGrow: 1, maxWidth: 300 }}>
-      <RichTreeView
-        aria-label="icon expansion"
-        items={ITEMS}
-        slots={{ item: CustomTreeItem }}
-      />
+    <Box sx={{ minHeight: 352, minWidth: 250 }}>
+      <RichTreeView items={MUI_X_PRODUCTS} slots={{ item: CustomTreeItem }} />
     </Box>
   );
 }
diff --git a/docs/data/tree-view/rich-tree-view/customization/IconExpansionTreeView.tsx.preview b/docs/data/tree-view/rich-tree-view/customization/IconExpansionTreeView.tsx.preview
index ea2163196d7a..660542f7bf2c 100644
--- a/docs/data/tree-view/rich-tree-view/customization/IconExpansionTreeView.tsx.preview
+++ b/docs/data/tree-view/rich-tree-view/customization/IconExpansionTreeView.tsx.preview
@@ -1,5 +1 @@
-<RichTreeView
-  aria-label="icon expansion"
-  items={ITEMS}
-  slots={{ item: CustomTreeItem }}
-/>
\ No newline at end of file
+<RichTreeView items={MUI_X_PRODUCTS} slots={{ item: CustomTreeItem }} />
\ No newline at end of file
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 0261e5154c82..d6c415bbbe42 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 99f29c8d5d29..a94af1fab5af 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 511debc05ff2..fafc88534a22 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 52402c34a18b..acddadac792c 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,15 @@ 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}
+          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 e4975c392a44..a833704682aa 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,15 @@ 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}
+          slots={{ item: CustomTreeItem }}
+        />
+      </TreeItemContext.Provider>
+    </Box>
   );
 }
diff --git a/docs/data/tree-view/rich-tree-view/customization/LabelSlots.tsx.preview b/docs/data/tree-view/rich-tree-view/customization/LabelSlots.tsx.preview
index 36cf606d1cb1..7ba0ef733a39 100644
--- a/docs/data/tree-view/rich-tree-view/customization/LabelSlots.tsx.preview
+++ b/docs/data/tree-view/rich-tree-view/customization/LabelSlots.tsx.preview
@@ -3,7 +3,6 @@
     items={products}
     aria-label="customized"
     defaultExpandedItems={DEFAULT_EXPANDED_ITEMS}
-    sx={{ overflowX: 'hidden', minHeight: 224, flexGrow: 1, maxWidth: 300 }}
     slots={{ item: CustomTreeItem }}
   />
 </TreeItemContext.Provider>
\ No newline at end of file
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 da4b3e57a2cc..8f1552b6f0df 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 54ef0fe7b173..403f4f30d65a 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 051424e25950..f0788877de8d 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 ca89ea196b8b..d07881acb938 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 bcc49a4c33c4..4a18499fcc8e 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 83d826091478..44009d3868d1 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 8a83ec46e541..de405a604311 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 22ab08e87b2a..ad135b68d7fa 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 987bb9b2f674..51f806149b21 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 81762cedbdb4..e58c7c00526b 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 4dc583c1c6a8..21edd6b04eac 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 364a83f58a5c..22732137d9ff 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 144d8e4e8dd5..d1343eb1f83d 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/headless/LogExpandedItems.js b/docs/data/tree-view/rich-tree-view/headless/LogExpandedItems.js
index 33cca94e5ef0..59a5bffe36ab 100644
--- a/docs/data/tree-view/rich-tree-view/headless/LogExpandedItems.js
+++ b/docs/data/tree-view/rich-tree-view/headless/LogExpandedItems.js
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { useThemeProps } from '@mui/material/styles';
 import { useSlotProps } from '@mui/base/utils';
+import Box from '@mui/material/Box';
 import Stack from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
 
@@ -76,20 +77,34 @@ function TreeView(inProps) {
   );
 }
 
-const ITEMS = [
+const MUI_X_PRODUCTS = [
   {
-    id: '1',
-    label: 'Applications',
-    children: [{ id: '2', label: 'Calendar' }],
+    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: '5',
-    label: 'Documents',
+    id: 'pickers',
+    label: 'Date and Time Pickers',
     children: [
-      { id: '10', label: 'OSS' },
-      { id: '6', label: 'MUI', children: [{ id: '8', label: 'index.js' }] },
+      { 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' }],
+  },
 ];
 
 export default function LogExpandedItems() {
@@ -97,17 +112,17 @@ export default function LogExpandedItems() {
 
   return (
     <Stack spacing={2}>
-      <TreeView
-        aria-label="file system navigator"
-        sx={{ height: 240, flexGrow: 1, maxWidth: 400, overflowY: 'auto' }}
-        items={ITEMS}
-        areLogsEnabled
-        logMessage={(message) =>
-          setLogs((prev) =>
-            prev[prev.length - 1] === message ? prev : [...prev, message],
-          )
-        }
-      />
+      <Box sx={{ minHeight: 352, minWidth: 250 }}>
+        <TreeView
+          items={MUI_X_PRODUCTS}
+          areLogsEnabled
+          logMessage={(message) =>
+            setLogs((prev) =>
+              prev[prev.length - 1] === message ? prev : [...prev, message],
+            )
+          }
+        />
+      </Box>
       <Stack spacing={1}>
         {logs.map((log, index) => (
           <Typography key={index}>{log}</Typography>
diff --git a/docs/data/tree-view/rich-tree-view/headless/LogExpandedItems.tsx b/docs/data/tree-view/rich-tree-view/headless/LogExpandedItems.tsx
index 25a1912754d3..75c05b7c6b9a 100644
--- a/docs/data/tree-view/rich-tree-view/headless/LogExpandedItems.tsx
+++ b/docs/data/tree-view/rich-tree-view/headless/LogExpandedItems.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { useThemeProps } from '@mui/material/styles';
 import { useSlotProps } from '@mui/base/utils';
+import Box from '@mui/material/Box';
 import Stack from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
 import { TreeViewBaseItem } from '@mui/x-tree-view/models';
@@ -128,20 +129,34 @@ function TreeView<R extends {}, Multiple extends boolean | undefined>(
   );
 }
 
-const ITEMS: TreeViewBaseItem[] = [
+const MUI_X_PRODUCTS: TreeViewBaseItem[] = [
   {
-    id: '1',
-    label: 'Applications',
-    children: [{ id: '2', label: 'Calendar' }],
+    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: '5',
-    label: 'Documents',
+    id: 'pickers',
+    label: 'Date and Time Pickers',
     children: [
-      { id: '10', label: 'OSS' },
-      { id: '6', label: 'MUI', children: [{ id: '8', label: 'index.js' }] },
+      { 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' }],
+  },
 ];
 
 export default function LogExpandedItems() {
@@ -149,17 +164,17 @@ export default function LogExpandedItems() {
 
   return (
     <Stack spacing={2}>
-      <TreeView
-        aria-label="file system navigator"
-        sx={{ height: 240, flexGrow: 1, maxWidth: 400, overflowY: 'auto' }}
-        items={ITEMS}
-        areLogsEnabled
-        logMessage={(message) =>
-          setLogs((prev) =>
-            prev[prev.length - 1] === message ? prev : [...prev, message],
-          )
-        }
-      />
+      <Box sx={{ minHeight: 352, minWidth: 250 }}>
+        <TreeView
+          items={MUI_X_PRODUCTS}
+          areLogsEnabled
+          logMessage={(message) =>
+            setLogs((prev) =>
+              prev[prev.length - 1] === message ? prev : [...prev, message],
+            )
+          }
+        />
+      </Box>
       <Stack spacing={1}>
         {logs.map((log, index) => (
           <Typography key={index}>{log}</Typography>
diff --git a/docs/data/tree-view/rich-tree-view/headless/LogExpandedItems.tsx.preview b/docs/data/tree-view/rich-tree-view/headless/LogExpandedItems.tsx.preview
index a70558fcbb12..32cf7d009edc 100644
--- a/docs/data/tree-view/rich-tree-view/headless/LogExpandedItems.tsx.preview
+++ b/docs/data/tree-view/rich-tree-view/headless/LogExpandedItems.tsx.preview
@@ -1,14 +1,14 @@
-<TreeView
-  aria-label="file system navigator"
-  sx={{ height: 240, flexGrow: 1, maxWidth: 400, overflowY: 'auto' }}
-  items={ITEMS}
-  areLogsEnabled
-  logMessage={(message) =>
-    setLogs((prev) =>
-      prev[prev.length - 1] === message ? prev : [...prev, message],
-    )
-  }
-/>
+<Box sx={{ minHeight: 352, minWidth: 250 }}>
+  <TreeView
+    items={MUI_X_PRODUCTS}
+    areLogsEnabled
+    logMessage={(message) =>
+      setLogs((prev) =>
+        prev[prev.length - 1] === message ? prev : [...prev, message],
+      )
+    }
+  />
+</Box>
 <Stack spacing={1}>
   {logs.map((log, index) => (
     <Typography key={index}>{log}</Typography>
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 84b3d54baacc..088f827593f0 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 b21fbbc7f888..94679340fad7 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 640e65a388c3..8e43259ee708 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 1758169287e6..7bb6d22d66dd 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 12357940fd8b..e18e3bfcc070 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 01d3c61bd5f5..250b4943b825 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 47525b38aedd..967e820febde 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 07994b675ecb..07a64c0e72ad 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 5d5b0a2a9c62..bdff28a6ddfb 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 72a50eaeb7e6..10dc7537fa37 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 deca6e972944..862f837b48b6 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 830a78258204..a6248d09346f 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 0d6815d0d677..c122ca577359 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 053934eabefa..9370571c23e3 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 32ecf3762ded..f5cbb0dc177d 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 0c064df15746..3f63814f8ee7 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 12b1b503c2b2..2099278403a9 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 16eac642a240..2e329937cc92 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 537b04fc53cb..30af214c7fbd 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 3f2967a50d4a..a0333944ed2b 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 e1b7677fd754..f05fb2f2435d 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 45f155a4b3e4..540c2d0911e2 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 7937123a72e3..17d4a19d088b 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 ea21e6cb404b..aa65993ee26a 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 deea7256e615..8b6627572ca8 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 056b2d2cb4bd..8f9dd61e4df9 100644
--- a/docs/data/tree-view/rich-tree-view/selection/ParentChildrenSelectionRelationship.js
+++ b/docs/data/tree-view/rich-tree-view/selection/ParentChildrenSelectionRelationship.js
@@ -1,7 +1,6 @@
 import * as React from 'react';
 import Box from '@mui/material/Box';
 import { RichTreeView } from '@mui/x-tree-view/RichTreeView';
-
 import { useTreeViewApiRef } from '@mui/x-tree-view/hooks';
 
 const MUI_X_PRODUCTS = [
@@ -84,7 +83,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 c7ed6099696e..e45bdbb4fb3c 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 60caf9c53586..adde68fa5153 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 fbd000d8af63..dca2893bc162 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 4c3bb49281bb..9d310064592c 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 d769a7a99d76..50893614cde5 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 8e3053bf4f65..c45b26bfb96d 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 d58f37d61b5d..2fb893baee65 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 8db5e31fc09d..f507b6768cca 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 786650ea38e0..5a2428ac5a08 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 3bfdaf46af80..99b4b6c4f0b6 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 f8746f6dd376..202b636b1fd5 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 f2426eb5cbf0..3b2fc9d59aa6 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 1f9aa0a895b6..8a8b2d213719 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 c16dc8ac924a..671659396440 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 c4d333d40f08..e810c4bf4ce2 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 8d935ef57ba7..66f9d114b23b 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/IconExpansionTreeView.js b/docs/data/tree-view/simple-tree-view/customization/IconExpansionTreeView.js
index 2aac5812e5d8..36e9e200da11 100644
--- a/docs/data/tree-view/simple-tree-view/customization/IconExpansionTreeView.js
+++ b/docs/data/tree-view/simple-tree-view/customization/IconExpansionTreeView.js
@@ -34,16 +34,22 @@ const CustomTreeItem = React.forwardRef(function MyTreeItem(props, ref) {
 
 export default function IconExpansionTreeView() {
   return (
-    <Box sx={{ minHeight: 180, flexGrow: 1, maxWidth: 300 }}>
+    <Box sx={{ minHeight: 352, minWidth: 250 }}>
       <SimpleTreeView aria-label="icon expansion">
-        <CustomTreeItem itemId="1" label="Applications">
-          <CustomTreeItem itemId="2" label="Calendar" />
+        <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="5" label="Documents">
-          <CustomTreeItem itemId="10" label="OSS" />
-          <CustomTreeItem itemId="6" label="MUI">
-            <CustomTreeItem itemId="8" label="index.js" />
-          </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/IconExpansionTreeView.tsx b/docs/data/tree-view/simple-tree-view/customization/IconExpansionTreeView.tsx
index 816ee7f375df..f0a5de292e60 100644
--- a/docs/data/tree-view/simple-tree-view/customization/IconExpansionTreeView.tsx
+++ b/docs/data/tree-view/simple-tree-view/customization/IconExpansionTreeView.tsx
@@ -37,16 +37,22 @@ const CustomTreeItem = React.forwardRef(function MyTreeItem(
 
 export default function IconExpansionTreeView() {
   return (
-    <Box sx={{ minHeight: 180, flexGrow: 1, maxWidth: 300 }}>
+    <Box sx={{ minHeight: 352, minWidth: 250 }}>
       <SimpleTreeView aria-label="icon expansion">
-        <CustomTreeItem itemId="1" label="Applications">
-          <CustomTreeItem itemId="2" label="Calendar" />
+        <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="5" label="Documents">
-          <CustomTreeItem itemId="10" label="OSS" />
-          <CustomTreeItem itemId="6" label="MUI">
-            <CustomTreeItem itemId="8" label="index.js" />
-          </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/IconExpansionTreeView.tsx.preview b/docs/data/tree-view/simple-tree-view/customization/IconExpansionTreeView.tsx.preview
deleted file mode 100644
index c72caa3b106d..000000000000
--- a/docs/data/tree-view/simple-tree-view/customization/IconExpansionTreeView.tsx.preview
+++ /dev/null
@@ -1,11 +0,0 @@
-<SimpleTreeView aria-label="icon expansion">
-  <CustomTreeItem itemId="1" label="Applications">
-    <CustomTreeItem itemId="2" label="Calendar" />
-  </CustomTreeItem>
-  <CustomTreeItem itemId="5" label="Documents">
-    <CustomTreeItem itemId="10" label="OSS" />
-    <CustomTreeItem itemId="6" label="MUI">
-      <CustomTreeItem itemId="8" label="index.js" />
-    </CustomTreeItem>
-  </CustomTreeItem>
-</SimpleTreeView>
\ No newline at end of file
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 59c40e034d24..4908de784996 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 3476b3b8e13c..99bb07a10be0 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 1aaad97525e6..000000000000
--- 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 cec9de6b0aeb..e5ff0f51a96d 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 59882c3023c1..36bf15aae886 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 4e74f185137d..e5e70b9e4aa8 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 4015d5b926f4..4d62aacd5525 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 ea0bfb3d3cab..01393a180d9d 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 a11d874a4659..60988ccb5108 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 ec0f524d81cf..7846e0452a27 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 e46f59e50ff6..6164a3bc5749 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 549b9e66e477..a8945812b2d9 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 97950e48843a..52053493b5ae 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 919cd401fb6f..1f881952954a 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 5757cfb2964e..a1d3763587f3 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 5757cfb2964e..a1d3763587f3 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 3641f9443f57..000000000000
--- 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 773e68d490d0..f3712332000a 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 2cab7252b0a9..010c5ff42162 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 14a73027e0ad..4ae365f859a9 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 14a73027e0ad..4ae365f859a9 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 9105dc5588cc..a35ce2f3119c 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 4c5cc2874d52..1fa61790720c 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 4c5cc2874d52..1fa61790720c 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 1b1d057131b7..9f4c9b6a77b7 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 1b1d057131b7..9f4c9b6a77b7 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 12f8708449c3..2ede54e6e32c 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 b638e19eecee..21465a8b44ab 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 9db0d16ef7e6..ffc7d808332f 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 9db0d16ef7e6..ffc7d808332f 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 eba9bb8cd17f..affd5bdee3e8 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 eba9bb8cd17f..affd5bdee3e8 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 60caf9c53586..ab9bd504a607 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 fbd000d8af63..ab9bd504a607 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 19ab6390267f..000000000000
--- 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 55c76b326e22..a42fbf9f74a7 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 ccc5bde9bfed..665c44a496fc 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" />
diff --git a/docs/data/tree-view/tree-item-customization/IndentationAtItemLevel.js b/docs/data/tree-view/tree-item-customization/IndentationAtItemLevel.js
index 5a8f88b88527..674e7b6a5637 100644
--- a/docs/data/tree-view/tree-item-customization/IndentationAtItemLevel.js
+++ b/docs/data/tree-view/tree-item-customization/IndentationAtItemLevel.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 IndentationAtItemLevel() {
   return (
-    <Box sx={{ height: 220, flexGrow: 1, maxWidth: 400 }}>
+    <Box sx={{ minHeight: 352, minWidth: 250 }}>
       <RichTreeView
         items={MUI_X_PRODUCTS}
         experimentalFeatures={{ indentationAtItemLevel: true }}
diff --git a/docs/data/tree-view/tree-item-customization/IndentationAtItemLevel.tsx b/docs/data/tree-view/tree-item-customization/IndentationAtItemLevel.tsx
index 5e9dfc8e5f1b..0b4c629dd37f 100644
--- a/docs/data/tree-view/tree-item-customization/IndentationAtItemLevel.tsx
+++ b/docs/data/tree-view/tree-item-customization/IndentationAtItemLevel.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 IndentationAtItemLevel() {
   return (
-    <Box sx={{ height: 220, flexGrow: 1, maxWidth: 400 }}>
+    <Box sx={{ minHeight: 352, minWidth: 250 }}>
       <RichTreeView
         items={MUI_X_PRODUCTS}
         experimentalFeatures={{ indentationAtItemLevel: true }}
diff --git a/docs/data/tree-view/tree-item-customization/ItemChildrenIndentationProp.js b/docs/data/tree-view/tree-item-customization/ItemChildrenIndentationProp.js
index 64309aa42b3d..05f7fb429469 100644
--- a/docs/data/tree-view/tree-item-customization/ItemChildrenIndentationProp.js
+++ b/docs/data/tree-view/tree-item-customization/ItemChildrenIndentationProp.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 ItemChildrenIndentationProp() {
   return (
-    <Box sx={{ height: 220, flexGrow: 1, maxWidth: 400 }}>
+    <Box sx={{ minHeight: 352, minWidth: 250 }}>
       <RichTreeView
         items={MUI_X_PRODUCTS}
         itemChildrenIndentation={24}
diff --git a/docs/data/tree-view/tree-item-customization/ItemChildrenIndentationProp.tsx b/docs/data/tree-view/tree-item-customization/ItemChildrenIndentationProp.tsx
index 840be0a94d14..fc379bc83c4a 100644
--- a/docs/data/tree-view/tree-item-customization/ItemChildrenIndentationProp.tsx
+++ b/docs/data/tree-view/tree-item-customization/ItemChildrenIndentationProp.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 ItemChildrenIndentationProp() {
   return (
-    <Box sx={{ height: 220, flexGrow: 1, maxWidth: 400 }}>
+    <Box sx={{ minHeight: 352, minWidth: 250 }}>
       <RichTreeView
         items={MUI_X_PRODUCTS}
         itemChildrenIndentation={24}