---
title: Albero
description: Visualizza gerarchie di file e cartelle con espansione e compressione interattive e navigazione completa da tastiera.
---

> **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 visualizza gerarchie di file e cartelle con espansione e compressione interattive e navigazione completa da tastiera. È progettato per documentare strutture di progetto, mostrare layout di directory o spiegare dove collocare i file in una codebase.

Usa Tree per:
- **Mostrare la struttura del progetto** nelle guide introduttive
- **Spiegare l'organizzazione dei file** nei tutorial
- **Documentare l'output della CLI** che mostra alberi di directory
- **Illustrare dove aggiungere i file** nelle guide di configurazione

## Utilizzo

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

## Albero di base

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

## Esempio di struttura del progetto

Mostra ai lettori l'aspetto di un progetto dopo la configurazione:

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

## Albero e blocchi di codice

| Funzionalità | Tree | Blocco di codice |
|---------|------|------------|
| Interattivo | Sì (espansione/compressione) | No |
| Navigazione da tastiera | Supporto completo | No |
| Gerarchia visiva | Icone + rientro | Solo testo |
| Ideale per | Documentazione | Riferimenti rapidi in linea |

Usa Tree per documentare la struttura principale. Usa i blocchi di codice per riferimenti rapidi in linea, come "crea `src/index.ts`".

## Navigazione da tastiera

Il componente Tree supporta la navigazione completa da tastiera:

| Tasto | Azione |
|-----|--------|
| `Arrow Down` | Passa all'elemento successivo |
| `Arrow Up` | Passa all'elemento precedente |
| `Arrow Right` | Espande la cartella o passa al primo elemento figlio |
| `Arrow Left` | Comprimi la cartella o passa all'elemento padre |
| `Home` | Vai al primo elemento |
| `End` | Vai all'ultimo elemento visibile |
| `Enter` / `Space` | Attiva o disattiva l'espansione della cartella |
| Digita caratteri | Vai all'elemento corrispondente |

## Proprietà

### TreeFolder

<ParamField name="name" type="string" required>
  Nome della cartella visualizzato nell'albero.
</ParamField>

<ParamField name="defaultOpen" type="boolean" default="false">
  Avvia nello stato espanso.
</ParamField>

<ParamField name="openable" type="boolean" default="true">
  Indica se la cartella può essere attivata o disattivata.
</ParamField>

### TreeFile

<ParamField name="name" type="string" required>
  Nome del file visualizzato nell'albero.
</ParamField>

## Prossimi passi

<Columns cols={2}>
  <Card title="Panoramica dei componenti" icon="puzzle-piece" href="/it/components/overview">
    Esplora tutti i componenti disponibili
  </Card>
  <Card title="Nozioni di base su MDX" icon="file-code" href="/it/content/mdx-basics">
    Scopri come usare i componenti in MDX
  </Card>
</Columns>