File Tree

Display a list of files and folders in a hierarchical tree structure.

Default

Code Editor
<Container style={{ marginLeft: 'var(--geist-gap)' }}>

  <Tree>

    <Folder name='components'>

      <Folder name='typography'>

        <File name='paragraph.js'/>

        <File name='code.js'/>

        <File name='heading.js'/>

      </Folder>

      <File name='button.js'/>

      <File name='avatar.js'/>

    </Folder>

    <Folder name='pages'>

      <File name='dashboard.js'/>

      <File name='about.js'/>

      <File name='index.js'/>

    </Folder>

    <File name='README.md'/>

    <File name='.gitignore'/>

  </Tree>

</Container>

Open

Code Editor
<Container style={{ marginLeft: "var(--geist-gap)" }}>

  <Tree>

    <Folder name="pages" open>

      <File name="dashboard.js" />

      <File name="about.js" />

      <File name="index.js" />

    </Folder>

    <File name="README.md" />

    <File name=".gitignore" />

  </Tree>

</Container>