File Tree

A tree component for hierarchically visualizing files and folders. Each row consists of a chevron, folder/file icon, and name. Child groups are indented with guides, and expand/collapse state is shown visually.

Tree Structure

An open folder (FolderOpen) rotates its chevron 90°. A closed folder (Folder) keeps it at 0°. File rows have no chevron (hidden via opacity to maintain alignment). The active file is highlighted with a primary 8% tint (dark: sky 10%) + primary text.

web
app
layout.tsxTS
page.tsxTS
globals.cssCSS
package.jsonJSON
next.config.tsTS

Rules

  • Folder icon color: --c-primary(dark: --c-sky). File icon: --c-grey.
  • File names: --ff-en weight 400 (monospace). Folder names: --ff weight 500.
  • Indent guide: ::before absolutely positioned 1px vertical line (--c-line-soft).
  • Row hover: no solid grey fill — use only a primary/sky 5–8% transparent tint.
  • Expand state: open = rotate(90deg) chevron + FolderOpen icon. Closed = 0° + Folder.
  • The type badge next to a file icon is optional. Color it to match the extension's semantic role (TS: sky, CSS: positive, JSON: warning).