Files

Un componente de árbol de archivos para mostrar estructuras de archivos jerárquicas con carpetas y archivos.

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

default.tsx

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}

Instalación

pnpm dlx nachui add files

Anatomía

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>

Características

Carpetas expandibles - Haz clic para expandir/colapsar estructuras anidadas
Indicadores de estado Git - Muestra estados de modificación de archivos
Animaciones suaves - Transiciones animadas de expandir/colapsar
Auto-expansión - Usa defaultValue para expandir rutas específicas al cargar

Referencia de API

Files

Prop	Tipo	Por defecto	Descripción
`defaultValue`	`string`	-	Ruta a expandir por defecto (ej: "src/components")
`className`	`string`	-	Clases CSS adicionales

Files.Folder

Prop	Tipo	Por defecto	Descripción
`name`	`string`	-	Nombre de la carpeta
`path`	`string`	-	Ruta explícita opcional
`status`	`GitStatus`	-	Indicador de estado Git
`className`	`string`	-	Clases CSS adicionales
`children`	`ReactNode`	-	Archivos y carpetas anidados

Files.File

Prop	Tipo	Por defecto	Descripción
`name`	`string`	-	Nombre del archivo
`onClick`	`() => void`	-	Manejador de clic
`status`	`GitStatus`	-	Indicador de estado Git
`className`	`string`	-	Clases CSS adicionales

Tipos de Estado Git

Cada estado tiene un color único e indicador de letra:

M (Modificado) - Amarillo
D (Eliminado) - Rojo con tachado
A (Agregado) - Verde
U (Sin rastrear) - Verde
R (Renombrado) - Azul
I (Ignorado) - Gris

AnteriorDropdown Menu SiguienteInput