File Tree

Installation

import { File, Folder, Tree } from "@/components/magicui/file-tree";

<Tree>
  <Folder>
    <Folder>
      <File>layout.tsx</File>
      <File>page.tsx</File>
    </Folder>
  </Folder>
</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.