Components

File trees

Show a project's directory layout with the Tree, Folder, and File components.

A <Tree> renders a file-and-folder layout. Nest <Folder> and <File> inside it to mirror a project's structure — useful for showing where files live after you scaffold a site.

my-docs

velu.json

index.mdx

guides

hello.mdx

images

logo.svg

<Tree>
  <Folder name="my-docs" icon="folder" defaultOpen={true}>
    <File name="velu.json" icon="settings" />
    <File name="index.mdx" icon="file-text" />
    <Folder name="guides" icon="folder">
      <File name="hello.mdx" icon="file-text" />
    </Folder>
    <Folder name="images" icon="folder">
      <File name="logo.svg" icon="image" />
    </Folder>
  </Folder>
</Tree>

Folders are open by default. Set defaultOpen={false} on a <Folder> to start it collapsed.

Folder properties

namestring

The folder's label.

iconstring

A Lucide icon id for the folder.

defaultOpenbooleandefault: true

Whether the folder starts expanded.

File properties

namestring

The file's label.

iconstring

A Lucide icon id for the file.

Was this page helpful?

Code groups

Fields