Tree
A hierarchical UI component that organizes nested items, commonly used for file structures, menus, or category navigation, such as organizational charts.
Basic
A tree is a hierarchical list of items, allowing users to navigate through nested structures effortlessly.
Installation
Install the component via the CLI in one command.
npx shadcn@latest add @intentui/tree
Composed components
When you install this component via the CLI, it automatically loads all composed components, so you don’t need to add them individually.
This component comes packed with several components to enhance functionality and provide a seamless experience.
Manual installation
Use this approach if you prefer to install and wire up the component yourself instead of using the CLI.
npm install react-aria-components @heroicons/react
Anatomy
import { Tree, TreeContent, TreeItem } from "@/components/ui/tree"<Tree aria-label="Tree anatomy example">
<TreeItem id="a" textValue="Departments">
<TreeContent />
<TreeItem id="b" textValue="Sales">
<TreeContent>Sales</TreeContent>
<TreeItem id="c" textValue="Reports">
<TreeContent>Reports</TreeContent>
<TreeItem id="d1" textValue="Q1.pdf">
<TreeContent>Q1.pdf</TreeContent>
</TreeItem>
<TreeItem id="d2" textValue="Q2.pdf">
<TreeContent>Q2.pdf</TreeContent>
</TreeItem>
<TreeItem id="q3" textValue="Q3.pdf">
<TreeContent>Q3.pdf</TreeContent>
</TreeItem>
</TreeItem>
<TreeItem id="contacts" textValue="Client Contacts">
<TreeContent>Client Contacts</TreeContent>
<TreeItem id="europe" textValue="Europe.xlsx">
<TreeContent>Europe.xlsx</TreeContent>
</TreeItem>
<TreeItem id="asia" textValue="Asia.xlsx">
<TreeContent>Asia.xlsx</TreeContent>
</TreeItem>
</TreeItem>
</TreeItem>
</TreeItem>
<TreeItem id="projects" textValue="Projects">
<TreeContent>Projects</TreeContent>
<TreeItem id="revamp" textValue="Website revamp">
<TreeContent>Website revamp</TreeContent>
<TreeItem id="wireframes" textValue="Wireframes">
<TreeContent>Wireframes</TreeContent>
<TreeItem id="home" textValue="Home.fig">
<TreeContent>Home.fig</TreeContent>
</TreeItem>
<TreeItem id="pricing" textValue="Pricing.fig">
<TreeContent>Pricing.fig</TreeContent>
</TreeItem>
</TreeItem>
</TreeItem>
<TreeItem id="mobileapp" textValue="Mobile app">
<TreeContent>Mobile app</TreeContent>
</TreeItem>
</TreeItem>
</Tree>Multiple selection
To enable multiple selections, set the selectionMode prop to multiple. This prop has no default value, so it must be explicitly defined.
Like a folder tree
A tree can be used to represent a folder structure, allowing users to expand and collapse folders to view their contents.
Infinite scrolling
The tree can handle large datasets efficiently with infinite scrolling. This allows for loading more data as the user navigates through the tree, improving performance and user experience.
Drag and drop
The tree supports drag and drop functionalities if you use the dragAndDropHooks prop along with the useDragAndDrop hook. You can drop data on the entire tree, individual items, add new items between existing ones, or rearrange items.
Intent UI Design
Build modern web apps faster with 1000+ resources across components, blocks, patterns, templates, and starter kits.