> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify-mintlify-b25c6564.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Árbol

> Usa el componente de árbol para mostrar estructuras jerárquicas de archivos y carpetas con nodos plegables y resaltado de sintaxis para los nombres de ruta.

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.

Puedes crear árboles con una lista de Markdown o con los componentes `Tree.Folder` y `Tree.File`. `<Tree>` y `<FileTree>` son alias, por lo que cualquiera de las etiquetas funciona con cualquiera de las sintaxis.

<div id="markdown-list-syntax">
  ## Sintaxis de lista de Markdown
</div>

Escribe una lista de Markdown anidada dentro de `<FileTree>` (o `<Tree>`) para describir una estructura de carpetas. Añade una barra al final para indicar una carpeta o anida elementos debajo de ella. Las carpetas que contienen elementos anidados se expanden de forma predeterminada.

<FileTree>
  * docs/
    * index.mdx
    * guides/
      * configuration.mdx
  * docs.config.ts
</FileTree>

```mdx File tree example theme={null}
<FileTree>

- docs/
  - index.mdx
  - guides/
    - configuration.mdx
- docs.config.ts

</FileTree>
```

Deja una línea en blanco después de la etiqueta de apertura y antes de la de cierre para que la lista se procese como Markdown. El formato en línea como `` `código` ``, `**negrita**` o `_cursiva_` se elimina de los nombres, así que úsalos solo cuando se muestren correctamente en tu compilación.

<div id="basic-tree">
  ## Árbol básico
</div>

<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>

```mdx Tree example theme={null}
<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>
```

<div id="nested-folders">
  ## Carpetas anidadas
</div>

Crea estructuras de carpetas muy profundas anidando componentes `Tree.Folder` unos dentro de otros.

<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>

```mdx Nested folders example theme={null}
<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>
```

<div id="keyboard-navigation">
  ## Navegación con el teclado
</div>

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.

<div id="properties">
  ## Propiedades
</div>

<div id="treefolder">
  ### Tree.Folder
</div>

<ResponseField name="name" type="string" required>
  El nombre de la carpeta que se muestra en el árbol.
</ResponseField>

<ResponseField name="defaultOpen" type="boolean" default="false">
  Indica si la carpeta se expande de forma predeterminada.
</ResponseField>

<ResponseField name="openable" type="boolean" default="true">
  Indica si los usuarios pueden abrir y cerrar la carpeta. Configúralo en false para carpetas no interactivas.
</ResponseField>

<div id="treefile">
  ### Tree.File
</div>

<ResponseField name="name" type="string" required>
  El nombre del archivo que se muestra en el árbol.
</ResponseField>