FileTree

Expandable file and directory tree with selection, status indicators, and nesting.

Preview

Variants

Expanded

Collapsed

Props

Prop	Type	Description
nodes*	FileNode[]	Tree data. Folders carry optional children; files carry language and badge.
selectedId	string	The currently selected node id (controlled).
onSelect	(id: string) => void	Called when any node is clicked.
density	"comfortable" \| "compact"	Row height. Defaults to comfortable.
toolbar	React.ReactNode	Optional slot rendered above the tree (e.g. a search input).
className	string	Additional class names for the root element.

* required.

Usage

import { FileTree } from "@/components/sandbox/file-tree";

<FileTree
  nodes={[
    {
      id: "src",
      name: "src",
      kind: "folder",
      defaultOpen: true,
      children: [
        { id: "index", name: "index.ts", kind: "file", language: "ts", badge: "modified" },
      ],
    },
  ]}
  selectedId={selectedId}
  onSelect={setSelectedId}
/>