Components
Loading preview...
This File Tree component is a fully interactive explorer built using shadcn/ui and lucide-react icons. It mimics the structure of an IDE file browser, allowing you to expand and collapse folders, select files or folders, and perform quick actions like adding, renaming, or deleting items. The component demonstrates recursive rendering for nested structures, contextual controls with tooltips, and smooth UI styling powered by shadcn. It’s flexible enough to serve as a base for a project navigator, documentation tree, or any hierarchical data display, while remaining consistent with the shadcn design system.
npx shadcn@latest add https://21st.dev/r/ruixen.ui/file-treeimport FileTree from "@/components/ui/file-tree";
export default function DemoOne() {
return <FileTree />;
}