As i was checking out Fumadocs (beautiful piece of software btw), i came across their interactive <Files> component for displaying a folder’s structure. I decided to build it myself because why not?

The goal was to build a component that is fully self-contained and easy to use, letting us define the entire structure directly via JSX nesting.

Below is my implementation

Hide Icons

src

app

components

lib

public

config

package.jsontsconfig.jsonREADME.md

and here is the code of a basic example:

<Files showIcons={showIcons}>
  <Folder name="src" defaultOpen>
    <Folder name="components">
      <Folder name="ui">
        <File name="button.tsx" />
        <File name="card.tsx" />
        <File name="dialog.tsx" />
      </Folder>
      <Folder name="forms">
        <File name="contact-form.tsx" />
        <File name="newsletter-form.tsx" />
      </Folder>
    </Folder>
    <Folder name="lib"></Folder>
  </Folder>
</Files>

You can find the source code here.

I’m pretty happy with the final product.