Getting Started
Components
Device Mocks
Special Effects
Animations
Text Animations
Buttons
import { File, Folder, Tree } from "@/registry/magicui/file-tree";
export function FileTreeDemo() {
return (
<div className="relative flex h-[300px] w-1/2 flex-col items-center justify-center overflow-hidden rounded-lg border bg-background">
<Tree
className="overflow-hidden rounded-md bg-background p-2"
initialSelectedId="7"
initialExpandedItems={[
"1",
"2",
"3",
"4",
"5",
"6",
"7",
"8",
"9",
"10",
"11",
]}
elements={ELEMENTS}
>
<Folder element="src" value="1">
<Folder value="2" element="app">
<File value="3">
<p>layout.tsx</p>
</File>
<File value="4">
<p>page.tsx</p>
</File>
</Folder>
<Folder value="5" element="components">
<Folder value="6" element="ui">
<File value="7">
<p>button.tsx</p>
</File>
</Folder>
<File value="8">
<p>header.tsx</p>
</File>
<File value="9">
<p>footer.tsx</p>
</File>
</Folder>
<Folder value="10" element="lib">
<File value="11">
<p>utils.ts</p>
</File>
</Folder>
</Folder>
</Tree>
</div>
);
}
const ELEMENTS = [
{
id: "1",
isSelectable: true,
name: "src",
children: [
{
id: "2",
isSelectable: true,
name: "app",
children: [
{
id: "3",
isSelectable: true,
name: "layout.tsx",
},
{
id: "4",
isSelectable: true,
name: "page.tsx",
},
],
},
{
id: "5",
isSelectable: true,
name: "components",
children: [
{
id: "6",
isSelectable: true,
name: "header.tsx",
},
{
id: "7",
isSelectable: true,
name: "footer.tsx",
},
],
},
{
id: "8",
isSelectable: true,
name: "lib",
children: [
{
id: "9",
isSelectable: true,
name: "utils.ts",
},
],
},
],
},
];
Installation
pnpm dlx shadcn@latest add @magicui/file-tree
Usage
import { File, Folder, Tree } from "@/components/magicui/file-tree";
<Tree>
<Folder>
<Folder>
<File>layout.tsx</File>
<File>page.tsx</File>
</Folder>
</Folder>
</Tree>
Props
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. |
Folder
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. |
File
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. |
CollapseButton
Prop | Type | Default | Description |
---|---|---|---|
elements | TreeViewElement[] | - | An array of tree view elements to control. |
expandAll | boolean | false | Whether to expand all elements initially. |
Limited Time Offer
Ship Faster with Magic UI ProMagic UI Pro
Stop building from scratch.
Get 8 production-ready templates and 50+ premium components that your users will love.
✓
Next.js 15 + TypeScript ready✓
Copy, paste, customize in minutes✓
Save 100+ hours of development