Tree View

A hierarchical tree view component with drag-and-drop support, custom icons using Modus Icons, and interactive actions for file and folder management interfaces.

Examples

Interactive File System Tree

A complete tree view with file and folder icons, expandable nodes, and interactive actions.

Interactive Demo

Click on items to select them, expand folders to see their contents, and use the action buttons.

Component Location

The tree view component is located in the @/components/treeview directory.

Project Structure

components/
├── treeview/
│   └── tree-view.tsx                 # Main tree view component
├── ui/
│   ├── accordion.tsx
│   ├── button.tsx
│   └── ...
└── ...

Usage:
import { TreeView, type TreeDataItem } from "@/components/treeview"

Custom Icons with Modus Icons

Use different Modus Icons for different file types and states.

Custom icons example

const treeDataWithCustomIcons: TreeDataItem[] = [
  {
    id: "1",
    name: "Documents",
    icon: () => <i className="modus-icons">folder_closed</i>,
    openIcon: () => <i className="modus-icons">folder_open</i>,
    selectedIcon: () => <i className="modus-icons">folder_personal</i>,
    children: [
      {
        id: "1-1",
        name: "PDF Files",
        icon: () => <i className="modus-icons">file_type_pdf</i>,
      },
      {
        id: "1-2",
        name: "Excel Files",
        icon: () => <i className="modus-icons">file_type_xls</i>,
      },
      {
        id: "1-3",
        name: "Images",
        icon: () => <i className="modus-icons">image</i>,
      },
    ],
  },
]

Drag and Drop Support

Enable drag and drop functionality for reorganizing tree items.

Drag and drop example

const treeDataWithDragDrop: TreeDataItem[] = [
  {
    id: "1",
    name: "Draggable Folder",
    icon: () => <i className="modus-icons">folder_closed</i>,
    draggable: true,
    droppable: true,
    children: [
      {
        id: "1-1",
        name: "Draggable File",
        icon: () => <i className="modus-icons">file</i>,
        draggable: true,
        droppable: false,
      },
    ],
  },
]

function TreeViewWithDragDrop() {
  const handleDocumentDrag = (sourceItem: TreeDataItem, targetItem: TreeDataItem) => {
    console.log('Dragged:', sourceItem.name, 'to:', targetItem.name)
    // Handle drag and drop logic here
  }

  return (
    <TreeView
      data={treeDataWithDragDrop}
      onDocumentDrag={handleDocumentDrag}
    />
  )
}

Usage

components/my-tree-view.tsx

import { TreeView, type TreeDataItem } from "@/components/treeview"

function MyTreeView() {
  const [selectedItem, setSelectedItem] = useState<TreeDataItem | undefined>()
  
  const treeData: TreeDataItem[] = [
    {
      id: "1",
      name: "Documents",
      icon: () => <i className="modus-icons">folder_closed</i>,
      openIcon: () => <i className="modus-icons">folder_open</i>,
      children: [
        {
          id: "1-1",
          name: "Projects",
          icon: () => <i className="modus-icons">folder_project</i>,
          children: [
            {
              id: "1-1-1",
              name: "Website Redesign",
              icon: () => <i className="modus-icons">file</i>,
              actions: (
                <Button variant="ghost" size="sm">
                  <i className="modus-icons">edit</i>
                </Button>
              ),
            },
          ],
        },
      ],
    },
  ]

  return (
    <TreeView
      data={treeData}
      onSelectChange={setSelectedItem}
      defaultNodeIcon={() => <i className="modus-icons">folder_closed</i>}
      defaultLeafIcon={() => <i className="modus-icons">file</i>}
    />
  )
}

API Reference

TreeView

Prop	Type	Default	Description
`data`	`TreeDataItem[] \| TreeDataItem`	-	The tree data to display
`onSelectChange`	`(item: TreeDataItem \| undefined) => void`	-	Callback when selection changes
`expandAll`	`boolean`	`false`	Whether to expand all nodes by default
`defaultNodeIcon`	`React.ComponentType`	-	Default icon for folder nodes
`defaultLeafIcon`	`React.ComponentType`	-	Default icon for leaf nodes
`onDocumentDrag`	`(source: TreeDataItem, target: TreeDataItem) => void`	-	Callback when drag and drop occurs
`initialSelectedItemId`	`string`	-	ID of initially selected item

TreeDataItem

Prop	Type	Description
`id`	`string`	Unique identifier for the item
`name`	`string`	Display name for the item
`icon`	`React.ComponentType`	Icon component to display
`selectedIcon`	`React.ComponentType`	Icon to show when item is selected
`openIcon`	`React.ComponentType`	Icon to show when node is expanded
`children`	`TreeDataItem[]`	Child items for this node
`actions`	`React.ReactNode`	Action buttons to show on hover/selection
`draggable`	`boolean`	Whether item can be dragged
`droppable`	`boolean`	Whether item can accept drops
`disabled`	`boolean`	Whether item is disabled
`onClick`	`() => void`	Callback when item is clicked

UIs