Tree - Relevate

Basic Usage

docs

docs.json

index.mdx

getting-started.mdx

cli.mdx

public

light.svg

dark.svg

favicon.svg

<Tree>
  <Tree.Folder name="docs" defaultOpen>
    <Tree.File name="docs.json" />
    <Tree.File name="index.mdx" />
    <Tree.File name="getting-started.mdx" />
    <Tree.File name="cli.mdx" />
    <Tree.Folder name="public">
      <Tree.File name="light.svg" />
      <Tree.File name="dark.svg" />
      <Tree.File name="favicon.svg" />
    </Tree.Folder>
  </Tree.Folder>
</Tree>

Nested Folders

docs

docs.json

index.mdx

getting-started.mdx

cli.mdx

index.mdx

getting-started.mdx

cli.mdx

When To Use It

Show a project layout
Show a docs folder
Show locale folders
Show where config and assets live

Use Tree when the structure matters. Use a code block when readers need to copy the text exactly.

Available Options

children

ReactElement<Tree.Folder | Tree.File>[]

Required. List of folders and files.

aria-label

string

Optional label for screen readers.

name

string

required

Folder name.

defaultOpen

boolean

Whether the folder starts open.

children

ReactElement<Tree.Folder | Tree.File>[]

Nested files and folders.

name

string

required

File name.