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>