A component used to showcase the folder and file structure of a directory.
Style pack
Theme
Density
Direction and motion
Customize
This item has no props to tune. Use the lens above to change theme, density, direction and more.
Guide and examples
Installation
pnpm dlx shadcn@latest add @tealmac-pro/file-tree
Usage
When you pass elements and omit children, the tree is rendered from data and siblings are sorted automatically using a folders-first alphabetical order. Use sort="none" to preserve the input order, or pass a custom comparator.
Props
Tree
Prop
Type
Default
Description
initialSelectedId
string
-
The ID of the initially selected item.
indicator
boolean
true
Whether to show the tree indicator line.
elements
TreeViewElement[]
-
An array of tree view elements to render when children are omitted.
initialExpandedItems
string[]
-
An array of IDs for items that should be initially expanded.
openIcon
React.ReactNode
-
Custom icon for open folders.
closeIcon
React.ReactNode
-
Custom icon for closed folders.
sort
"default" | "none" | ((a, b) => number)
"default"
Sorting mode used for data-driven trees rendered from elements.
dir
"rtl" | "ltr"
"ltr"
The text direction of the tree.
TreeViewElement
Prop
Type
Default
Description
id
string
-
A unique identifier for the node.
name
string
-
The label rendered for the node in data-driven mode.
type
"file" | "folder"
-
Explicit node type. Use "folder" for empty folders.