---
title: Komponentenübersicht
description: >-
  Entdecken Sie Jamdesk-MDX-Komponenten wie Karten, Tabs, Hinweise und Codeblöcke für Ihre Dokumentation.
---

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

Jamdesk enthält MDX-Komponenten, die Sie auf jeder Seite verwenden können. Diese Übersicht hilft Ihnen, die passende Komponente für Ihre Inhalte auszuwählen.

## Verwendung

Fügen Sie Komponenten direkt in Ihr MDX ein:

```mdx
<Card title="Quickstart" icon="rocket" href="/quickstart">
  Launch your docs in minutes.
</Card>
```

## Layout und Navigation

<Columns cols={3}>
  <Card title="Accordion" icon="chevron-down" href="/de/components/accordion">
    Einklappbare Inhaltsabschnitte, in denen Benutzer nur das anzeigen, was sie benötigen. Ideal für FAQs, Feature-Listen und Konfigurationsoptionen.
  </Card>
  <Card title="Card" icon="square" href="/de/components/card">
    Erfahren Sie, wie Sie die Card-Komponente verwenden, um anklickbare, formatierte Container mit Icons, Bildern, Links und CTAs in Rasterlayouts zu erstellen.
  </Card>
  <Card title="Columns" icon="columns" href="/de/components/columns">
    Responsives Rasterlayout zur Darstellung von Cards, Tiles und anderen Inhalten nebeneinander. Passt sich automatisch an die Bildschirmgröße an.
  </Card>
  <Card title="Frame" icon="image" href="/de/components/frame">
    Frame umschließt Bilder und Demos mit einem Rahmen und optionalen Beschriftungen, sodass die visuellen Elemente der Dokumentation einheitlich bleiben.
  </Card>
  <Card title="Panel" icon="sidebar" href="/de/components/panel">
    Verwenden Sie Panel, um benutzerdefinierte Inhalte wie Warnungen oder Kurzhinweise in der Seitenleiste zu fixieren, damit sie beim Scrollen sichtbar bleiben.
  </Card>
  <Card title="Steps" icon="list-ol" href="/de/components/steps">
    Nummerierte Schritt-für-Schritt-Anleitungen für Einrichtungsabläufe, Tutorials und Fehlerbehebung. Unterstützt Icons, Codeblöcke und verschachtelte Inhalte.
  </Card>
  <Card title="Tabs" icon="folder" href="/de/components/tabs">
    Umschaltbare Bereiche für sich gegenseitig ausschließende Inhalte wie Paketmanager oder Programmiersprachen. Übereinstimmende Tab-Titel werden auf der gesamten Seite synchronisiert.
  </Card>
  <Card title="Tile" icon="grid-2" href="/de/components/tile">
    Tiles zeigen Inhaltsvorschauen mit einem formatierten Musterhintergrund und einem hervorgehobenen Bildbereich an. Verwenden Sie sie für Integrationen, Vorlagen oder visuelle Galerien.
  </Card>
  <Card title="Tree" icon="folder-tree" href="/de/components/tree">
    Zeigen Sie Datei- und Ordnerhierarchien mit interaktivem Auf- und Zuklappen sowie Tastaturnavigation an. Ideal für die Dokumentation von Projektstrukturen.
  </Card>
  <Card title="View" icon="window-maximize" href="/de/components/view">
    Erstellen Sie Dokumentation, die sich an das Framework oder die Programmiersprachenwahl des Lesers anpasst. Ganze Abschnitte werden abhängig von der Auswahl des Benutzers umgeschaltet.
  </Card>
</Columns>

## Inhalte und Hervorhebungen

<Columns cols={3}>
  <Card title="Badge" icon="tag" href="/de/components/badge">
    Inline-Labels für Status, Kategorien und Metadaten – 11 Farbvarianten, 4 Größen, Icons, pillenförmige und abgerundete Formen sowie Umrisse.
  </Card>
  <Card title="Callouts" icon="circle-info" href="/de/components/callouts">
    Erfahren Sie, wie Sie die Komponenten Note, Tip, Warning, Danger, Check und benutzerdefinierte Callout-Komponenten verwenden, um wichtige Informationen in Ihrer Dokumentation hervorzuheben.
  </Card>
  <Card title="Expandable" icon="expand" href="/de/components/expandable">
    Expandable erstellt eine einfache Ein-/Ausblenden-Funktion für Inhalte, die Leser möglicherweise sehen möchten, die aber für den Hauptablauf nicht erforderlich sind.
  </Card>
  <Card title="Tooltip" icon="message" href="/de/components/tooltip">
    Zeigen Sie Definitionen und Kontext beim Überfahren mit dem Mauszeiger an. Definieren Sie Begriffe, erklären Sie Abkürzungen oder verlinken Sie verwandte Inhalte, ohne die Seite zu überladen.
  </Card>
  <Card title="Update" icon="clock-rotate-left" href="/de/components/update">
    Änderungsprotokolleinträge im Zeitleistenstil mit Datumsangaben, Beschreibungen und Kategorietags. Wird zur Navigation in das Inhaltsverzeichnis integriert.
  </Card>
  <Card title="Visibility" icon="eye" href="/de/components/visibility">
    Zeigen Sie menschlichen Lesern und AI-Agenten auf derselben Seite unterschiedliche Inhalte an. Nur für Agenten bestimmter Kontext, Anweisungen und Definitionen, die nicht in der gerenderten Dokumentation erscheinen.
  </Card>
</Columns>

## Code und Daten

<Columns cols={3}>
  <Card title="CodeGroup" icon="layer-group" href="/de/components/code-group">
    Zeigen Sie Codeblöcke in einer Oberfläche mit Tabs an. Stellen Sie denselben Vorgang in mehreren Programmiersprachen wie cURL, Python und JavaScript dar.
  </Card>
  <Card title="Examples" icon="code" href="/de/components/examples">
    Fixieren Sie Codeblöcke auf Desktopgeräten in einer klebrigen rechten Seitenleiste, damit Leser beim Scrollen darauf zugreifen können. Unterstützt Programmiersprachen in Tabs.
  </Card>
  <Card title="Fields" icon="list" href="/de/components/fields">
    Dokumentieren Sie API-Parameter und Antwortfelder mit den Komponenten ParamField und ResponseField. Unterstützt Typen, Standardwerte und verschachtelte Objekte.
  </Card>
  <Card title="Prompt" icon="wand-magic-sparkles" href="/de/components/prompt">
    Verwenden Sie Prompt, um wiederverwendbare AI-Anweisungen mit Kopierfunktion, integrierten Aktionen zum Öffnen, benutzerdefinierten Zielen, Icons und kompakten Anzeigeoptionen darzustellen.
  </Card>
  <Card title="Tables" icon="table" href="/de/components/tables">
    Organisieren Sie Daten in Zeilen und Spalten. Unterstützt Markdown-Tabellen und Table-Komponenten mit Sortierung, Hervorhebung und Zusammenführung.
  </Card>
</Columns>

## Diagramme und visuelle Elemente

<Columns cols={3}>
  <Card title="Color" icon="palette" href="/de/components/color">
    Die Color-Komponente zeigt Farbpaletten zur Dokumentation von Designsystemen, Markenrichtlinien oder beliebigen Farbspezifikationen an.
  </Card>
  <Card title="Mermaid Diagrams" icon="diagram-project" href="/de/components/mermaid">
    Rendern Sie Flussdiagramme, Sequenzdiagramme, Zeitleisten, Kreisdiagramme und mehr aus textbasierter Mermaid-Syntax. Diagramme werden zur Build-Zeit als SVG erstellt.
  </Card>
  <Card title="D2 Diagrams" icon="diagram-project" href="/de/components/d2">
    Rendern Sie Architekturdiagramme, Flussdiagramme, Sequenzen und SQL-Modelle aus textbasierter D2-Syntax. Diagramme werden als SVG mit automatischer Unterstützung für helle und dunkle Themes gerendert.
  </Card>
</Columns>

## Interaktion

<Columns cols={3}>
  <Card title="EmailSubscribe" icon="envelope" href="/de/components/email-subscribe">
    Fügen Sie jeder Dokumentationsseite mit der EmailSubscribe-Komponente ein Formular zur Anmeldung für Newsletter oder Änderungsprotokolle hinzu: native Erfassung für sieben Anbieter und Einbettungen für die übrigen.
  </Card>
  <Card title="Widget" icon="bullhorn" href="/de/components/widget">
    Betten Sie eine Live-Demo des What's New-Widgets mit der Widget-MDX-Komponente in Ihre Dokumentation ein: eine Schaltfläche, die Ihr Änderungsprotokoll in einem Modal öffnet, ohne dass ein Script-Tag erforderlich ist.
  </Card>
</Columns>