Files

A file tree component for displaying hierarchical file structures with folders and files.

srcM

main.tsx

App.tsxM

index.css

components

uiM

button.tsx

card.tsxM

toast.tsxA

header.tsx

footer.tsx

hooksU

lib

public

.envI

.eslintrc.cjs

index.html

package.jsonM

tsconfig.json

vite.config.ts

1'use client';
2
3import { Files } from '@/components/ui/files';
4
5export function Default() {
6  return (
7    <Files defaultValue="src/components/ui">
8      <Files.Folder name="src" status="modified">
9        <Files.File name="main.tsx" />
10        <Files.File name="App.tsx" status="modified" />
11        <Files.File name="index.css" />
12
13        <Files.Folder name="components">
14          <Files.Folder name="ui" status="modified">
15            <Files.File name="button.tsx" />
16            <Files.File name="card.tsx" status="modified" />
17            <Files.File name="toast.tsx" status="added" />
18          </Files.Folder>
19
20          <Files.File name="header.tsx" />
21          <Files.File name="footer.tsx" />
22        </Files.Folder>
23
24        <Files.Folder name="hooks" status="untracked">
25          <Files.File name="use-auth.ts" status="untracked" />
26          <Files.File name="use-toast.ts" status="untracked" />
27        </Files.Folder>
28
29        <Files.Folder name="lib">
30          <Files.File name="cn.ts" />
31          <Files.File name="utils.ts" />
32        </Files.Folder>
33      </Files.Folder>
34
35      <Files.Folder name="public">
36        <Files.File name="favicon.svg" />
37      </Files.Folder>
38
39      <Files.File name=".env" status="ignored" />
40      <Files.File name=".eslintrc.cjs" />
41      <Files.File name="index.html" />
42      <Files.File name="package.json" status="modified" />
43      <Files.File name="tsconfig.json" />
44      <Files.File name="vite.config.ts" />
45    </Files>
46  );
47}

Installation

pnpm dlx mateui add files

Anatomy

1import { Files } from '@/components/ui/files';

1<Files defaultValue="src/components">
2  <Files.Folder name="src">
3    <Files.Folder name="components">
4      <Files.File name="button.tsx" />
5      <Files.File name="card.tsx" />
6    </Files.Folder>
7    <Files.File name="index.ts" />
8  </Files.Folder>
9  <Files.File name="package.json" />
10</Files>

Features

Expandable folders - Click to expand/collapse nested structures
Git status indicators - Show file modification states
Smooth animations - Animated expand/collapse transitions
Auto-expand - Use defaultValue to expand specific paths on load

API Reference

Files

Prop	Type	Default	Description
`defaultValue`	`string`	-	Path to expand by default (e.g., "src/components")
`className`	`string`	-	Additional CSS classes

Files.Folder

Prop	Type	Default	Description
`name`	`string`	-	Folder name
`path`	`string`	-	Optional explicit path
`status`	`GitStatus`	-	Git status indicator
`className`	`string`	-	Additional CSS classes
`children`	`ReactNode`	-	Nested files and folders

Files.File

Prop	Type	Default	Description
`name`	`string`	-	File name
`onClick`	`() => void`	-	Click handler
`status`	`GitStatus`	-	Git status indicator
`className`	`string`	-	Additional CSS classes

Git Status Types

Each status has a unique color and letter indicator:

M (Modified) - Yellow
D (Deleted) - Red with strikethrough
A (Added) - Green
U (Untracked) - Green
R (Renamed) - Blue
I (Ignored) - Gray

PreviousDropdown Menu NextInput