File Tree

FileTree turns indented text into a directory listing with folder and file icons. A name ending in / becomes a folder; everything else is a file. Each example below shows the live component first, then the exact MDX that produced it.

Quick Start

Pass the tree as a single string child, with \n between rows.

<FileTree>{'app/\n  index.mdx\n  layout.tsx'}</FileTree>

Adding Options

The data prop accepts the same string and keeps deeper trees out of the component's children.

<FileTree data="app/\n  getting-started/\n    introduction.mdx\n    features.mdx\n  api/\n    health/\n      route.ts\ncomponents/\n  CodeBlock.tsx" />

Advanced

Every folder row is a button, so readers can collapse a subtree they don't care about. Folders start expanded, and the toggle is local to that row — collapsing one branch leaves the rest alone. Two rules govern deeper trees. Each level must indent by exactly two more spaces than its parent, and a row that misses that step is dropped from the output rather than reparented. A name without a trailing slash stays a file even when it contains a slash, which is how health/route.ts collapses into one row.

<FileTree>
  {
    'app/\n  index.mdx\n  layout.tsx\n  api/\n    health/route.ts\n    auth/\n      verify/route.ts\n      logout/route.ts\ncomponents/\n  FileTree.tsx\nlib/\n  navigation-utils.ts'
  }
</FileTree>

Options

Neither prop is required, and neither has a default. Whitespace-only input, or no input at all, renders nothing — the component returns null before it draws a border.