Interactive Tree View Component with Drag Support for Shadcn/ui

shadcn-ui-tree-view is a component library built to extend Shadcn/ui with a dynamic and feature-rich tree view.

The component renders collapsible parent nodes and leaf items with configurable icons. It tracks selected items across multiple hierarchy levels and supports both keyboard and mouse interactions. Visual animations during expansion and selection help users maintain spatial awareness in complex trees.

GitHub Repo

Live Demo

Features

📂 Dynamic Folder Handling. Expand/collapse parent nodes with automatic child counting. Empty folders display placeholder states.

🎨 Custom Icon System. Assign different icons per depth level or item type using the getIcon prop. Default SVG icons included.

🌳 Multi-Layer Selection. Choose individual items or select ranges using Shift-click. Drag across items to create selection boxes.

🖱️ Context-Aware Menus. Right-click files or folders to access type-specific actions. Connect menu items to external handlers.

Use Cases

File Explorers: Implement a familiar file system interface within web applications, allowing users to browse directories and manage files intuitively.
Organizational Charts: Visualize company structures or team hierarchies, enabling users to navigate through different levels of an organization.
Category Navigation: Build dynamic category menus for e-commerce platforms or documentation sites, improving content discoverability.
Project Management Tools: Represent project tasks or milestones in a tree structure, facilitating task organization and progress tracking.
Settings Panels: Structure application settings in a hierarchical manner, making it easier for users to find and adjust configurations.

Installation

Run this command in your Shadcn-UI project:

npx shadcn add "https://github.com/neigebaie/shadcn-ui-tree-view/releases/download/v1.0.0/schema.json"

Usage

Define tree data with nested TreeViewItem objects:

const data: TreeViewItem[] = [
  {
    id: "root",
    name: "Documents",
    type: "folder",
    children: [
      { id: "doc1", name: "Spec.pdf", type: "file" }
    ]
  }
];

Control selections via callback:

<TreeView 
  data={data}
  onSelectionChange={(items) => console.log(items)}
  getIcon={(item, depth) => <DepthIcon level={depth} />}
/>

FAQs

Q: Can I use custom animations?
A: Yes. Override the default CSS transitions using the component’s [data-expanded] and [data-selected] attributes.

Q: How does accessibility work?
A: The component implements WAI-ARIA roles for tree navigation. Arrow keys move focus between items.

Q: What if my data loads asynchronously?
A: Pass an empty children array to folders. Use the onAction handler to trigger data fetching when users expand nodes.

Q: Is keyboard selection supported?
A: Yes. Spacebar selects focused items. Shift+Arrow keys extend selection ranges.