Files | Hanzo Docs

page.tsx

layout.tsx

page.tsx

global.css

package.json

import { … } from '@hanzo/docs-ui/components/files';

Usage

Wrap file components in Files, you can use it in your MDX content, or as a normal React.js component.

content.mdx

import { File, Folder, Files } from '@hanzo/docs/ui/components/files';

<Files>
  <Folder name="app" defaultOpen>
    <File name="layout.tsx" />
    <File name="page.tsx" />
    <File name="global.css" />
  </Folder>
  <Folder name="components">
    <File name="button.tsx" />
    <File name="tabs.tsx" />
    <File name="dialog.tsx" />
  </Folder>
  <File name="package.json" />
</Files>

File

PropType

Folder

PropType

Remark Plugin

You can enable remark-mdx-files for additional feature & syntax.

source.config.ts (Hanzo Docs MDX)

import { remarkMdxFiles } from '@hanzo/docs-core/mdx-plugins/remark-mdx-files';
import { defineConfig } from '@hanzo/docs-mdx/config';

export default defineConfig({
  mdxOptions: {
    remarkPlugins: [remarkMdxFiles],
  },
});

CodeBlock Syntax

It will convert files codeblocks into <Files /> component, like:

content.md

```files
project
├── src
│   ├── index.js
│   └── utils
│       └── helper.js
├── package.json
```

`<auto-files>`

Generate <Files /> component from glob.

content.mdx

<auto-files dir="./my-dir" pattern="**/*.{ts,tsx}" />

<auto-files dir="./my-dir" pattern="**/*.{ts,tsx}" defaultOpenAll />