---
title: Tree
description: Datei- und Ordnerhierarchien mit interaktivem Ein-/Ausklappen und Tastaturnavigation anzeigen – ideal für die Dokumentation von Projektstrukturen.
---

> **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 zeigt Datei- und Ordnerhierarchien mit interaktivem Ein-/Ausklappen und vollständiger Tastaturnavigation an. Die Komponente eignet sich für die Dokumentation von Projektstrukturen, die Darstellung von Verzeichnislayouts oder die Erklärung, wo Dateien in einer Codebasis abgelegt werden sollen.

Verwenden Sie Tree zum:
- **Darstellen von Projektstrukturen** in Anleitungen für den Einstieg
- **Erklären der Dateiorganisation** in Tutorials
- **Dokumentieren von CLI-Ausgaben**, die Verzeichnisbäume anzeigen
- **Veranschaulichen, wo Dateien hinzugefügt werden** in Konfigurationsanleitungen

## Verwendung

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

## Grundlegende Tree-Komponente

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

## Beispiel für eine Projektstruktur

Zeigen Sie Lesern, wie ein Projekt nach der Einrichtung aussieht:

<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 im Vergleich zu Codeblöcken

| Funktion | Tree | Codeblock |
|---------|------|------------|
| Interaktiv | Ja (Ein-/Ausklappen) | Nein |
| Tastaturnavigation | Vollständig unterstützt | Nein |
| Visuelle Hierarchie | Symbole + Einrückung | Nur Text |
| Am besten geeignet für | Dokumentation | Schnelle Inline-Referenzen |

Verwenden Sie Tree für die primäre Dokumentation von Strukturen. Verwenden Sie Codeblöcke für schnelle Inline-Referenzen wie „create `src/index.ts`“.

## Tastaturnavigation

Die Tree-Komponente unterstützt die vollständige Tastaturnavigation:

| Taste | Aktion |
|-----|--------|
| `Arrow Down` | Zum nächsten Element wechseln |
| `Arrow Up` | Zum vorherigen Element wechseln |
| `Arrow Right` | Ordner aufklappen oder zum ersten untergeordneten Element wechseln |
| `Arrow Left` | Ordner zuklappen oder zum übergeordneten Element wechseln |
| `Home` | Zum ersten Element springen |
| `End` | Zum letzten sichtbaren Element springen |
| `Enter` / `Space` | Ordner auf- oder zuklappen |
| Type characters | Zum passenden Element springen |

## Props

### TreeFolder

<ParamField name="name" type="string" required>
  Im Tree angezeigter Ordnername.
</ParamField>

<ParamField name="defaultOpen" type="boolean" default="false">
  Im ausgeklappten Zustand starten.
</ParamField>

<ParamField name="openable" type="boolean" default="true">
  Gibt an, ob der Ordner auf- und zugeklappt werden kann.
</ParamField>

### TreeFile

<ParamField name="name" type="string" required>
  Im Tree angezeigter Dateiname.
</ParamField>

## Wie geht es weiter?

<Columns cols={2}>
  <Card title="Komponentenübersicht" icon="puzzle-piece" href="/de/components/overview">
    Alle verfügbaren Komponenten durchsuchen
  </Card>
  <Card title="MDX-Grundlagen" icon="file-code" href="/de/content/mdx-basics">
    Erfahren, wie Komponenten in MDX verwendet werden
  </Card>
</Columns>