first incomplete pass

docs/data/tree-view/getting-started/getting-started.md

@@ -7,20 +7,20 @@ githubLabel: 'component: tree view'
 waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/treeview/
 ---
 
-# Tree View - Getting Started
+# Tree View - Getting started
 
 <p class="description">Get started with the Tree View. Install the package, configure your application and start using the components.</p>
 
 ## Installation
 
-Using your favorite package manager, install `@mui/x-tree-view-pro` for the commercial version, or `@mui/x-tree-view` for the free community version.
+Run one of the following commands to install the free Community version or the paid Pro version of the MUI X Tree View:
 
 <!-- #default-branch-switch -->
 
 {{"component": "modules/components/TreeViewInstallationInstructions.js"}}
 
-The Tree View package has a peer dependency on `@mui/material`.
-If you are not already using it in your project, you can install it with:
+The Tree View packages have a peer dependency on `@mui/material`.
+If you're not already using it, install it with the following command:
 
 <codeblock storageKey="package-manager">
 
@@ -40,7 +40,7 @@ yarn add @mui/material @emotion/react @emotion/styled
 
 <!-- #react-peer-version -->
 
-Please note that [react](https://www.npmjs.com/package/react) and [react-dom](https://www.npmjs.com/package/react-dom) are peer dependencies too:
+[`react`](https://www.npmjs.com/package/react) and [`react-dom`](https://www.npmjs.com/package/react-dom) are also peer dependencies:
 
 ```json
 "peerDependencies": {
@@ -49,32 +49,32 @@ Please note that [react](https://www.npmjs.com/package/react) and [react-dom](ht
 },
 ```
 
-### Style engine
+## Render a Tree View
 
-Material UI is using [Emotion](https://emotion.sh/docs/introduction) as a styling engine by default. If you want to use [`styled-components`](https://styled-components.com/) instead, run:
+:::info
+Currently, the Simple and Rich Tree View components share many of the same features.
+As this package continues to mature, more advanced features and functionality are more likely to land on the Rich Tree View.
+:::
 
-<codeblock storageKey="package-manager">
-```bash npm
-npm install @mui/styled-engine-sc styled-components
-```
+### Simple Tree View
 
-```bash pnpm
-pnpm add @mui/styled-engine-sc styled-components
-```
 
-```bash yarn
-yarn add @mui/styled-engine-sc styled-components
-```
 
-</codeblock>
+The simple version of the Tree View component receives its items as JSX children.
+This is the recommended version for hardcoded items.
 
-Take a look at the [Styled engine guide](/material-ui/integrations/styled-components/) for more information about how to configure `styled-components` as the style engine.
+{{"demo": "BasicSimpleTreeView.js"}}
 
-## Render your first component
+### Rich Tree View
+
+```jsx
+import { RichTreeView } from '@mui/x-tree-view/RichTreeView';
+```
 
-To make sure that everything is set up correctly, try rendering a Simple Tree View component:
+The rich version of the Tree View component receives its items dynamically from an external data source.
+This is the recommended version for larger trees, as well as those that require more advanced features like editing and virtualization.
 
-{{"demo": "FirstComponent.js"}}
+{{"demo": "BasicRichTreeView.js"}}
 
 ## Accessibility
 
@@ -88,11 +88,14 @@ otherwise, screen readers will announce it as "tree", making it hard to understa
 
 ## TypeScript
 
-In order to benefit from the [CSS overrides](/material-ui/customization/theme-components/#theme-style-overrides) and [default prop customization](/material-ui/customization/theme-components/#theme-default-props) with the theme, TypeScript users need to import the following types.
-Internally, it uses module augmentation to extend the default theme structure.
+To benefit from the [CSS overrides](/material-ui/customization/theme-components/#theme-style-overrides) and [default prop customization](/material-ui/customization/theme-components/#theme-default-props) with the theme, TypeScript users must import the following types.
+These types use module augmentation to extend the default theme structure.
 
 ```tsx
+// only one import is necessary,
+// from the version you're currently using.
 import type {} from '@mui/x-tree-view/themeAugmentation';
+import type {} from '@mui/x-tree-view-pro/themeAugmentation';
 
 const theme = createTheme({
   components: {

docs/data/tree-view/getting-started/FirstComponent.js → docs/data/tree-view/overview/TreeViewOverviewDemo.js

@@ -3,7 +3,7 @@ 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() {
+export default function TreeViewOverview() {
   return (
     <Box sx={{ minHeight: 352, minWidth: 250 }}>
       <SimpleTreeView>

docs/data/tree-view/getting-started/FirstComponent.tsx → docs/data/tree-view/overview/TreeViewOverviewDemo.tsx

@@ -3,7 +3,7 @@ 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() {
+export default function TreeViewOverview() {
   return (
     <Box sx={{ minHeight: 352, minWidth: 250 }}>
       <SimpleTreeView>
@@ -18,9 +18,11 @@ export default function FirstComponent() {
         </TreeItem>
         <TreeItem itemId="charts" label="Charts">
           <TreeItem itemId="charts-community" label="@mui/x-charts" />
+          <TreeItem itemId="charts-pro" label="@mui/x-charts-pro" />
         </TreeItem>
         <TreeItem itemId="tree-view" label="Tree View">
           <TreeItem itemId="tree-view-community" label="@mui/x-tree-view" />
+          <TreeItem itemId="tree-view-pro" label="@mui/x-tree-view-pro" />
         </TreeItem>
       </SimpleTreeView>
     </Box>

docs/data/tree-view/overview/overview.md

@@ -8,36 +8,27 @@ packageName: '@mui/x-tree-view'
 
 # MUI X Tree View
 
-<p class="description">The Tree View component lets users navigate hierarchical lists of data with nested levels that can be expanded and collapsed.</p>
+<p class="description">The Tree View lets users navigate hierarchical lists of data with nested levels that can be expanded and collapsed.</p>
 
 {{"component": "@mui/docs/ComponentLinkHeader"}}
 
-## Available components
+## Overview
 
-The MUI X Tree View package exposes two different versions of the component:
-
-### Simple Tree View
+The MUI X Tree View provides all of the functionality necessary to build a hierarchical list of expandable and collapsible items.
+The package exposes two different versions of this component: `<SimpleTreeView />` and `<RichTreeView />`.
 
 ```jsx
 import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView';
+import { RichTreeView } from '@mui/x-tree-view/RichTreeView';
 ```
 
-The simple version of the Tree View component receives its items as JSX children.
-This is the recommended version for hardcoded items.
-
-{{"demo": "BasicSimpleTreeView.js"}}
-
-### Rich Tree View
+The Simple version is recommended for hardcoded items, while the Rich version is preferred for dynamically rendered items, larger trees, and more advanced features like editing and virtualization.
 
-```jsx
-import { RichTreeView } from '@mui/x-tree-view/RichTreeView';
-```
+The demo below shows how to render a Simple Tree View—try clicking on an item to see how it expands and collapses:
 
-The rich version of the Tree View component receives its items dynamically from an external data source.
-This is the recommended version for larger trees, as well as those that require more advanced features like editing and virtualization.
+{{"demo": "TreeViewOverviewDemo.js", "defaultCodeOpen": true}}
 
-{{"demo": "BasicRichTreeView.js"}}
+## Using this documentation
 
-:::info
-At the moment, the Simple and Rich Tree Views are similar in terms of feature support. But as the component grows, you can expect to see the more advanced ones appear primarily on the Rich Tree View.
-:::
+Although the Simple and Rich Tree View share many of the same features, each version's implementation of those features differs enough that they warrant their own separate docs in most cases.
+Other features, such as accessibility, work the same in both versions and are documented in the Common features section of the navigation bar.