FileExplorer

A pre-styled file/folder tree with automatic file-type icons, color-coded extensions, built-in search/filter, and scroll area.

Preview

src

app

page.tsx

layout.tsx

globals.css

docs

page.tsx

components

button.tsx

card.tsx

input.tsx

badge.tsx

lib

utils.ts

public

favicon.ico

og-image.png

package.json

tsconfig.json

README.md

next.config.ts

Installation

This will also install the tree-view dependency automatically.

Usage

tsximport { FileExplorer, type FileNode } from "@/components/ui/file-explorer"

const data: FileNode[] = [
  {
    id: "src",
    name: "src",
    type: "folder",
    children: [
      { id: "index.ts", name: "index.ts", type: "file" },
      { id: "utils.ts", name: "utils.ts", type: "file" },
    ],
  },
  { id: "package.json", name: "package.json", type: "file" },
]

export function MyFileTree() {
  return (
    <FileExplorer
      data={data}
      showSearch
      defaultExpanded={["src"]}
      selectionMode="single"
    />
  )
}

Data Structure

Each node in the tree is represented by a FileNode object.

tsxinterface FileNode {
  /** Unique identifier. */
  id: string
  /** Display name (e.g., "index.ts"). */
  name: string
  /** Whether this is a file or folder. */
  type: "file" | "folder"
  /** Child nodes (only for folders). */
  children?: FileNode[]
  /** Custom icon override. */
  icon?: React.ReactNode
}

File Icons

Icons and colors are automatically assigned based on file extension.

Extension	Icon	Color
.ts, .tsx	FileCode	Blue
.js, .jsx	FileCode	Yellow
.json	FileJson	Yellow
.md, .mdx, .txt	FileText	Gray
.png, .jpg, .gif, .webp	FileImage	Green
.svg	FileImage	Orange
Other	File	Muted

API Reference

FileExplorer

Also accepts all TreeView props (selectionMode, indicator, size, etc.).

Prop	Type	Default	Description
data	FileNode[]	—	The file tree data to render (required).
showSearch	boolean	false	Whether to show the search input.
searchPlaceholder	string	"Search files..."	Placeholder for the search input.
maxHeight	string	"400px"	Max height for the scroll area.
onFileSelect	(node: FileNode) => void	—	Called when a file node is clicked.
wrapperClassName	string	—	Additional class names for the outer wrapper.