Introduction

Shadcn Treeview provides an accessible, customizable tree view component for React applications. Built on top of react-accessible-treeview, it offers full keyboard navigation, ARIA support, and Shadcn UI styling out of the box.

Features

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

Quick Example

• src
• public
• package.json
• README.md

import { TreeView, TreeViewItem, flattenTree } from "shadcn-treeview";
import { FileIcon, FolderIcon } from "lucide-react";

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

function FileTree() {
  return (
    <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 className="h-4 w-4" /> : <FileIcon className="h-4 w-4" />}
        />
      )}
    />
  );
}

Why Shadcn Treeview?

Building accessible tree views from scratch is complex. Shadcn Treeview solves this by:

1. Handling accessibility - Keyboard navigation, focus management, and ARIA attributes are built-in
2. Providing flexible styling - Works with Tailwind CSS and follows Shadcn UI conventions
3. Supporting common patterns - Multi-select, inline editing, and context menus work out of the box
4. Keeping it simple - Minimal API surface with sensible defaults

Getting Started

Ready to get started? Check out the installation guide or jump straight to the quick start.