File Tree
Collapsible file and folder tree with file-type icons, highlights, and configurable expand state.
Loading...
Installation
$ shadcn add @jalco/file-treeUsage
import { FileTree } from "@/components/file-tree"<FileTree />Examples
Icon styles
Minimal (default)
Colored
Highlighted files
Single file highlighted
Multiple files highlighted
Expand state
All expanded (default)
All collapsed
Specific paths expanded
API Reference
FileTree
PropType
FileTreeNode
PropType
Notes
- Client component. Uses "use client" for expand/collapse state. No external dependencies beyond React and Tailwind.
- Highlight paths. Paths are built by joining node names with
/from the root (e.g. src/app/page.tsx ). They do not include a leading slash. - Colored icons. The colored icon style includes built-in coverage for common file types (TypeScript, JavaScript, JSON, CSS, Markdown, Python, Rust, Go, and more). Unrecognized extensions fall back to the generic file icon.
- Accessibility. Uses role="tree" , role="treeitem" , and aria-expanded for screen reader compatibility.