File Tree

Installation

npx shadcn@latest add "https://magicui.design/r/file-tree"

Prop	Type	Default	Description
`initialSelectedId`	`string`	-	The ID of the initially selected item.
`indicator`	`boolean`	`true`	Whether to show the tree indicator line.
`elements`	`TreeViewElement[]`	-	An array of tree view elements to render.
`initialExpandedItems`	`string[]`	-	An array of IDs for items that should be initially expanded.
`openIcon`	`React.ReactNode`	-	Custom icon for open folders.
`closeIcon`	`React.ReactNode`	-	Custom icon for closed folders.
`dir`	`"rtl" \| "ltr"`	`"ltr"`	The text direction of the tree.

Prop	Type	Default	Description
`element`	`string`	-	The name of the folder.
`value`	`string`	-	The unique identifier for the folder.
`isSelectable`	`boolean`	`true`	Whether the folder can be selected.
`isSelect`	`boolean`	-	Whether the folder is currently selected.

Prop	Type	Default	Description
`value`	`string`	-	The unique identifier for the file.
`isSelectable`	`boolean`	`true`	Whether the file can be selected.
`isSelect`	`boolean`	-	Whether the file is currently selected.
`fileIcon`	`React.ReactNode`	-	Custom icon for the file.

Prop	Type	Default	Description
`elements`	`TreeViewElement[]`	-	An array of tree view elements to control.
`expandAll`	`boolean`	`false`	Whether to expand all elements initially.