Tree View - Quickstart

Install the MUI X Tree View package and start building.

Installation

Install the Tree View package that best suits your needs—Community or Pro:

Peer dependencies

Material UI

The Tree View packages have a peer dependency on @mui/material. If you're not already using it, install it now:

React

react and react-dom are also peer dependencies:

"peerDependencies": {
  "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
  "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
},

Rendering a Tree View

The package exposes two different versions of this component: <SimpleTreeView /> and <RichTreeView />. The Simple version is recommended for hardcoded items, while the Rich version is preferred for dynamically rendered items, larger trees, and more complex use cases that require features like editing and virtualization.

Simple Tree View

import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView';

The simple version of the Tree View component receives its items as JSX children. This is the recommended version for hardcoded items.

Rich Tree View

import { RichTreeView } from '@mui/x-tree-view/RichTreeView';

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.

Accessibility

The MUI X Tree View follows the WAI-ARIA authoring practices for a tree view. The component includes many built-in accessibility features, but it's the developer's responsibilty to provide the component with a descriptive aria-labelledbyor aria-label tag—otherwise, screen readers will announce it as "tree," making it difficult for the end user to understand the purpose of the tree items.

TypeScript

Theme augmentation

To benefit from CSS overrides and default prop customization with the theme, TypeScript users must import the following types. These types use module augmentation to extend the default theme structure.

// Pro users: add `-pro` suffix to package name
import type {} from '@mui/x-tree-view/themeAugmentation';

const theme = createTheme({
  components: {
    MuiRichTreeView: {
      styleOverrides: {
        root: {
          backgroundColor: 'red',
        },
      },
    },
  },
});

Using this documentation

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 main features section of the navigation bar.

API

See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.

• <RichTreeView />
• <SimpleTreeView />
• <TreeItem />
• <TreeView />