Agents
File Tree
The files an agent touched, with added, modified and deleted marks.
File Tree shows a project's files the way an agent sees them: folders that expand, changed files marked A, M or D in color, and a selected file for the diff or editor beside it.
Preview
Installation
pnpm dlx shadcn@latest add https://ui.cuelark.com/r/file-tree.jsonThe CLI also installs the Cuelark theme tokens. With the @cuelark namespace configured, use @cuelark/file-tree.
Usage
import { FileTree } from "@/components/ui/file-tree";
<FileTree tree={tree} selected={path} onSelect={setPath} />API reference
FileTree
| Prop | Type | Default | Description |
|---|---|---|---|
| tree | { name; children?; status? }[] | — | Nodes. |
| selected · onSelect | string | — | Selected file path. |
| defaultExpanded | string[] | — | Open folders. |
Accessibility
- Fully keyboard operable with visible focus.
- Live regions announce streaming updates politely.
FAQ
Also searched as: react file tree component · file explorer react · ai changed files ui · directory tree shadcn · shadcn ai file tree