shadcn-treeview

A lightweight, accessible, and customizable tree view component for React. Built on top of react-accessible-treeview with Shadcn UI styling.

Features

• Accessible - Built on react-accessible-treeview with full keyboard navigation and ARIA support
• Customizable - Flexible styling with Tailwind CSS classes
• Lightweight - Minimal dependencies
• TypeScript - Full TypeScript support with exported types
• Inline Editing - Built-in support for renaming items
• Multi-select - Support for single and multi-selection modes

Installation

Shadcn CLI (Recommended)

npx shadcn@latest add https://shadcn-treeview.achromatic.dev/registry/tree-view.json

Package Manager

npm install shadcn-treeview

Quick Start

1. Import the components

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

2. Create your tree data

const data = flattenTree({
  name: "Project",
  children: [
    {
      name: "src",
      children: [
        { name: "components", children: [{ name: "tree-view.tsx" }] },
        { name: "app.tsx" },
        { name: "index.tsx" }
      ]
    },
    { name: "package.json" },
    { name: "README.md" }
  ]
});

3. Render the tree

<TreeView
  data={data}
  aria-label="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 ? <FolderIcon /> : <FileIcon />}
    />
  )}
/>

API Reference

TreeView

The main container component. Accepts all props from react-accessible-treeview.

| Prop | Type | Description | |------|------|-------------| | data | INode[] | Flattened tree data (use flattenTree helper) | | nodeRenderer | (props: INodeRendererProps) => ReactNode | Render function for each node | | multiSelect | boolean | Enable multi-selection | | togglableSelect | boolean | Allow toggling selection | | clickAction | "EXCLUSIVE_SELECT" \| "SELECT" \| "FOCUS" | Action on click |

TreeViewItem

The component for rendering individual tree items.

| Prop | Type | Default | Description | |------|------|---------|-------------| | name | string | Required | Display name of the item | | level | number | Required | Nesting level (1-based) | | isBranch | boolean | false | Whether item has children | | isExpanded | boolean | false | Whether item is expanded | | isSelected | boolean | false | Whether item is selected | | indentation | number | 16 | Base indentation in pixels | | levelIndentation | number | 48 | Indentation per level | | icon | ReactNode | - | Icon to display | | isEditing | boolean | false | Enable edit mode | | onEditSubmit | (value: string) => void | - | Edit submit callback | | isLoading | boolean | false | Show loading state | | expandIcon | ReactNode | - | Custom expand icon | | loadingIcon | ReactNode | - | Custom loading icon |

Examples

Multi-select

<TreeView
  data={data}
  multiSelect
  togglableSelect
  clickAction="EXCLUSIVE_SELECT"
  onSelect={(props) => console.log("Selected:", props)}
  nodeRenderer={/* ... */}
/>

With Context Menu

<ContextMenu>
  <ContextMenuTrigger asChild>
    <TreeViewItem {...props} />
  </ContextMenuTrigger>
  <ContextMenuContent>
    <ContextMenuItem>Rename</ContextMenuItem>
    <ContextMenuItem>Delete</ContextMenuItem>
  </ContextMenuContent>
</ContextMenu>

Inline Editing

<TreeViewItem
  name={element.name}
  isEditing={element.metadata?.isEditing}
  onEditSubmit={(newName) => {
    // Update tree data with new name
    updateNodeName(element.id, newName);
  }}
  {...otherProps}
/>

Documentation

For full documentation, visit shadcn-treeview.achromatic.dev.

License

MIT

Maintained by Achromatic