Skip to content

Tree View - Getting Started

Get started with the Tree View. Install the package, configure your application and start using the components.


Using your favorite package manager, install @mui/x-tree-view:

npm install @mui/x-tree-view

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:

npm install @mui/material @emotion/react @emotion/styled

Please note that react and react-dom are peer dependencies too:

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

Style engine

Material UI is using Emotion as a styling engine by default. If you want to use styled-components instead, run:

npm install @mui/styled-engine-sc styled-components

Take a look at the Styled engine guide for more information about how to configure styled-components as the style engine.

Render your first component

To make sure that everything is set up correctly, try rendering a simple TreeView component:

Press Enter to start editing