TreeView

Hierarchical tree structure with expandable nodes, selection, and keyboard navigation.

Examples

Static tree showing a collapsed file hierarchy.

▸ src/

▸ public/

package.json

tsconfig.json

File tree with nested directories fully expanded.

▾ src/

▾ components/

button.tsx

input.tsx

▾ lib/

utils.ts

▸ public/

package.json

Click any node to highlight it as selected.

Click folder nodes to expand or collapse their children.

pnpm add @rokle/components @rokle/tokens

Installs with the default Rokle brand. Generate a custom brand on rokle.app to use your own colours and personality.

import { TreeView } from "@rokle/components";

import { TreeView } from "@rokle/components";

export function Example() {
  return <TreeView />;
}

Prop	Type	Default	Description
data	TreeNode[]	-	Nested tree data with id, label, and optional children.
selectedId	string	-	ID of the currently selected node.
onSelect	(id: string) => void	-	Called when a node is selected.