FileTree Component Demo

Interactive FileTree Demo

File Tree — shadcn UI + lucide-react

src

components

Button.tsx

app.tsx

styles.css

public

package.json

Selected: 1-1-1

Installation

Prop	Type	Default	Description
`treeData`	`FileNode[]`	`[]`	Initial tree data
`initialExpanded`	`string[]`	`[]`	Initially expanded node IDs
`initialSelected`	`string \| null`	`null`	Initially selected node ID
`onSelect`	`(node: FileNode) => void`	-	Callback when node is selected
`onDelete`	`(node: FileNode) => void`	-	Callback when node is deleted
`onCreate`	`(parent?: FileNode, type?: "file" \| "folder", name?: string) => void`	-	Callback when node is created
`onRename`	`(node: FileNode, newName: string) => void`	-	Callback when node is renamed