Skip to main content
A component for showcasing directory structures with expandable folders and selectable files.

Installation

npx shadcn@latest add @magicui/file-tree

Usage

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

export default function Example() {
  return (
    <Tree>
      <Folder element="src" value="src">
        <Folder element="components" value="components">
          <File value="button.tsx">button.tsx</File>
          <File value="card.tsx">card.tsx</File>
        </Folder>
        <File value="index.tsx">index.tsx</File>
      </Folder>
    </Tree>
  )
}

Tree Props

initialSelectedId
string
ID of the initially selected item
indicator
boolean
default:"true"
Whether to show the tree indicator line
elements
TreeViewElement[]
Array of tree view elements (alternative to children)
initialExpandedItems
string[]
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'
default:"'ltr'"
Text direction of the tree

Folder Props

element
string
required
Name of the folder to display
value
string
required
Unique identifier for the folder
isSelectable
boolean
default:"true"
Whether the folder can be selected
isSelect
boolean
Whether the folder is currently selected

File Props

value
string
required
Unique identifier for the file
isSelectable
boolean
default:"true"
Whether the file can be selected
isSelect
boolean
Whether the file is currently selected
fileIcon
React.ReactNode
Custom icon for the file

Features

  • Collapsible folder navigation
  • Selectable files and folders
  • Tree indicator lines
  • RTL language support
  • Custom icons for files and folders
  • Keyboard accessible
  • Smooth animations

Credits

Created by dillionverma

Build docs developers (and LLMs) love