Skip to content
Back to blog

The Tree View is moving to MUI X

Flavien Delangle

@flaviendelangle
+

After more than 4 years in the lab, the Tree View components have found a new home as part of MUI X. This means we'll be dedicating even more time and effort to these complex components, to better meet the needs of both you and your users.

TL;DR

  • The Tree View is one step closer to a stable release.
  • No surprise licenses changes. We are staying true to our promises. What's MIT stays MIT. Therefore, all the existing features and future features of the Tree View will remain MIT and free to use.
  • Follow the migration steps.

What is the Tree View?

The Tree View is a component to represent hierarchical data presented as nodes in a tree-like format.

The component allows to select one or multiple nodes.

What is MUI X?

MUI X is a collection of advanced components built for complex use cases.

As opposed to the MUI Core library, which leans on the open-source community for support, MUI X components require several full-time developers dedicated to engineering and ongoing maintenance.

MUI X components are available under three licenses:

  • MIT license, which is free to use and includes all the current (and more to come) Tree View features.
  • MUI X Pro, a commercial license that offers features for handling large datasets and will include the most advanced features for Tree View, like virtualization.
  • MUI X Premium, which is also commercial and includes, in addition to the Pro features, tooling for data analysis.

Why did the Tree View move to MUI X?

Once a component is ready to leave the lab, it can either go to MUI X or MUI Core libraries.

Given the complex nature of the Tree View, it was a clear choice to group it with the other advanced components in MUI X.

Moreover, new advanced features such as virtualization and drag and drop are already on the roadmap.

The Tree View components are now available in the @mui/x-tree-view package which is MIT licensed and includes all the current (free forever) features.

How do I migrate?

Follow the migration steps by updating the package name and change from a default export to a named export:

-import TreeView from '@mui/lab/TreeView';
-import TreeItem from '@mui/lab/TreeItem';
+import { TreeView } from '@mui/x-tree-view/TreeView';
+import { TreeItem } from '@mui/x-tree-view/TreeItem';

or

-import { TreeView, TreeItem } from '@mui/lab';
+import { TreeView, TreeItem } from '@mui/x-tree-view';

We have prepared a codemod to help you migrate your codebase from @mui/lab to @mui/x-tree-view:

npx @mui/codemod@latest v5.0.0/tree-view-moved-to-x <path>

Where is the Tree View documentation?

You can find the documentation for the Tree View component in the MUI X docs.

What's next for the Tree View?

For now, @mui/x-tree-view is in alpha. Our next goal is to work on the stability and API consistency of its components to prepare a stable release in the next few months.

Please feel free to try out the component and provide any feedback you may have.

We also have a dedicated channel in our Discord Server for you to provide any feedback or concerns you have with Tree View.

Happy building!