File tree

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

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

// A round of work as it lands in Dropbox — brand kit, layered artwork,
// motion project files, and the flattened deliverables.
const items = [
  {
    name: "Brand",
    children: [
      { name: "logo-primary.svg" },
      { name: "logo-stacked.ai" },
      { name: "brand-guidelines.pdf" },
      {
        name: "Fonts",
        children: [
          { name: "Albra-Regular.otf" },
          { name: "Inter-Variable.ttf" },
        ],
      },
    ],
  },
  {
    name: "Design",
    children: [
      { name: "easter-key-art.psd" },
      { name: "title-slide.png" },
      { name: "series-mockup.jpg" },
    ],
  },
  {
    name: "Motion",
    children: [{ name: "bumper.aep" }, { name: "bumper-final.mov" }],
  },
  { name: "walk-in-loop.wav" },
  { name: "easter-2026-delivery.zip" },
];

export function Example() {
  return (
    <FileTree
      items={items}
      defaultExpandedIds={["Design"]}
      onSelect={(node, path) => openAsset(path.join("/"))}
    />
  );
}

FileTree                         (single component — pass everything as props)
├── items={FileTreeNode[]}       (nested; `children` marks a folder)
│   ├── name                     ("key-art.psd" — drives the auto icon)
│   ├── id?                      (defaults to the slash path, "Design/key-art.psd")
│   ├── children?                (presence ⇒ folder · type:"folder" for empties)
│   ├── icon? / iconClassName?   (override the extension icon)
│   ├── badge?                   (trailing slot — round count, size, status)
│   ├── hasChildren?             (an S3 prefix — opens, children fetched then)
│   ├── data?                    (your own payload, handed back on onSelect)
│   └── disabled?
├── value / defaultValue         (selected node id — the gliding highlight)
├── expandedIds / defaultExpandedIds / defaultExpandAll
├── contextMenu={[…] | (node, path) => […]}   (right-click menu)
├── loadChildren={(node, path) => Promise<FileTreeNode[]>}  (lazy folders)
├── filter="query"               (hides non-matches, forces hit branches open)
├── size="sm | default" · indent={16} · showLines · colorIcons
└── maxHeight={240}              (turns the tree into its own scroll-fade scroller)

Adobe formats carry the application's own mark:

psd · psb                  Photoshop
ai · eps                   Illustrator
indd · idml                InDesign
aep · mogrt                After Effects
prproj                     Premiere Pro
pdf                        Acrobat

Everything else is a tinted Phosphor glyph:

afphoto                    sky        (layered artwork)
afdesign                   orange     (vector)
fig · sketch · xd · ase    fuchsia    (design tools, palettes)
drp · blend · c4d          violet     (other motion projects)
mp4 · mov · m4v · webm     rose       (rendered video)
mp3 · wav · aif            cyan       (audio)
png · jpg · tif · dng · …  teal       (raster + raw photography)
svg                        amber      (vector export)
ppt · pptx · key           orange     (decks)
doc · docx                 blue
xls · xlsx · csv           emerald
otf · ttf · woff           neutral    (type)
zip · tar · gz · rar       neutral    (archives)
md · txt                   neutral
folders                    neutral    (so file types carry the color)

↑ / ↓        move to the previous / next visible row
→            open a closed folder, then step into it
←            close an open folder, else jump to its parent
Home / End   first / last visible row
Enter, Space select the row (and toggle it when it's a folder)