A collapsible file/folder tree view with spring-animated folder expand/collapse, animated hover highlight, and automatic file-type icons based on extension.
"use client";
import { FileTree, type FileTreeElement } from "@/components/ui/file-tree";
const elements: FileTreeElement[] = [
{
id: "src",
type: "folder",
name: "src",
children: [
{
id: "components",
type: "folder",
name: "components",
},
{
id: "app",
type: "folder",
name: "app",
defaultOpen: true,
children: [
{ id: "app-layout", name: "layout.tsx", highlight: true },
{ id: "app-page", name: "page.tsx", highlight: true },
{
id: "api",
type: "folder",
name: "api",
},
],
},
{
id: "lib",
type: "folder",
name: "lib",
},
{
id: "styles",
type: "folder",
name: "styles",
},
],
},
{
id: "public",
type: "folder",
name: "public",
},
{
id: "config",
type: "folder",
name: "config",
},
{ id: "readme", name: "README.md" },
];
export default function Example() {
return (
<div className="w-full max-w-sm">
<FileTree elements={elements} defaultOpenIds={["src"]} />
</div>
);
}