### Installation

Source: https://github.com/mrlightful/shadcn-tree-view/blob/main/README.md

Use the shadcn CLI to add the Tree View component to your project.

```APIDOC
## Installation

```sh
npx shadcn add "https://mrlightful.com/registry/tree-view"
```
```

--------------------------------

### Basic Usage

Source: https://github.com/mrlightful/shadcn-tree-view/blob/main/README.md

Example of how to implement a basic Tree View component with sample data.

```APIDOC
## Basic Usage

```tsx
import { TreeView, TreeDataItem } from "@/components/ui/tree-view";

const data: TreeDataItem[] = [
  {
    id: "1",
    name: "Item 1",
    children: [
      {
        id: "2",
        name: "Item 1.1",
        children: [
          {
            id: "3",
            name: "Item 1.1.1",
          },
          {
            id: "4",
            name: "Item 1.1.2",
          },
        ],
      },
      {
        id: "5",
        name: "Item 1.2 (disabled)",
        disabled: true,
      },
    ],
  },
  {
    id: "6",
    name: "Item 2 (draggable)",
    draggable: true,
  },
];

<TreeView data={data} />;
```
```

--------------------------------

### Install Shadcn Tree View

Source: https://github.com/mrlightful/shadcn-tree-view/blob/main/README.md

Use this command to add the Tree View component to your Shadcn UI project.

```sh
npx shadcn add "https://mrlightful.com/registry/tree-view"
```

--------------------------------

### Basic Tree View Usage

Source: https://github.com/mrlightful/shadcn-tree-view/blob/main/README.md

Demonstrates how to render a basic Tree View component with sample hierarchical data. Ensure the TreeDataItem structure is correctly defined.

```tsx
import { TreeView, TreeDataItem } from "@/components/ui/tree-view";

const data: TreeDataItem[] = [
  {
    id: "1",
    name: "Item 1",
    children: [
      {
        id: "2",
        name: "Item 1.1",
        children: [
          {
            id: "3",
            name: "Item 1.1.1",
          },
          {
            id: "4",
            name: "Item 1.1.2",
          },
        ],
      },
      {
        id: "5",
        name: "Item 1.2 (disabled)",
        disabled: true,
      },
    ],
  },
  {
    id: "6",
    name: "Item 2 (draggable)",
    draggable: true,
  },
];

<TreeView data={data} />;
```

--------------------------------

### Implement Drag and Drop in Tree View

Source: https://context7.com/mrlightful/shadcn-tree-view/llms.txt

Enable drag and drop by setting `draggable` and `droppable` properties. Handle reordering logic within the `onDocumentDrag` callback. State management is required to update the data.

```tsx
import { TreeView, TreeDataItem } from "@/components/ui/tree-view";
import { useState } from "react";

function DraggableTree() {
  const [data, setData] = useState<TreeDataItem[]>([
    {
      id: "folder-1",
      name: "Inbox",
      droppable: true,
      children: [
        { id: "item-1", name: "Email 1", draggable: true },
        { id: "item-2", name: "Email 2", draggable: true },
      ],
    },
    {
      id: "folder-2",
      name: "Archive",
      droppable: true,
      children: [],
    },
  ]);

  const handleDrag = (sourceItem: TreeDataItem, targetItem: TreeDataItem) => {
    console.log(`Moving "${sourceItem.name}" to "${targetItem.name}"`);
    // Implement your reordering logic here
    // This typically involves removing sourceItem from its parent
    // and adding it to targetItem's children
  };

  return (
    <TreeView
      data={data}
      onDocumentDrag={handleDrag}
      expandAll
    />
  );
}

```

--------------------------------

### Basic TreeView Usage

Source: https://context7.com/mrlightful/shadcn-tree-view/llms.txt

Renders a complete tree structure from hierarchical data. Handles expand/collapse and selection logic internally. Requires TreeDataItem[] for data.

```tsx
import { TreeView, TreeDataItem } from "@/components/ui/tree-view";

const data: TreeDataItem[] = [
  {
    id: "1",
    name: "Documents",
    children: [
      {
        id: "1-1",
        name: "Work",
        children: [
          { id: "1-1-1", name: "report.pdf" },
          { id: "1-1-2", name: "presentation.pptx" },
        ],
      },
      {
        id: "1-2",
        name: "Personal",
        children: [
          { id: "1-2-1", name: "taxes.xlsx" },
        ],
      },
    ],
  },
  {
    id: "2",
    name: "Downloads",
    children: [
      { id: "2-1", name: "image.png" },
      { id: "2-2", name: "archive.zip" },
    ],
  },
];

function FileExplorer() {
  const handleSelectChange = (item: TreeDataItem | undefined) => {
    console.log("Selected:", item?.name);
  };

  return (
    <TreeView
      data={data}
      initialSelectedItemId="1-1-1"
      onSelectChange={handleSelectChange}
      expandAll={false}
      className="w-64 border rounded-lg"
    />
  );
}
```

--------------------------------

### TreeDataItem Interface with Icons and Actions

Source: https://context7.com/mrlightful/shadcn-tree-view/llms.txt

Defines the structure for tree items, supporting custom icons, actions, and disabled states. Use lucide-react for icons.

```tsx
import { TreeView, TreeDataItem } from "@/components/ui/tree-view";
import { Folder, FolderOpen, File, FileText, Plus, Trash2 } from "lucide-react";

const data: TreeDataItem[] = [
  {
    id: "folder-1",
    name: "Project Files",
    icon: Folder,
    openIcon: FolderOpen,
    selectedIcon: FolderOpen,
    onClick: () => console.log("Folder clicked"),
    actions: (
      <button onClick={(e) => { e.stopPropagation(); console.log("Add file"); }}>
        <Plus className="h-4 w-4" />
      </button>
    ),
    children: [
      {
        id: "file-1",
        name: "README.md",
        icon: FileText,
        draggable: true,
        droppable: false,
      },
      {
        id: "file-2",
        name: "Archived (disabled)",
        icon: File,
        disabled: true,
        className: "text-muted-foreground",
      },
    ],
  },
  {
    id: "folder-2",
    name: "Drop Zone",
    icon: Folder,
    droppable: true,
    draggable: false,
    children: [],
  },
];

<TreeView data={data} />
```

--------------------------------

### Configure Default Icons for Tree View

Source: https://context7.com/mrlightful/shadcn-tree-view/llms.txt

Set default icons for nodes and leaves at the tree level. These can be overridden by individual item icons. Requires 'lucide-react' for icons.

```tsx
import { TreeView, TreeDataItem } from "@/components/ui/tree-view";
import { Folder, FolderOpen, FileText } from "lucide-react";

const data: TreeDataItem[] = [
  {
    id: "1",
    name: "Documents",
    children: [
      { id: "1-1", name: "Notes", children: [{ id: "1-1-1", name: "todo.txt" }] },
      { id: "1-2", name: "readme.md" },
    ],
  },
  {
    id: "2",
    name: "config.json", // leaf - will use defaultLeafIcon
  },
];

<TreeView
  data={data}
  defaultNodeIcon={Folder}
  defaultLeafIcon={FileText}
  expandAll
/>;
```

--------------------------------

### Tree View Props

Source: https://github.com/mrlightful/shadcn-tree-view/blob/main/README.md

Defines the properties available for the Tree View component.

```APIDOC
## Tree View Props

```tsx
type TreeProps = React.HTMLAttributes<HTMLDivElement> & {
  data: TreeDataItem[] | TreeDataItem;
  initialSelectedItemId?: string;
  onSelectChange?: (item: TreeDataItem | undefined) => void;
  renderItem?: (params: TreeRenderItemParams) => React.ReactNode;
  expandAll?: boolean;
  defaultNodeIcon?: React.ComponentType<{ className?: string }>;
  defaultLeafIcon?: React.ComponentType<{ className?: string }>;
};
```
```

--------------------------------

### Create a cn Utility Function for Class Merging

Source: https://context7.com/mrlightful/shadcn-tree-view/llms.txt

A utility function that merges Tailwind CSS classes using `clsx` and `tailwind-merge`. It prevents class conflicts and allows conditional styling. Accepts multiple string arguments or an object for conditional classes.

```typescript
import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

// Usage examples:
cn("px-4 py-2", "px-6");                    // "px-6 py-2" (px-6 overrides px-4)
cn("text-red-500", false && "text-blue-500"); // "text-red-500"
cn("rounded", { "bg-primary": true });       // "rounded bg-primary"
cn("p-4", undefined, null, "m-2");           // "p-4 m-2"
```

--------------------------------

### Custom Tree Item Rendering

Source: https://context7.com/mrlightful/shadcn-tree-view/llms.txt

Utilizes the `renderItem` prop for complete control over tree item display. Receives item data, level, and state information.

```tsx
import { TreeView, TreeDataItem, TreeRenderItemParams } from "@/components/ui/tree-view";
import { ChevronRight, File, Folder } from "lucide-react";

const data: TreeDataItem[] = [
  {
    id: "1",
    name: "src",
    children: [
      { id: "1-1", name: "components", children: [{ id: "1-1-1", name: "Button.tsx" }] },
      { id: "1-2", name: "utils.ts" },
    ],
  },
];

function CustomTreeItem({ item, level, isLeaf, isSelected, isOpen, hasChildren }: TreeRenderItemParams) {
  return (
    <div className="flex items-center gap-2 w-full">
      {isLeaf ? (
        <File className="h-4 w-4 text-blue-500" />
      ) : (
        <Folder className={`h-4 w-4 ${isOpen ? "text-yellow-500" : "text-gray-500"}`} />
      )}
      <span className={`text-sm ${isSelected ? "font-semibold" : ""}`}>
        {item.name}
      </span>
      {hasChildren && (
        <span className="ml-auto text-xs text-muted-foreground">
          {item.children?.length} items
        </span>
      )}
    </div>
  );
}

<TreeView data={data} renderItem={CustomTreeItem} expandAll />
```

--------------------------------

### Tree Item Data Structure

Source: https://github.com/mrlightful/shadcn-tree-view/blob/main/README.md

Defines the structure for individual items within the Tree View data.

```APIDOC
## Tree Item Data Structure

```tsx
interface TreeDataItem {
  id: string;
  name: string;
  icon?: React.ComponentType<{ className?: string }>;
  selectedIcon?: React.ComponentType<{ className?: string }>;
  openIcon?: React.ComponentType<{ className?: string }>;
  children?: TreeDataItem[];
  actions?: React.ReactNode;
  onClick?: () => void;
  draggable?: boolean;
  droppable?: boolean;
  disabled?: boolean;
  className?: string;
}
```
```

--------------------------------

### Tree Data Item Interface Definition

Source: https://github.com/mrlightful/shadcn-tree-view/blob/main/README.md

Defines the structure for individual data items within the Tree View, including properties for hierarchy, icons, and interactivity.

```typescript
interface TreeDataItem {
  id: string;
  name: string;
  icon?: React.ComponentType<{ className?: string }>;
  selectedIcon?: React.ComponentType<{ className?: string }>;
  openIcon?: React.ComponentType<{ className?: string }>;
  children?: TreeDataItem[];
  actions?: React.ReactNode;
  onClick?: () => void;
  draggable?: boolean;
  droppable?: boolean;
  disabled?: boolean;
  className?: string;
}
```

--------------------------------

### Tree View Props Type Definition

Source: https://github.com/mrlightful/shadcn-tree-view/blob/main/README.md

Defines the properties available for the main Tree View component, including data input and event handlers.

```typescript
type TreeProps = React.HTMLAttributes<HTMLDivElement> & {
  data: TreeDataItem[] | TreeDataItem;
  initialSelectedItemId?: string;
  onSelectChange?: (item: TreeDataItem | undefined) => void;
  renderItem?: (params: TreeRenderItemParams) => React.ReactNode;
  expandAll?: boolean;
  defaultNodeIcon?: React.ComponentType<{ className?: string }>;
  defaultLeafIcon?: React.ComponentType<{ className?: string }>;
};
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.