Tree

A collapsible, keyboard-navigable tree view for hierarchical data: file trees, org charts, and nested navigation.

Installation

npx dafink-ui add tree

Demo

src

components

Button.tsx

Input.tsx

app

page.tsx

layout.tsx

package.json

tsconfig.json

Composition

<Tree>

<TreeItem />/* recursive */

</TreeItem>

</Tree>

Props

Name	Type	Default	Description
label	ReactNode	-	The text or content displayed for the node. (TreeItem)
children	ReactNode	-	Nested TreeItem elements. Presence makes this a branch node. (TreeItem)
defaultOpen	boolean	false	Whether a branch starts expanded on initial render. (TreeItem)
collapsible	boolean	true	When false, the branch is always expanded with no toggle affordance: no chevron, not focusable, no hover/focus state. For read-only structural diagrams. (TreeItem)
icon	ReactNode	-	Custom icon for this item, overriding the tree-level terminalIcon/nonTerminalIcon and (for collapsible branches) the default chevron. (TreeItem)
disabled	boolean	false	Disables interaction. Item is visible but not clickable or focusable. (TreeItem)
className	string	""	Additional classes on the item row or tree root element.
terminalIcon	ReactNode	-	Default icon shown for leaf items (no children) that don’t set their own icon. No icon renders if unset. (Tree)
nonTerminalIcon	ReactNode	-	Default icon shown for non-collapsible branch items that don’t set their own icon. Collapsible branches keep the chevron instead. No icon renders if unset. (Tree)
selectable	boolean	false	Allows text selection/copy inside the tree. Off by default since a normal interactive tree treats click as select/toggle. Turn on for read-only, fully non-collapsible trees. (Tree)

Accessibility

Tree does not use single-stop roving tabindex: every visible, enabled, collapsible TreeItem carries its own tabIndex of 0, so Tab and Shift+Tab step through each visible item individually in document order, the same way arrow keys do, rather than entering and exiting the whole tree in one stop. An item with collapsible set to false is excluded entirely: its tabIndex is -1, it is never registered with the tree, and arrow keys/Home/End skip over it. The root carries role="tree", each item carries role="treeitem" with aria-expanded on branches and aria-disabled when disabled, and each children container carries role="group".

Key	Function
`down arrow`	Moves focus to the next visible item, wrapping from the last item to the first.
`up arrow`	Moves focus to the previous visible item, wrapping from the first item to the last.
`right arrow`	Expands a closed branch; if already open, moves focus to its first child.
`left arrow`	Collapses an open branch; if already closed, moves focus to the parent item.
`home`	Moves focus to the first visible item.
`end`	Moves focus to the last visible item.
`enter`	Toggles a branch open or closed.
`space`	Toggles a branch open or closed.
`tab`	Moves focus to the next visible, enabled item in document order.
`shift`+`tab`	Moves focus to the previous visible, enabled item in document order.