Tree

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

Installation

npx dafink-ui add tree

src

components

Button.tsx

Input.tsx

app

page.tsx

layout.tsx

package.json

tsconfig.json

<Tree>

<TreeItem />/* recursive */

</TreeItem>

</Tree>

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)