Folder Tree
A customizable folder tree component for displaying hierarchical data with expandable nodes.
ScrollX-UI
Installation
npx shadcn@latest add https://scrollxui.dev/registry/folder-tree.json Usage
import { FolderTree } from "@/components/ui/folder-tree";<FolderTree.Root
defaultExpanded={["root", "folder1"]}
defaultSelected="file1"
className="w-full"
>
<FolderTree.Item id="root" label="Root Folder">
<FolderTree.Content>
<FolderTree.Item id="folder1" label="Documents">
<FolderTree.Content>
<FolderTree.Item id="file1" label="File 1.txt" />
<FolderTree.Item id="file2" label="File 2.txt" />
<FolderTree.Item id="file3" label="Image.png" />
</FolderTree.Content>
</FolderTree.Item>
</FolderTree.Content>
</FolderTree.Item>
</FolderTree.Root>Examples
With Badges
ScrollX-UI
API Reference
FolderTree.Root
The root component that provides context and manages global state.