About
Collapsible file and folder tree with colored language-specific icons for 24+ file types, path highlighting, and configurable expand/collapse. Zero dependencies — just React and Tailwind. Available in jalco/ui - more variants: https://ui.justinlevine.me/docs/components/file-tree
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, type FileTreeNode } from "@/components/ui/file-tree"
const tree: FileTreeNode[] = [
{
name: "src",
children: [
{
name: "app",
children: [
{ name: "layout.tsx" },
{ name: "page.tsx" },
{ name: "api", children: [{ name: "route.ts" }] },
],
},
{
name: "components",
children: [
{ name: "header.tsx" },
{ name: "footer.tsx" },
],
},
{ name: "lib", children: [{ name: "utils.ts" }] },
],
},
{ name: "package.json" },
{ name: "tsconfig.json" },
{ name: "next.config.ts" },
{ name: ".env.local" },
]
export default function FileTreeDemo() {
return (
<div className="max-w-sm">
<FileTree
tree={tree}
iconStyle="colored"
highlight={["src/app/page.tsx"]}
/>
</div>
)
}