Skip to content

File Tree

The files an agent read or changed. One tab stop; the arrow keys move, open and close, Home and End jump, Enter selects, and typing a letter jumps to a name.

Sourcecomponents/file-tree.tsx
  • src
    • components
      • badge.tsx
      • button.tsx
      • card.tsx
    • index.ts
  • package.json
  • README.md

Selected: src/components/button.tsx

Usage

File Tree usage
import { useState } from "react";import { FileTree, FileTreeFile, FileTreeFolder } from "@/components/file-tree";
export function FileTreeUsage() {  const [selected, setSelected] = useState("app/page.tsx");  return (    <FileTree defaultExpanded={new Set(["app"])} selectedPath={selected} onSelect={setSelected} aria-label="Changed files">      <FileTreeFolder path="app" name="app">        <FileTreeFile path="app/page.tsx" name="page.tsx" />        <FileTreeFile path="app/layout.tsx" name="layout.tsx" />      </FileTreeFolder>      <FileTreeFile path="package.json" name="package.json" />    </FileTree>  );}

When to use

Use when

The files an agent read or changed, nested by folder. A WAI-ARIA tree: one tab stop, arrow keys, type-ahead; name it with aria-label

Don’t use when

A flat list of changed files (use Item); site navigation (use Sidebar)