File Tree

Collapsible file and folder tree with file-type icons, highlights, and configurable expand state. Designed for project structure docs, README displays, and dev-tool file explorers.

Preview

Installation

$ shadcn add @jalco/file-tree

Usage

import { FileTree, type FileTreeNode } from "@/components/file-tree"

const tree: FileTreeNode[] = [
  {
    name: "src",
    children: [
      { name: "index.ts" },
      { name: "utils.ts" },
    ],
  },
  { name: "package.json" },
]

<FileTree tree={tree} />

Pass a nested array of FileTreeNode objects. Folders have a children array. Client component — expand/collapse requires local state.

Examples

Icon styles

Use iconStyle to switch between generic icons and file-type-colored icons.

Minimal (default)

Colored

Highlighted files

Pass an array of full paths to highlight to draw attention to specific files.

Single file highlighted

Multiple files highlighted

Expand state

Control which folders are expanded on mount with defaultExpanded.

All expanded (default)

All collapsed

Specific paths expanded

Monorepo structure

Larger trees with deeply nested folders work naturally with the expand/collapse interaction.

Turborepo monorepo

Supported File Icons

When iconStyle="colored" is set, these extensions get a colored badge. All other extensions fall back to a generic file icon.

Extension	Icon	Category
.ts, .tsx	TSTX	TypeScript
.js, .jsx	JSJX	JavaScript
.json	{}	Data
.md, .mdx	MMX	Markdown
.css	#	Styles
.html	<>	Markup
.svg	◇	Image
.png, .jpg, .gif	▪▪▪	Image
.yaml, .yml	YY	Config
.toml	T	Config
.env	·	Config
.gitignore	G	Git
.lock	🔒	Lockfile
.sh, .bash	$$	Shell
.py	Py	Python
.rs	Rs	Rust
.go	Go	Go

Dotfiles like .gitignore and .env are matched by stripping the leading dot. You can extend the FILE_ICON_MAP in the source to add more extensions.

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.