This TreeView component is a modern, lightweight file explorer built with React, Framer Motion, and shadcn/ui. It displays a hierarchical structure of folders and files, where users can expand or collapse folders by clicking on either the folder icon or the name. Each item shows a tooltip on hover, making it easy to identify long or truncated file names. The design follows shadcn UI styling principles with clean hover effects, accent colors, and rounded corners, while Framer Motion adds smooth expand/collapse animations. This makes the component both visually appealing and intuitive to use, ideal for dashboards, code editors, or any application that needs a structured tree navigation system.
import TreeNodeTooltip from "@/components/ui/tree-node-tooltip";
const demoData = [
{
id: "1",
name: "src",
tooltip: "src",
type: "folder",
children: [
{
id: "2",
name: "components",
tooltip: "components",
type: "folder",
children: [
{ id: "3", name: "Button.tsx", tooltip: "Button's tooltip", type: "file" },
{ id: "4", name: "Card.tsx", tooltip: "Card's tooltip", type: "file" },
],
},
{
id: "5",
name: "lib",
tooltip: "lib",
type: "folder",
children: [{ id: "6", name: "utils.ts", tooltip: "utils's tooltip", type: "file" }],
},
],
},
];
export default function TreeViewDemo() {
return (
<div className="p-4 bg-card rounded-xl shadow-sm">
{demoData.map((node) => (
<TreeNodeTooltip key={node.id} node={node} />
))}
</div>
);
}
Part of Ruixen UI — browse the full library on 21st.dev.