Component Library

File Tree

A component for displaying a file tree

Default

Default file tree

src

app

layout.tsx

page.tsx

globals.css

api

auth

route.ts

users

route.ts

components

button.tsx

card.tsx

file-tree.tsx

header.tsx

footer.tsx

lib

utils.ts

constants.ts

hooks

use-auth.ts

use-theme.ts

public

favicon.ico

logo.svg

images

hero.png

avatar.jpg

package.json

tsconfig.json

next.config.mjs

tailwind.config.ts

.env.local

.gitignore

README.md

tsx

1import { FileTreeDefault } from "@/components/examples/file-tree-examples"
2
3<FileTreeDefault />

Bordered

Bordered file tree

src

public

package.json

tsconfig.json

next.config.mjs

tailwind.config.ts

.env.local

.gitignore

README.md

tsx

1import { FileTreeBordered } from "@/components/examples/file-tree-examples"
2
3<FileTreeBordered />

Elevated

Elevated file tree

src

public

package.json

tsconfig.json

next.config.mjs

tailwind.config.ts

.env.local

.gitignore

README.md

tsx

1import { FileTreeElevated } from "@/components/examples/file-tree-examples"
2
3<FileTreeElevated />

Ghost + Large Size

Ghost file tree with large size

src

public

package.json

tsconfig.json

next.config.mjs

tailwind.config.ts

.env.local

.gitignore

README.md

tsx

1import { FileTreeGhost } from "@/components/examples/file-tree-examples"
2<div>
3  <FileTreeGhost
4    data={sampleData}
5    size="lg" 
6  />
7</div>

Props

Name	Type	Default	Description
data	FileTreeNode[]	[]	The data to display in the file tree
variant	"default" \| "ghost" \| "bordered" \| "elevated"	default	The variant of the file tree
size	"sm" \| "default" \| "lg"	default	The size of the file tree
defaultExpanded	boolean	true	Whether the file tree is expanded by default
onSelect	() => void	undefined	Callback when a file or folder is selected
selectedPath	string	undefined	The selected path in the file tree
onExpand	() => void	undefined	Callback when a file or folder is expanded
onCollapse	() => void	undefined	Callback when a file or folder is collapsed