---
title: Árvore
description: Exiba hierarquias de arquivos e pastas com expansão/recolhimento interativos e navegação completa pelo teclado, ideal para documentar estruturas de projetos.
---

> **For AI agents:** the complete documentation index is at [llms.txt](/docs/llms.txt). Append `.md` to any page URL for its markdown version.

Tree exibe hierarquias de arquivos e pastas com expansão/recolhimento interativos e navegação completa pelo teclado. Ele foi projetado para documentar estruturas de projetos, mostrar layouts de diretórios ou explicar onde os arquivos devem ser colocados em uma base de código.

Use Tree para:
- **Mostrar a estrutura do projeto** em guias de introdução
- **Explicar a organização dos arquivos** em tutoriais
- **Documentar a saída da CLI** que mostra árvores de diretórios
- **Ilustrar onde adicionar arquivos** em guias de configuração

## Uso

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

## Árvore básica

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

## Exemplo de estrutura de projeto

Mostre aos leitores como um projeto fica após a configuração:

<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 versus blocos de código

| Recurso | Tree | Bloco de código |
|---------|------|-----------------|
| Interativo | Sim (expansão/recolhimento) | Não |
| Navegação pelo teclado | Suporte completo | Não |
| Hierarquia visual | Ícones + indentação | Apenas texto |
| Ideal para | Documentação | Referências rápidas em linha |

Use Tree para a documentação principal da estrutura. Use blocos de código para referências rápidas em linha, como "crie `src/index.ts`".

## Navegação pelo teclado

O componente Tree oferece suporte completo à navegação pelo teclado:

| Tecla | Ação |
|-----|--------|
| `Arrow Down` | Mover para o próximo item |
| `Arrow Up` | Mover para o item anterior |
| `Arrow Right` | Expandir a pasta ou mover para o primeiro item filho |
| `Arrow Left` | Recolher a pasta ou mover para o item pai |
| `Home` | Ir para o primeiro item |
| `End` | Ir para o último item visível |
| `Enter` / `Space` | Alternar a expansão/recolhimento da pasta |
| Digitar caracteres | Ir para o item correspondente |

## Props

### TreeFolder

<ParamField name="name" type="string" required>
  Nome da pasta exibido na árvore.
</ParamField>

<ParamField name="defaultOpen" type="boolean" default="false">
  Inicia no estado expandido.
</ParamField>

<ParamField name="openable" type="boolean" default="true">
  Indica se a pasta pode ser alternada.
</ParamField>

### TreeFile

<ParamField name="name" type="string" required>
  Nome do arquivo exibido na árvore.
</ParamField>

## O que vem a seguir?

<Columns cols={2}>
  <Card title="Visão geral dos componentes" icon="puzzle-piece" href="/pt/components/overview">
    Consulte todos os componentes disponíveis
  </Card>
  <Card title="Noções básicas de MDX" icon="file-code" href="/pt/content/mdx-basics">
    Aprenda a usar componentes em MDX
  </Card>
</Columns>