---
title: Tree
description: Muestra jerarquías de archivos y carpetas con expansión/colapso interactivo y navegación por teclado. Ideal para documentar la estructura de proyectos.
---

Tree muestra jerarquías de archivos y carpetas con expansión/colapso interactivo y navegación completa por teclado. Está diseñado para documentar estructuras de proyectos, mostrar distribuciones de directorios o explicar dónde deben ir los archivos en una base de código.

Usa Tree cuando:
- **Muestres la estructura del proyecto** en guías de inicio
- **Expliques la organización de archivos** en tutoriales
- **Documentes la salida del CLI** que muestra árboles de directorios
- **Ilustres dónde añadir archivos** en guías de configuración

## Uso

```mdx
<Tree>
  <TreeFolder name="src" defaultOpen>
    <TreeFile name="index.ts" />
  </TreeFolder>
</Tree>
```

## Tree básico

<Tree>
  <TreeFolder name="src" defaultOpen>
    <TreeFile name="index.ts" />
    <TreeFile name="config.ts" />
  </TreeFolder>
  <TreeFile name="package.json" />
</Tree>

```mdx
<Tree>
  <TreeFolder name="src" defaultOpen>
    <TreeFile name="index.ts" />
    <TreeFile name="config.ts" />
  </TreeFolder>
  <TreeFile name="package.json" />
</Tree>
```

## Ejemplo de estructura de proyecto

Muestra a los lectores cómo se ve un proyecto después de la configuración:

<Tree>
  <TreeFolder name="my-app" defaultOpen>
    <TreeFolder name="src" defaultOpen>
      <TreeFile name="index.ts" />
      <TreeFile name="config.ts" />
    </TreeFolder>
    <TreeFile name="package.json" />
    <TreeFile name="README.md" />
  </TreeFolder>
</Tree>

## Tree vs bloques de código

| Característica | Tree | Bloque de código |
|---------|------|------------|
| Interactivo | Sí (expandir/colapsar) | No |
| Navegación por teclado | Soporte completo | No |
| Jerarquía visual | Iconos + sangría | Solo texto |
| Mejor para | Documentación | Referencias rápidas en línea |

Usa Tree para la documentación principal de estructura. Usa bloques de código para referencias rápidas en línea como "crea `src/index.ts`".

## Navegación por teclado

El componente Tree admite navegación completa por teclado:

| Tecla | Acción |
|-----|--------|
| `Arrow Down` | Ir al siguiente elemento |
| `Arrow Up` | Ir al elemento anterior |
| `Arrow Right` | Expandir carpeta o ir al primer hijo |
| `Arrow Left` | Colapsar carpeta o ir al elemento padre |
| `Home` | Ir al primer elemento |
| `End` | Ir al último elemento visible |
| `Enter` / `Space` | Alternar expansión/colapso de carpeta |
| Escribir caracteres | Saltar al elemento coincidente |

## Props

### TreeFolder

<ParamField name="name" type="string" required>
  Nombre de la carpeta mostrado en el árbol.
</ParamField>

<ParamField name="defaultOpen" type="boolean" default="false">
  Iniciar en estado expandido.
</ParamField>

<ParamField name="openable" type="boolean" default="true">
  Si la carpeta puede alternarse.
</ParamField>

### TreeFile

<ParamField name="name" type="string" required>
  Nombre del archivo mostrado en el árbol.
</ParamField>

## ¿Qué sigue?

<Columns cols={2}>
  <Card title="Descripción general de componentes" icon="puzzle-piece" href="/es/components/overview">
    Explora todos los componentes disponibles
  </Card>
  <Card title="Conceptos básicos de MDX" icon="file-code" href="/es/content/mdx-basics">
    Aprende a usar componentes en MDX
  </Card>
</Columns>