Introducing Magic UI Pro - 50+ blocks and templates to build beautiful landing pages in minutes.


Docs
File Tree

File Tree

A component used to showcase the folder and file structure of a directory.

Installation

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

Props

Tree

PropTypeDefaultDescription
initialSelectedIdstring-The ID of the initially selected item.
indicatorbooleantrueWhether to show the tree indicator line.
elementsTreeViewElement[]-An array of tree view elements to render.
initialExpandedItemsstring[]-An array of IDs for items that should be initially expanded.
openIconReact.ReactNode-Custom icon for open folders.
closeIconReact.ReactNode-Custom icon for closed folders.
dir"rtl" | "ltr""ltr"The text direction of the tree.

Folder

PropTypeDefaultDescription
elementstring-The name of the folder.
valuestring-The unique identifier for the folder.
isSelectablebooleantrueWhether the folder can be selected.
isSelectboolean-Whether the folder is currently selected.

File

PropTypeDefaultDescription
valuestring-The unique identifier for the file.
isSelectablebooleantrueWhether the file can be selected.
isSelectboolean-Whether the file is currently selected.
fileIconReact.ReactNode-Custom icon for the file.

CollapseButton

PropTypeDefaultDescription
elementsTreeViewElement[]-An array of tree view elements to control.
expandAllbooleanfalseWhether to expand all elements initially.