Tree view components

Powerful and customizable React tree view components built for modern applications. These tree views are built using React Aria and styled with Tailwind CSS.

Tree view example

Get the code
Organization
Engineering
Design
Sienna Hewitt
Ammar Foley
Caitlyn King
Product
Marketing
Sales
Customer Success
Operations
Finance
Projects
Powersurge
Client brief
Brief_v1
Brief_v2
Deliverables
assets.zip
Ikigai Labs
Lightspeed
Voxel Labs
Engineering
Marketing
Customer data
Settings

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:

Simple sm

Get the code
Organization
Engineering
Design
Sienna Hewitt
Ammar Foley
Caitlyn King
Product
Marketing
Sales
Customer Success
Operations
Finance
Projects
Powersurge
Client brief
Brief_v1
Brief_v2
Deliverables
assets.zip
Ikigai Labs
Lightspeed
Voxel Labs
Engineering
Marketing
Customer data
Settings

Simple md

Get the code
Organization
Engineering
Design
Sienna Hewitt
Ammar Foley
Caitlyn King
Product
Marketing
Sales
Customer Success
Operations
Finance
Projects
Powersurge
Client brief
Brief_v1
Brief_v2
Deliverables
assets.zip
Ikigai Labs
Lightspeed
Voxel Labs
Engineering
Marketing
Customer data
Settings

Advanced

The advanced tree view supports multi-selection, drag-and-drop reordering, connector lines, and custom icons per item.

Advanced sm

Get the code
Organization
Engineering
Design
Sienna Hewitt
Ammar Foley
Caitlyn King
Product
Marketing
Sales
Customer Success
Operations
Finance
Projects
Powersurge
Client brief
Brief_v1
Brief_v2
Deliverables
assets.zip
Ikigai Labs
Lightspeed
Voxel Labs
Engineering
Marketing
Customer data
Settings

Advanced md

Get the code
Organization
Engineering
Design
Sienna Hewitt
Ammar Foley
Caitlyn King
Product
Marketing
Sales
Customer Success
Operations
Finance
Projects
Powersurge
Client brief
Brief_v1
Brief_v2
Deliverables
assets.zip
Ikigai Labs
Lightspeed
Voxel Labs
Engineering
Marketing
Customer data
Settings

API reference

Import the parts and assemble them:

import { TreeView } from "@/components/application/tree-view/tree-view";
 
<TreeView>
    <TreeView.Item>
        <TreeView.ItemContent />
 
        <TreeView.Item>
            <TreeView.ItemContent />
        </TreeView.Item>
    </TreeView.Item>
</TreeView>

TreeView

Renders React Aria’s Tree — all of its props are supported.

TreeView props
PropTypeDefaultDescription
size
"sm""md"
"sm"Size variant. Controls item padding and icon sizes.
showConnectorsbooleanfalseShow vertical connector lines between parent and child items.
draggablebooleanfalseEnable built-in drag and drop. Pass dragAndDropHooks directly for full control instead.
onReorder((e: { keys: Set<Key>; target: { key: Key; dropPosition: "before" | "after" | "on"; }; }) => void)—Called when items are reordered via drag and drop.
onMove((e: { keys: Set<Key>; target: { key: Key; dropPosition: "before" | "after" | "on"; }; }) => void)—Called when items are moved (reparented) onto a different parent.
Props from React Aria (30)
TreeView inherited props
PropTypeDefaultDescription
autoFocus
falsetrue"first""last"
—Whether to auto focus the gridlist or an option.
childrenReactNode | ((item: T) => ReactNode)—The contents of the collection.
defaultExpandedKeysIterable<Key>—The initial expanded keys in the collection (uncontrolled).
defaultSelectedKeys"all" | Iterable<Key>—The initial selected keys in the collection (uncontrolled).
dependenciesreadonly any[]—Values that should invalidate the item cache when using dynamic collections.
disabledBehavior
"selection""all"
"all"Whether disabledKeys applies to all interactions, or only selection.
disabledKeysIterable<Key>—The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with.
disallowEmptySelectionboolean—Whether the collection allows empty selection.
dragAndDropHooksDragAndDropHooks<NoInfer<T>>—The drag and drop hooks returned by useDragAndDrop used to enable drag and drop behavior for the Tree.
escapeKeyBehavior
"clearSelection""none"
"clearSelection"Whether pressing the escape key should clear selection in the grid list or not.Most experiences should not modify this option as it eliminates a keyboard user's ability to easily clear selection. Only use if the escape key is being handled externally or should not trigger selection clearing contextually.
expandedKeysIterable<Key>—The currently expanded keys in the collection (controlled).
idstring—The element's unique identifier.
itemsIterable<T>—Item objects in the collection.
keyboardNavigationBehavior
"arrow""tab"
"arrow"Whether keyboard navigation to focusable elements within grid list items is via the left/right arrow keys or the tab key.
onAction((key: Key) => void)—Handler that is called when a user performs an action on an item. The exact user event depends on the collection's selectionBehavior prop and the interaction modality.
onExpandedChange((keys: Set<Key>) => any)—Handler that is called when items are expanded or collapsed.
onSelectionChange((keys: Selection) => void)—Handler that is called when the selection changes.
renderEmptyState((props: TreeEmptyStateRenderProps) => ReactNode)—Provides content to display when there are no items in the list.
selectedKeys"all" | Iterable<Key>—The currently selected keys in the collection (controlled).
selectionBehavior
"toggle""replace"
"toggle"How multiple selection should behave in the tree.
selectionMode
"none""single""multiple"
—The type of selection that is allowed in the collection.
shouldSelectOnPressUpboolean—Whether selection should occur on press up instead of press down.
styleStyleOrFunction<TreeRenderProps>—The inline style for the element. A function may be provided to compute the style based on component state.
slotstring | null—A slot name for the component. Slots allow the component to receive props from a parent component. An explicit null value indicates that the local props completely override all props received from a parent.
classNameClassNameOrFunction<TreeRenderProps>—The CSS className for the element. A function may be provided to compute the class based on component state.
renderDOMRenderFunction<"div", TreeRenderProps>—Overrides the default DOM element with a custom render function. This allows rendering existing components with built-in styles and behaviors such as router links, animation libraries, and pre-styled components.Requirements:
  • You must render the expected element type (e.g. if <button> is expected, you cannot render an <a>).
  • Only a single root DOM element can be rendered (no fragments).
  • You must pass through props and ref to the underlying DOM element, merging with your own prop as appropriate.
aria-describedbystring—Identifies the element (or elements) that describes the object.
aria-detailsstring—Identifies the element (or elements) that provide a detailed, extended description for the object.
aria-labelstring—Defines a string value that labels the current element.
aria-labelledbystring—Identifies the element (or elements) that labels the current element.

Also accepts the global HTML attributes (dir, lang, hidden, inert, translate), all standard React DOM event handlers.

TreeView.DropIndicator

Drop indicator line shown between items during drag and drop.

Renders React Aria’s DropIndicator — all of its props are supported.

TreeView.DropIndicator props
PropTypeDefaultDescription
target* (required)DropTarget—The drop position this indicator represents. Supplied by the tree's renderDropIndicator while a drag is in progress.

TreeView.Item

Renders React Aria’s TreeItem — all of its props are supported.

TreeView.Item props
PropTypeDefaultDescription
onClick((e: MouseEvent<FocusableElement>) => void)—Not recommended – use onPress instead. onClick is an alias for onPress provided for compatibility with other libraries. onPress provides additional event details for non-mouse interactions.
onPress((e: PressEvent) => void)—Handler that is called when the press is released over the target.
onPressChange((isPressed: boolean) => void)—Handler that is called when the press state changes.
onPressEnd((e: PressEvent) => void)—Handler that is called when a press interaction ends, either over the target or when the pointer leaves the target.
onPressStart((e: PressEvent) => void)—Handler that is called when a press interaction starts.
onPressUp((e: PressEvent) => void)—Handler that is called when a press is released over the target, regardless of whether it started on the target or not.
onHoverChange((isHovering: boolean) => void)—Handler that is called when the hover state changes.
onHoverEnd((e: HoverEvent) => void)—Handler that is called when a hover interaction ends.
onHoverStart((e: HoverEvent) => void)—Handler that is called when a hover interaction starts.
downloadstring | boolean—Causes the browser to download the linked URL. A string may be provided to suggest a file name.
hrefstring—A URL to link to.
hrefLangstring—Hints at the human language of the linked URL.
pingstring—A space-separated list of URLs to ping when the link is followed.
referrerPolicy
"""no-referrer""no-referrer-when-downgrade""origin""origin-when-cross-origin""same-origin""strict-origin""strict-origin-when-cross-origin""unsafe-url"
—How much of the referrer to send when following the link.
relstring—The relationship between the linked resource and the current page.
routerOptionsRouterOptions—Options for the configured client side router.
targetHTMLAttributeAnchorTarget—The target window for the link.
allowsArrowNavigationboolean—Whether the row should support arrow key navigation even when the containing collection uses tab keyboard navigation. Allows users to navigate between rows with arrow keys while focus is on an interactive child element within the row.
children* (required)ReactNode—The content of the tree item along with any nested children. Supports static nested tree items or use of a Collection to dynamically render nested tree items.
focusMode
"child""row"
"row"Whether the row or its first focusable child element should be focused when the row is focused.
hasChildItemsboolean—Whether this item has children, even if not loaded yet.
idKey—The unique id of the tree row.
isDisabledboolean—Whether the item is disabled.
onAction(() => void)—Handler that is called when a user performs an action on this tree item. The exact user event depends on the collection's selectionBehavior prop and the interaction modality.
textValue* (required)string—A string representation of the tree item's contents, used for features like typeahead.
valueobject—The object value that this tree item represents. When using dynamic collections, this is set automatically.
Styling (3)
TreeView.Item styling props
PropTypeDefaultDescription
styleStyleOrFunction<TreeItemRenderProps>—The inline style for the element. A function may be provided to compute the style based on component state.
classNameClassNameOrFunction<TreeItemRenderProps>—The CSS className for the element. A function may be provided to compute the class based on component state.
renderDOMRenderFunction<"div", TreeItemRenderProps>—Overrides the default DOM element with a custom render function. This allows rendering existing components with built-in styles and behaviors such as router links, animation libraries, and pre-styled components.Requirements:
  • You must render the expected element type (e.g. if <button> is expected, you cannot render an <a>).
  • Only a single root DOM element can be rendered (no fragments).
  • You must pass through props and ref to the underlying DOM element, merging with your own prop as appropriate.
Accessibility (1)
TreeView.Item accessibility props
PropTypeDefaultDescription
aria-labelstring—An accessibility label for this tree item.

Also accepts the global HTML attributes (dir, lang, hidden, inert, translate), all standard React DOM event handlers.

TreeView.ItemContent

Renders React Aria’s TreeItemContent — all of its props are supported.

TreeView.ItemContent props
PropTypeDefaultDescription
children* (required)ReactNode—The text label for the tree item.
iconReactNode | FC<{ className?: string; }>—Leading icon. Pass as component reference (e.g. Folder) or as element (e.g. <Avatar />).
actionReactNode—Trailing action element (e.g. drag handle or menu trigger).
classNamestring—Additional class name for the item row.

FAQs

Please refer to our frequently asked questions page for more.

A tree view consists of TreeView (the root), TreeView.Item (a node, which nests child TreeView.Item elements for its children), TreeView.ItemContent (the visible row, with an optional leading icon and a trailing action slot), and TreeView.DropIndicator (the line marking the drop position during a drag), which TreeView renders for you automatically when draggable is set.

TreeView passes its props to React Aria's Tree, so use defaultExpandedKeys to open nodes on first render, as the examples on this page do, or expandedKeys with onExpandedChange to control expansion yourself. The keys are the id values of your TreeView.Item elements.

Pass selectionMode="multiple" to the TreeView component, which adds a checkbox to every row. Selected keys can be controlled with selectedKeys and onSelectionChange, or uncontrolled with defaultSelectedKeys. Selection cascades, which React Aria does not do on its own: selecting a parent selects all of its descendants, deselecting a parent deselects them, and a parent with only some of its descendants selected renders an indeterminate checkbox. Because of that, onSelectionChange is called with the full cascaded set of keys rather than just the row the user clicked.

Pass draggable to TreeView and handle the drop yourself. onReorder fires for drops with a dropPosition of "before" or "after", and onMove fires for drops "on" another item. The Advanced examples keep the data in React Aria's useTreeData and call tree.moveBefore, tree.moveAfter and tree.move from those callbacks. The drag handle only appears on selected rows. To take over drag and drop completely, pass your own dragAndDropHooks.

Add the showConnectors prop to TreeView. It defaults to false, and when it is on, each row draws vertical lines for its ancestor levels so the hierarchy is easier to follow, as in the Advanced examples.

The tree view supports "sm" and "md" via the size prop on TreeView, with "sm" as the default. "md" adds vertical padding to each row and uses size-5 icons instead of size-4.

TabsApplication UI examples