File Tree

PreviewCode

src

app

layout.tsxpage.tsx

components

ui

button.tsx

footer.tsxheader.tsx

lib

utils.ts

@/demos/FileTreeDemo.tsx

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

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',
          },
        ],
      },
    ],
  },
]

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

Installation

pnpm

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

bun

bunx shadcn@latest add @magicui-solid/file-tree

yarn

yarn dlx shadcn@latest add @magicui-solid/file-tree

npm

npx shadcn@latest add @magicui-solid/file-tree

Import

import { Tree } from '@/components/magicui/file-tree'
import type { TreeViewElement } from '@/components/magicui/file-tree'

Usage

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	JSX.Element	-	Custom icon for open folders.
closeIcon	JSX.Element	-	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	JSX.Element	-	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.

Original:

magicui.design/docs/components/file-tree