About
A collapsible nested list for visualizing a project's folder and file structure, with keyboard-accessible expand/collapse toggles.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds File Tree to your project and fits it to your theme.
Code
How File Tree is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
import { FileTree } from "@/components/ui/file-tree";
export default function FileTreeDemo() {
return (
<FileTree
className="max-w-xs text-xs"
tree={[
{
name: "components",
children: [
{
name: "velora",
children: [{ name: "marquee.tsx" }, { name: "dock.tsx" }],
},
{ name: "ui", children: [{ name: "button.tsx" }] },
],
},
]}
/>
);
}
More by colorlibhq
View all
Navbar Menu