CmdocsComponents
Files
Display file and folder tree structures.
Files
The <Files> component displays file tree structures. Use <Folder> for directories and <File> for individual files. Folders can be nested and optionally expanded by default.
Basic File Tree
docs.json
index.mdx
quickstart.mdx
setup.mdx
configuration.mdx
favicon.svg
<Files>
<Folder name="my-docs" defaultOpen>
<File name="docs.json" />
<File name="index.mdx" />
<File name="quickstart.mdx" />
<Folder name="guides" defaultOpen>
<File name="setup.mdx" />
<File name="configuration.mdx" />
</Folder>
<Folder name="public" defaultOpen>
<File name="favicon.svg" />
</Folder>
</Folder>
</Files>Nested Structure
Use defaultOpen on folders you want expanded by default. Folders without defaultOpen appear collapsed.
Cargo.toml
main.rs
config.rs
package.json
App.tsx
docs.json
index.mdx
setup.mdx
package.json
<Files>
<Folder name="project" defaultOpen>
<Folder name="apps" defaultOpen>
<Folder name="api" defaultOpen>
<File name="Cargo.toml" />
</Folder>
<Folder name="dashboard" defaultOpen>
<File name="package.json" />
</Folder>
</Folder>
<Folder name="docs" defaultOpen>
<File name="docs.json" />
<File name="index.mdx" />
</Folder>
<File name="package.json" />
</Folder>
</Files>Props
<Files>
Prop
Type
<Folder>
Prop
Type
<File>
Prop
Type
How is this guide?