FileTree

Visual directory tree with type-based file icons and native expand/collapse. Use for project layout diagrams, "where to put this file" references, and migration maps.

<FileTree> renders a hierarchical folder-and-file view — the same format you’d draw on a whiteboard when explaining project structure. Directories use native <details>/<summary> so expand/collapse works without JavaScript.

A typical Publier project

import { FileTree } from '@publier/shell/components';

<FileTree tree={[
  { type: 'directory', name: 'src', children: [
    { type: 'directory', name: 'content', children: [
      { type: 'directory', name: 'docs', children: [
        { type: 'file', name: 'index.mdx', highlight: true, comment: 'root /docs page' },
        { type: 'file', name: 'get-started' },
        { type: 'placeholder', comment: 'more sections' },
      ]},
      { type: 'file', name: 'config.ts' },
    ]},
  ]},
  { type: 'file', name: 'astro.config.ts' },
  { type: 'file', name: 'publier.config.yaml', highlight: true },
]} />

Entry types

Three entry shapes. Use highlight to call out a file the reader should focus on; use comment for a trailing gloss.

File

Directory (expandable)

Placeholder (elision)

Hide noise with { type: 'placeholder' }:

<FileTree tree={[
  { type: 'directory', name: 'node_modules', open: false, children: [
    { type: 'placeholder', comment: 'hundreds of packages' },
  ]},
  { type: 'directory', name: 'src', children: [
    { type: 'file', name: 'index.ts', highlight: true },
    { type: 'placeholder' },
  ]},
]} />

Props

`<FileTree>`

Prop	Type	Default	Description
`tree`	`FileTreeEntry[]`	—	Top-level entries. Required.
`label`	`string`	`'File tree'`	Accessible label for the `role="tree"` element.
`class`	`string`	—	Extra CSS class.

File entry

Field	Type	Description
`type`	`'file'`	Discriminant.
`name`	`string`	Filename with extension — icon auto-picks from `.ts`, `.tsx`, `.mdx`, `.json`, `.astro`, etc.
`highlight`	`boolean`	Render bold/accented.
`comment`	`string`	Trailing inline comment.

Directory entry

Field	Type	Description
`type`	`'directory'`	Discriminant.
`name`	`string`	Folder name (trailing `/` added automatically).
`children`	`FileTreeEntry[]`	Nested entries.
`open`	`boolean` (default `true`)	Whether the `<details>` is expanded initially.
`highlight`	`boolean`	Render bold/accented.
`comment`	`string`	Trailing inline comment.

Placeholder entry

Field	Type	Description
`type`	`'placeholder'`	Discriminant.
`name`	`string` (default `'…'`)	Override the ellipsis text.
`comment`	`string`	Trailing inline comment.

Behaviour

Directories render as native <details>/<summary> — click the folder name to expand/collapse, no JS.
File icons come from a small map of common extensions; unknown extensions get a generic file icon.
role="tree" + aria-label for screen reader navigation.

Code block with a file-titled frame → Code blocks.
Grouped install commands → PackageInstall.