File System

This section provides an overview of how AriaDocs handles file system view in Markdown.

The Files component allows you to display a structured file system within Markdown. It supports files, folders, highlighting, sorting, and indicators for additions or deletions.

Preview

Default File Structure

This example represents a Next.js project structure:

package.json
tsconfig.json
src
next.config.js
.gitignore
extension.kt

Sorted File Structure with Changes

In this example, the file system has been modified:

.gitignore
next.config.js
package.json
publicremove
srcadd
tsconfig.json

Props

type Items = Array<{ type: "file" | "folder", name: string, children?: Array, highlight?: boolean, indicator?: "add" | "delete" }>

PropTypeDefaultDescription
itemsItems[]Defines the file system structure.
sortedbooleanfalseIf true, items are sorted alphabetically.
highlightbooleanfalseHighlights a specific file for emphasis.
indicator"add" | "delete"nullDisplays an indicator for added or removed items.

Code

<Files
items={[
{ type: "file", name: "package.json" },
{ type: "file", name: "tsconfig.json" },
{
type: "folder",
name: "src",
children: [
{ type: "file", name: "index.tsx" },
{ type: "file", name: "globals.css" },
{
type: "folder",
name: "components",
children: [
{ type: "file", name: "Navbar.tsx" },
{ type: "file", name: "Footer.tsx" },
],
},
],
},
{ type: "file", name: "next.config.js" },
]}
/>