---
title: Arborescence
description: "Affichez les hiérarchies de fichiers et dossiers avec développement/réduction interactifs et navigation au clavier. Idéal pour les structures de projet."
---

Tree affiche les hiérarchies de fichiers et de dossiers avec un développement/réduction interactif et une navigation au clavier complète. Il est conçu pour documenter les structures de projet, afficher les arborescences de répertoires ou expliquer où les fichiers doivent se trouver dans une base de code.

Utilisez Tree quand :
- **Afficher la structure du projet** pour les guides de démarrage
- **Expliquer l'organisation des fichiers** dans les tutoriels
- **Documenter la sortie CLI** qui affiche des arborescences de répertoires
- **Illustrer où ajouter des fichiers** dans les guides de configuration

## Utilisation

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

## Arborescence de 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>
```

## Exemple de structure de projet

Montrez aux lecteurs à quoi ressemble un projet après la configuration :

<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 blocs de code

| Fonctionnalité | Tree | Bloc de code |
|---------|------|------------|
| Interactif | Oui (développer/réduire) | Non |
| Navigation au clavier | Support complet | Non |
| Hiérarchie visuelle | Icônes + indentation | Texte uniquement |
| Idéal pour | Documentation | Références rapides en ligne |

Utilisez Tree pour la documentation principale de structure. Utilisez des blocs de code pour des références rapides en ligne comme « créer `src/index.ts` ».

## Navigation au clavier

Le composant Tree prend en charge la navigation au clavier complète :

| Touche | Action |
|-----|--------|
| `Arrow Down` | Passer à l'élément suivant |
| `Arrow Up` | Passer à l'élément précédent |
| `Arrow Right` | Développer le dossier ou passer au premier enfant |
| `Arrow Left` | Réduire le dossier ou passer au parent |
| `Home` | Aller au premier élément |
| `End` | Aller au dernier élément visible |
| `Enter` / `Space` | Basculer le développement/réduction du dossier |
| Saisir des caractères | Aller à l'élément correspondant |

## Props

### TreeFolder

<ParamField name="name" type="string" required>
  Nom du dossier affiché dans l'arborescence.
</ParamField>

<ParamField name="defaultOpen" type="boolean" default="false">
  Démarrer en état développé.
</ParamField>

<ParamField name="openable" type="boolean" default="true">
  Indique si le dossier peut être basculé.
</ParamField>

### TreeFile

<ParamField name="name" type="string" required>
  Nom du fichier affiché dans l'arborescence.
</ParamField>

## Et ensuite ?

<Columns cols={2}>
  <Card title="Vue d'ensemble des composants" icon="puzzle-piece" href="/fr/components/overview">
    Parcourir tous les composants disponibles
  </Card>
  <Card title="Bases MDX" icon="file-code" href="/fr/content/mdx-basics">
    Apprendre à utiliser les composants dans MDX
  </Card>
</Columns>