Saltar al contenido principal
Utiliza componentes de árbol para mostrar estructuras jerárquicas como sistemas de archivos, directorios de proyectos o contenido anidado. El componente de árbol ofrece compatibilidad con navegación mediante teclado y funciones de accesibilidad.

​
Árbol básico

app
layout.tsx
page.tsx
global.css
package.json
tsconfig.json
Tree example
<Tree>
  <Tree.Folder name="app" defaultOpen>
    <Tree.File name="layout.tsx" />
    <Tree.File name="page.tsx" />
    <Tree.File name="global.css" />
  </Tree.Folder>
  <Tree.Folder name="lib">
    <Tree.File name="utils.ts" />
    <Tree.File name="db.ts" />
  </Tree.Folder>
  <Tree.File name="package.json" />
  <Tree.File name="tsconfig.json" />
</Tree>

​
Carpetas anidadas

Crea estructuras de carpetas muy profundas anidando componentes Tree.Folder unos dentro de otros.
app
layout.tsx
page.tsx
api
route.ts
package.json
Nested folders example
<Tree>
  <Tree.Folder name="app" defaultOpen>
    <Tree.File name="layout.tsx" />
    <Tree.File name="page.tsx" />
    <Tree.Folder name="api" defaultOpen>
      <Tree.Folder name="auth">
        <Tree.File name="route.ts" />
      </Tree.Folder>
      <Tree.File name="route.ts" />
    </Tree.Folder>
    <Tree.Folder name="components">
      <Tree.File name="button.tsx" />
      <Tree.File name="dialog.tsx" />
      <Tree.File name="tabs.tsx" />
    </Tree.Folder>
  </Tree.Folder>
  <Tree.File name="package.json" />
</Tree>
El componente de árbol admite la navegación con el teclado.
  • Teclas de flecha: Navega hacia arriba y hacia abajo por los elementos visibles.
  • Flecha derecha: Expande una carpeta cerrada o se desplaza al primer elemento hijo de una carpeta abierta.
  • Flecha izquierda: Contrae una carpeta abierta o se desplaza a la carpeta padre.
  • Inicio (Home): Salta al primer elemento del árbol.
  • Fin (End): Salta al último elemento visible del árbol.
  • Enter/Espacio: Alterna el estado de la carpeta entre abierta y cerrada.
  • *: Expande todas las carpetas del mismo nivel en el nivel actual.
  • Búsqueda incremental: Escribe caracteres para saltar a los elementos que comienzan con esos caracteres.

​
Propiedades

​
Tree.Folder

​
name
string
requerido
El nombre de la carpeta que se muestra en el árbol.
​
defaultOpen
boolean
predeterminado:"false"
Indica si la carpeta está expandida de forma predeterminada.
​
openable
boolean
predeterminado:"true"
Indica si la carpeta se puede abrir y cerrar. Configúralo en false para carpetas no interactivas.

​
Tree.File

​
name
string
requerido
El nombre del archivo que se muestra en el árbol.