Tree View - Shadcn UI

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

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.

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
    expandAll?: boolean
    defaultNodeIcon?: any
    defaultLeafIcon?: any
}

Tree Item

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

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 (MrLightful#2).
• Add support for striped and non-striped variants of the tree (MrLightful#3).
• Add support for custom item renderers (MrLightful#4).

License

Licensed under the MIT license, see LICENSE.