FileTree

Nested explorer with folder collapse, active selection, and file actions.

bunx --bun shadcn@latest add https://shadcn-sandbox.vercel.app/r/file-tree.json

Preview

Explorer

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

export function ExplorerPanel() {
  return (
    <FileTree
      tree={fileTree}
      activeFileId={activeFileId}
      onSelectFile={selectFile}
      onCreateFile={createFile}
      onDeleteFile={deleteFile}
    />
  );
}