Data & Status

Collapsible File Tree

파일과 폴더를 선택하고 접을 수 있는 중첩 파일 트리입니다.

Preview

data structure

browse nested files

Installation

bash

Copied

1pnpm dlx shadcn@latest add https://ryong.dev/r/file-tree.json

bash

Copied

1npx shadcn@latest add https://ryong.dev/r/file-tree.json

bash

Copied

1yarn dlx shadcn@latest add https://ryong.dev/r/file-tree.json

bash

Copied

1bunx shadcn@latest add https://ryong.dev/r/file-tree.json

Code

typescript

Copied

1import { Tree, type TreeViewElement } from "@/components/file-tree"23const elements: TreeViewElement[] = [4  {5    id: "1",6    name: "app",7    children: [8      { id: "2", name: "page.tsx" },9      { id: "3", name: "layout.tsx" },10    ],11  },12]1314export default function Example() {15  return <Tree elements={elements} initialExpandedItems={["1"]} />16}

Props

Prop	Type	Default	Description
elements	TreeViewElement[]	undefined	Tree data rendered recursively.
initialSelectedId	string	undefined	Initially selected file or folder id.
initialExpandedItems	string[]	undefined	Folder ids opened on first render.
indicator	boolean	true	Whether to show nesting guide lines.
openIcon	React.ReactNode	FolderOpenIcon	Icon for expanded folders.
closeIcon	React.ReactNode	FolderIcon	Icon for collapsed folders.
sort	TreeSortMode	"default"	Folder/file sorting behavior.

Reference

Reference Collapsible File Tree