Tree View

Keyboard-navigable hierarchical view with selection, expansion, typeahead, and controlled state.

Preview

This is a live example. Interact with the available controls and use the keyboard to inspect the component's states and behavior.

Loading interactive preview…

pnpm dlx aq-ui@alpha add tree-view

Client module

Import the parts you need, then jump to an export for its contract.

"use client"

import { TreeView } from "@/components/ui/tree-view"

<TreeView />

Keyboard-navigable hierarchical view with selection, expansion, typeahead, and controlled state.

const TreeView = React.forwardRef<HTMLDivElement, TreeViewProps>(…)

Type contract for TreeViewNode.

interface TreeViewNode

Type contract for TreeViewProps.

interface TreeViewProps extends Omit<React.ComponentProps<"div">, "onSelect">

Name	Type	Default
`items`	`TreeViewNode[]`	`—`
`selectedIds?`	`string[]`	`—`
`defaultSelectedIds?`	`string[]`	`[]`
`onSelectedIdsChange?`	`(ids: string[]) => void`	`—`
`expandedIds?`	`string[]`	`—`
`defaultExpandedIds?`	`string[]`	`[]`
`onExpandedIdsChange?`	`(ids: string[]) => void`	`—`
`multiple?`	`boolean`	`false`
`draggable?`	`boolean`	`false`
`onMove?`	`(event: { sourceId: string targetId: string position: "inside" }) => void`	`—`
`renderLabel?`	`(node: TreeViewNode) => React.ReactNode`	`(node) => node.label`
`emptyMessage?`	`React.ReactNode`	`"No items."`

use-merged-refs, utils

lucide-react@^1.31.0