File System
This section provides an overview of how NextBase 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 15 project structure:
package.json
tsconfig.json
wrangler.jsonc
app
next.config.ts
.gitignore
Sorted File Structure with Changes
In this example, the file system shows Cloudflare Pages deployment configuration:
appadd
next.config.tsadd
package.json
wrangler.jsonc
Component Props
| Prop | Type | Default | Description |
|---|---|---|---|
items | Item[] | [] | Array of file and folder objects to display |
sorted | boolean | false | Whether to sort items alphabetically |
className | string | "" | Additional CSS classes for styling |
Item Properties
| Property | Type | Description |
|---|---|---|
type | "file" | "folder" | Determines if the item is a file or folder |
name | string | Name of the file or folder |
children | Item[] | Sub-items for folders |
isOpen | boolean | Whether the folder is expanded |
highlight | boolean | Highlights the item |
indicator | "add" | "modify" | "delete" | Shows modification status |
Usage Example
<Files
sorted
items={[
{
type: "folder",
name: "components",
isOpen: true,
children: [
{ type: "file", name: "Button.tsx", highlight: true },
{ type: "file", name: "Card.tsx", indicator: "add" },
],
},
]}
/>