1Sponsor

Directory Tree

Filesystem browser with expand/collapse

Terminal

Installation

pnpm dlx shadcn@latest add https://termcn.dev/r/directory-tree.json

Usage

import { DirectoryTree } from "@/components/ui/directory-tree";
<DirectoryTree
  rootPath="/home/user/project"
  maxDepth={3}
  label="Project Files"
/>

API Reference

DirectoryTree

PropTypeDefault
rootPathstringprocess.cwd()
onSelect(path: string) => voidundefined
maxDepthnumber2
showHiddenbooleanfalse
labelstringundefined