Data & Status

Collapsible File Tree

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

Preview

data structure

browse nested files

Installation

bash

Copied

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

bash

Copied

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

bash

Copied

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

bash

Copied

1bunx shadcn@latest add https://ryong-blog.vercel.app/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

elements

Type: TreeViewElement[]
Default: undefined
Description: Tree data rendered recursively.

initialSelectedId

Type: string
Default: undefined
Description: Initially selected file or folder id.

initialExpandedItems

Type: string[]
Default: undefined
Description: Folder ids opened on first render.

indicator

Type: boolean
Default: true
Description: Whether to show nesting guide lines.

openIcon

Type: React.ReactNode
Default: FolderOpenIcon
Description: Icon for expanded folders.

closeIcon

Type: React.ReactNode
Default: FolderIcon
Description: Icon for collapsed folders.

sort

Type: TreeSortMode
Default: "default"
Description: Folder/file sorting behavior.

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