File Tree

<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>

<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>