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

Getting Started

Templates

Components

Special Effects

Animations

Text Animations

Device Mocks

Buttons

Backgrounds

Community

File Tree

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

import { Tree } from "@/registry/magicui/file-tree"
import type { TreeViewElement } from "@/registry/magicui/file-tree"

export function FileTreeDemo() {
  return (
    <div className="bg-background relative flex h-[300px] w-full max-w-sm flex-col items-center justify-center overflow-hidden rounded-lg border">
      <Tree
        className="bg-background overflow-hidden rounded-md p-2"
        initialSelectedId="button"
        initialExpandedItems={["src", "app", "components", "ui", "lib"]}
        elements={ELEMENTS}
      />
    </div>
  )
}

const ELEMENTS: TreeViewElement[] = [
  {
    id: "src",
    type: "folder",
    isSelectable: true,
    name: "src",
    children: [
      {
        id: "lib",
        type: "folder",
        isSelectable: true,
        name: "lib",
        children: [
          {
            id: "utils",
            isSelectable: true,
            name: "utils.ts",
          },
        ],
      },
      {
        id: "app",
        type: "folder",
        isSelectable: true,
        name: "app",
        children: [
          {
            id: "page",
            isSelectable: true,
            name: "page.tsx",
          },
          {
            id: "layout",
            isSelectable: true,
            name: "layout.tsx",
          },
        ],
      },
      {
        id: "components",
        type: "folder",
        isSelectable: true,
        name: "components",
        children: [
          {
            id: "header",
            isSelectable: true,
            name: "header.tsx",
          },
          {
            id: "ui",
            type: "folder",
            isSelectable: true,
            name: "ui",
            children: [
              {
                id: "button",
                isSelectable: true,
                name: "button.tsx",
              },
            ],
          },
          {
            id: "footer",
            isSelectable: true,
            name: "footer.tsx",
          },
        ],
      },
    ],
  },
]

Installation


pnpm dlx shadcn@latest add @magicui/file-tree

Usage

import { Tree } from "@/components/ui/file-tree"
import type { TreeViewElement } from "@/components/ui/file-tree"

const elements: TreeViewElement[] = [
  {
    id: "src",
    type: "folder",
    name: "src",
    children: [
      { id: "components", type: "folder", name: "components" },
      { id: "app", type: "folder", name: "app" },
      { id: "page", name: "page.tsx" },
      { id: "layout", name: "layout.tsx" },
    ],
  },
]
 
<Tree elements={elements} />

When you pass elements and omit children, the tree is rendered from data and siblings are sorted automatically using a folders-first alphabetical order. Use sort="none" to preserve the input order, or pass a custom comparator.

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 when `children` are omitted.
`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.
`sort`	`"default" \| "none" \| ((a, b) => number)`	`"default"`	Sorting mode used for data-driven trees rendered from `elements`.
`dir`	`"rtl" \| "ltr"`	`"ltr"`	The text direction of the tree.

TreeViewElement

Prop	Type	Default	Description
`id`	`string`	`-`	A unique identifier for the node.
`name`	`string`	`-`	The label rendered for the node in data-driven mode.
`type`	`"file" \| "folder"`	`-`	Explicit node type. Use `"folder"` for empty folders.
`isSelectable`	`boolean`	`true`	Whether the node can be selected.
`children`	`TreeViewElement[]`	`-`	Child nodes for folders.

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.

Shiny Button Code Comparison

On This Page

Installation Usage Props Tree TreeViewElement Folder File CollapseButton

Contribute

Limited Time Offer

Ship Faster with Magic 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

$199once

Get Lifetime Access

Trusted by 5,000+ developers