Files

An interactive file tree component for displaying hierarchical folder and file structures.

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