The Tree View component allows you to navigate hierarchical lists of data with nested levels that can be expanded and collapsed.

Based on implementation by WangLarry and bytechase.

DEMO

Tree View Table (advanced)

Features

• Expand, collapse, and select items.
• Custom icons per item (default, open, selected).
• Default node & leaf icons per tree view.
• Action buttons (e.g. a button to add a new item).
• Click handlers per tree item and per the entire tree view.
• Drag & drop support.
• Disabled state.
• Custom item renderers.

Installation

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

Usage

Props

Tree View

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 }>;
};

Tree Item

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;
}

Basic

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} />;

Roadmap

• Add support for programmatically controlling items (https://github.com/romatallinn/shadcn-tree-view/issues/2).

Alternatives

• Kibo UI / Tree
• ReUI / Tree
• Coss / Tree

License

Licensed under the MIT license, see LICENSE.