FileExplorer

A recursive file tree with color-coded file icons, expandable directories, and file selection highlighting. Supports a compact variant for sidebar use.

Import

import { FileExplorer } from "@run0/jiki-ui";
import type { FileEntry } from "@run0/jiki-ui";

Props

Prop	Type	Default	Description
`files`	`FileEntry[]`	—	File tree structure
`selectedFile`	`string \| null`	—	Path of the currently selected file
`onSelect`	`(path: string) => void`	—	Called when a file is clicked
`accentColor`	`AccentColor`	`"emerald"`	Theme color for selection highlight
`variant`	`"default" \| "compact"`	`"default"`	Size variant

FileEntry

interface FileEntry {
  name: string;            // File or directory name
  path: string;            // Full file path
  isDir: boolean;          // Whether this entry is a directory
  children?: FileEntry[];  // Child entries (directories only)
}

Features

Recursive tree view with expand/collapse on directories
Color-coded file icons by extension (.js yellow, .ts blue, .tsx cyan, .json amber, .html orange, .css pink, .md blue, .vue emerald, .svelte orange, .astro orange, and more)
Folder icons in amber
Selected file highlighting with accent color
Compact and default size variants

Usage

const files: FileEntry[] = [
  {
    name: "src",
    path: "src",
    isDir: true,
    children: [
      { name: "index.ts", path: "src/index.ts", isDir: false },
      { name: "App.tsx", path: "src/App.tsx", isDir: false },
    ],
  },
  { name: "package.json", path: "package.json", isDir: false },
];

<FileExplorer
  files={files}
  selectedFile="src/App.tsx"
  onSelect={(path) => openFile(path)}
  accentColor="blue"
  variant="compact"
/>

Demo

import { useState } from "react";
import { FileExplorer } from "@run0/jiki-ui";
import type { FileEntry } from "@run0/jiki-ui";

const FILES: FileEntry[] = [
{
  name: "src",
  path: "src",
  isDir: true,
  children: [
    { name: "App.tsx", path: "src/App.tsx", isDir: false },
    { name: "index.ts", path: "src/index.ts", isDir: false },
    {
      name: "utils",
      path: "src/utils",
      isDir: true,
      children: [
        { name: "math.ts", path: "src/utils/math.ts", isDir: false },
      ],
    },
  ],
},
{ name: "package.json", path: "package.json", isDir: false },
{ name: "tsconfig.json", path: "tsconfig.json", isDir: false },
{ name: "README.md", path: "README.md", isDir: false },
];

export default function FileExplorerDemo() {
const [selected, setSelected] = useState<string | null>("src/App.tsx");

return (
  <div style={{ height: 260, width: 240 }}>
    <FileExplorer
      files={FILES}
      selectedFile={selected}
      onSelect={setSelected}
      accentColor="emerald"
    />
  </div>
);
}