Quick Start

1. Import the Components

import { TreeView, TreeViewItem, flattenTree } from "shadcn-treeview";

2. Define Your Tree Data

Tree data must be flattened using the flattenTree helper:

const data = flattenTree({
  name: "Root",
  children: [
    {
      name: "Folder 1",
      children: [
        { name: "File 1.1" },
        { name: "File 1.2" }
      ]
    },
    {
      name: "Folder 2",
      children: [
        { name: "File 2.1" }
      ]
    },
    { name: "File 3" }
  ]
});

3. Render the Tree

import { FileIcon, FolderIcon, FolderOpenIcon } from "lucide-react";

function MyTreeView() {
  return (
    <TreeView
      data={data}
      aria-label="My file tree"
      className="w-64 rounded border p-2"
      nodeRenderer={({
        element,
        isBranch,
        isExpanded,
        isSelected,
        getNodeProps,
        level
      }) => (
        <TreeViewItem
          {...getNodeProps()}
          name={element.name}
          isBranch={isBranch}
          isExpanded={isExpanded}
          isSelected={isSelected}
          level={level}
          indentation={16}
          icon={
            isBranch ? (
              isExpanded ? (
                <FolderOpenIcon className="h-4 w-4 text-muted-foreground" />
              ) : (
                <FolderIcon className="h-4 w-4 text-muted-foreground" />
              )
            ) : (
              <FileIcon className="h-4 w-4 text-muted-foreground" />
            )
          }
        />
      )}
    />
  );
}

Key Concepts

Node Renderer

The nodeRenderer prop is a render function that receives information about each node:

element - The node data (includes name, id, children, metadata)
isBranch - Whether the node has children
isExpanded - Whether the node is expanded (for branches)
isSelected - Whether the node is selected
level - The nesting depth (1-based)
getNodeProps() - Function that returns props to spread on your item

TreeViewItem Props

The TreeViewItem component accepts:

Prop	Type	Description
`name`	`string`	Display name
`level`	`number`	Nesting level
`isBranch`	`boolean`	Has children
`isExpanded`	`boolean`	Is expanded
`isSelected`	`boolean`	Is selected
`indentation`	`number`	Base indent (px)
`icon`	`ReactNode`	Icon element

Selection

By default, clicking a node selects it. You can customize this with:

<TreeView
  data={data}
  multiSelect           // Allow multiple selections
  togglableSelect       // Toggle selection on click
  clickAction="EXCLUSIVE_SELECT"  // Selection behavior
  onSelect={(props) => console.log("Selected:", props)}
  nodeRenderer={/* ... */}
/>