Powerful and customizable React tree view components built for modern applications. These tree views are built using React Aria and styled with Tailwind CSS.
Installation
You can add this tree view component using our CLI or manually:
npx untitledui@latest add tree-view
Tree view examples
Below are examples and variations of this tree view component:
Advanced
The advanced tree view supports multi-selection, drag-and-drop reordering, connector lines, and custom icons per item.
FAQs
Please refer to our frequently asked questions page for more.
A tree view consists of TreeView (root container), TreeView.Item (a tree node that can contain children), and TreeView.ItemContent (the visible label and icon content of a node).
Pass selectionMode="multiple" to the TreeView component. Selected keys can be controlled with selectedKeys and onSelectionChange, or uncontrolled with defaultSelectedKeys.
Pass the draggable prop to TreeView and use the onReorder and onMove callbacks with React Aria's useTreeData hook to handle item repositioning.
The tree view supports sm and md sizes via the size prop. The sm size is more compact, while md provides more spacing for readability.