The FileTree component is a lightweight and intuitive file explorer built using shadcn/ui utilities and lucide-react icons. It provides a clear hierarchical structure to represent files and folders, supporting smooth expand and collapse transitions for nested items. With its simple design, it is easy to integrate and customize while maintaining consistency with the shadcn UI style. Ideal for use cases such as dashboards, project explorers, or content management tools, this component ensures both functionality and visual clarity.
import FileTree from "@/components/ui/file-tree-1";
const demoData: FileNode[] = [
{
id: "1",
name: "src",
type: "folder",
children: [
{ id: "1-1", name: "components", type: "folder", children: [{ id: "1-1-1", name: "Button.tsx", type: "file" }] },
{ id: "1-2", name: "App.tsx", type: "file" },
{ id: "1-3", name: "styles.css", type: "file" },
],
},
{
id: "2",
name: "public",
type: "folder",
children: [{ id: "2-1", name: "favicon.ico", type: "file" }],
},
{ id: "3", name: "package.json", type: "file" },
];
export default function FileTreeDemo() {
return (
<div className="min-w-xs border rounded-lg p-3">
<h2 className="font-semibold mb-2 text-sm">File Tree Demo</h2>
<FileTree data={demoData} onSelect={(node) => console.log("Selected:", node)} />
</div>
);
}
Part of Ruixen UI — browse the full library on 21st.dev.