File tree
The files an agent touched, shown in their folders and marked added, modified or deleted.
Loading preview…
Install
- 1
Run this command in your Tailwind CSS project. It adds
components/ai/file-tree.tsxand installs its dependencies.$ npx shadcn@latest add https://gradientdeck.com/ai-components/r/file-tree.json
Usage & API
Example
import { FileTree } from "@/components/ai/file-tree"
<FileTree
nodes={[]}
expanded={[]}
onToggle={() => {}}
selected={null}
onSelect={() => {}}
/>Props FileTree
| Prop | Type & description | Required |
|---|---|---|
nodes | TreeNode[] | Required |
expanded | string[] | Required |
onToggle | (path: string) => void | Required |
selected | string | null | Required |
onSelect | (path: string) => void | Required |
Dependencies
- React
- Tailwind CSS
- motion
- lucide-react
Implementation notes
Changed files is the only variant. The sample tree starts at src, with app, lib and components, plus package.json at the root. Billing holds page.tsx, modified, 38 added and 12 removed, and actions.ts, added, 64 lines, described as a server action that changes the plan and prorates the charge. layout.tsx is unchanged. lib holds plans.ts, modified, legacy-billing.ts, deleted, 41 removed, and db.ts, unchanged. components holds button.tsx, unchanged, and plan-card.tsx, added. The sample expands src, app, billing and lib, and selects actions.ts, so the detail column opens on that file. The header says Changes and 5 files, the five paths that carry a change. package.json, layout.tsx, db.ts and button.tsx show no letter. Collapsing lib leaves the amber dot, because plans.ts and the deleted file are still inside.
Choosing a layout
Use it when the useful answer is the shape of the edit: which folders, which files, and whether each file is new, changed or gone. That is the moment after an agent has touched a project and before the person dives into one path. Select should open the diff, the code block, or the note you stored on the node. The sample stores the note on the node and shows it beside the tree. Expansion is controlled, so you can start with the folders that actually contain changes and leave the rest shut, which is what the sample does.
A diff is the better fit once a file is chosen and the person needs to accept or reject hunks. A code block is the better fit when there is one file to read in full and no tree of neighbours. Test results are the better fit when the follow-up is a run, not a path list. An artifact panel is the better fit when the output is one generated piece with a preview, not a set of paths in a repo. The tree does not show line contents. Do not stretch the note into a diff.
Does the letter on a folder mean the folder itself changed?
Folders in this tree do not take a change letter. The dot on a collapsed folder means some descendant has a change. Open it to see which file is A, M or D. A file with no change prop has no letter, and the sample's detail column then says No changes in this file instead of showing counts.
Will selecting a folder open the detail column?
No. A folder click only toggles expansion through onToggle. onSelect runs for files. The detail column is sample chrome, and it looks up the selected path. If you select nothing, it renders nothing. The added and removed numbers and the note are whatever you put on the node. The tree does not diff the file to compute them.