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, and the sections below cover the string-child form, the data prop, and the indentation rules that build deeper trees.

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. Literal \n sequences become line breaks either way, so the whole tree fits on one attribute line. Set both props and a non-empty data wins.

<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, so 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 the parser drops any row that misses that step rather than reparenting it. 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.