> ## Documentation Index
> Fetch the complete documentation index at: https://smartac-justin-client-exports.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.

<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 está expandida de forma predeterminada.
</ResponseField>

<ResponseField name="openable" type="boolean" default="true">
  Indica si la carpeta se puede abrir y cerrar. 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>