diff --git a/docs/src/pages/components/tree-view/RecursiveTreeView.js b/docs/src/pages/components/tree-view/RecursiveTreeView.js
new file mode 100644
index 00000000000000..537e43a47cbe56
--- /dev/null
+++ b/docs/src/pages/components/tree-view/RecursiveTreeView.js
@@ -0,0 +1,56 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import TreeView from '@material-ui/lab/TreeView';
+import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+import ChevronRightIcon from '@material-ui/icons/ChevronRight';
+import TreeItem from '@material-ui/lab/TreeItem';
+
+const data = {
+ id: 'root',
+ name: 'Parent',
+ children: [
+ {
+ id: '1',
+ name: 'Child - 1',
+ },
+ {
+ id: '3',
+ name: 'Child - 3',
+ children: [
+ {
+ id: '4',
+ name: 'Child - 4',
+ },
+ ],
+ },
+ ],
+};
+
+const useStyles = makeStyles({
+ root: {
+ height: 110,
+ flexGrow: 1,
+ maxWidth: 400,
+ },
+});
+
+export default function RecursiveTreeView() {
+ const classes = useStyles();
+
+ const renderTree = nodes => (
+
+ {Array.isArray(nodes.children) ? nodes.children.map(node => renderTree(node)) : null}
+
+ );
+
+ return (
+ }
+ defaultExpanded={['root']}
+ defaultExpandIcon={}
+ >
+ {renderTree(data)}
+
+ );
+}
diff --git a/docs/src/pages/components/tree-view/RecursiveTreeView.tsx b/docs/src/pages/components/tree-view/RecursiveTreeView.tsx
new file mode 100644
index 00000000000000..afcb4c6b291667
--- /dev/null
+++ b/docs/src/pages/components/tree-view/RecursiveTreeView.tsx
@@ -0,0 +1,62 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import TreeView from '@material-ui/lab/TreeView';
+import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+import ChevronRightIcon from '@material-ui/icons/ChevronRight';
+import TreeItem from '@material-ui/lab/TreeItem';
+
+interface RenderTree {
+ id: string;
+ name: string;
+ children?: RenderTree[];
+}
+
+const data: RenderTree = {
+ id: 'root',
+ name: 'Parent',
+ children: [
+ {
+ id: '1',
+ name: 'Child - 1',
+ },
+ {
+ id: '3',
+ name: 'Child - 3',
+ children: [
+ {
+ id: '4',
+ name: 'Child - 4',
+ },
+ ],
+ },
+ ],
+};
+
+const useStyles = makeStyles({
+ root: {
+ height: 110,
+ flexGrow: 1,
+ maxWidth: 400,
+ },
+});
+
+export default function RecursiveTreeView() {
+ const classes = useStyles();
+
+ const renderTree = (nodes: RenderTree) => (
+
+ {Array.isArray(nodes.children) ? nodes.children.map(node => renderTree(node)) : null}
+
+ );
+
+ return (
+ }
+ defaultExpanded={['root']}
+ defaultExpandIcon={}
+ >
+ {renderTree(data)}
+
+ );
+}
diff --git a/docs/src/pages/components/tree-view/tree-view.md b/docs/src/pages/components/tree-view/tree-view.md
index ff8a3bb367fddc..80f2c5113bb499 100644
--- a/docs/src/pages/components/tree-view/tree-view.md
+++ b/docs/src/pages/components/tree-view/tree-view.md
@@ -17,6 +17,28 @@ The tree view also offers a controlled API.
{{"demo": "pages/components/tree-view/ControlledTreeView.js"}}
+## Rich object
+
+While the `TreeView`/`TreeItem` component API maximizes flexibility, an extra step is needed to handle a rich object.
+
+Let's consider a data variable with the following shape, recursion can be used to handle it.
+
+```js
+const data = {
+ id: 'root',
+ name: 'Parent',
+ children: [
+ {
+ id: '1',
+ name: 'Child - 1',
+ },
+ // …
+ ],
+};
+```
+
+{{"demo": "pages/components/tree-view/RecursiveTreeView.js", "defaultCodeOpen": false}}
+
## Customized tree view
### Custom icons, border and animation