Tree View

A collapsible hierarchical list — file explorers, org charts, taxonomy editors. Folders auto-pick a Folder/FolderOpen icon, leaves pick a File icon, and the indent scales with indentSize.

Installation

Props

PropTypeDefaultDescription
data*
TreeNode[]—Hierarchical data. Each node has id, name, optional children, optional icon, and optional data payload.
selectedId
string—Highlighted node id.
onSelect
(node: TreeNode) => void—Called when a node is clicked.
expandedIds
string[]—Controlled list of expanded folder ids.
onExpandChange
(ids: string[]) => void—Called when folders are expanded or collapsed.
showIcons
booleantrueRender default folder/file icons.
indentSize
number16Pixel indent per level.