MDX-Komponenten verwenden#

So nutzt du die verfügbaren React-Komponenten in deinen .mdx-Dateien.

Import#

Importiere Komponenten am Anfang deiner .mdx-Datei:

Alert#

Hinweisbox mit optionalem Inhalt und Link.

Verfügbare Typen: info, success, warning, danger.

Callout#

Hinweisblock mit Icon, farbigem Rahmen und frei gestaltbarem Inhalt (über children).

Verfügbare Typen: default (Tipp), info, important, warning, error.

Blockquote-Syntax (Shortcut)#

Alternativ wird die GitHub-kompatible Blockquote-Syntax automatisch in <Callout> umgewandelt:

Mapping: NOTE → info, TIP → default, IMPORTANT → important, WARNING → warning, CAUTION → error.

Card#

Karten für verlinkte Inhalte.

Mehrere Karten nebeneinander:

DocTabs#

Inhalte in Tabs organisieren.

DocSteps#

Nummerierte Schritte aus Markdown-Überschriften. Die Komponente wandelt h3/h4-Überschriften innerhalb des Blocks automatisch in nummerierte Schritte um.

Steps#

Schrittanzeige mit Beschreibung und optionalen Buttons.

Timeline#

Chronologische Darstellung von Ereignissen oder Versionen.

Collapse#

Ein-/ausklappbarer Bereich.

Alternativ mit nativem HTML:

Box#

Einfache Inhaltsbox mit Titel.

Grid#

Responsives Zwei-Spalten-Layout.

Video#

HTML5-Video mit optionalen Untertiteln.

Hero#

Hero-Banner für Übersichtsseiten. Alle Props akzeptieren beliebige React-Nodes (nicht nur Strings).

Optionale Props: Image (ReactNode für ein Bild rechts neben dem Text), Buttons (ReactNode für Aktions-Buttons unterhalb).

Weitere Komponenten#

Für Landingpages und Marketing-Seiten stehen zusätzliche Komponenten bereit. Siehe Theme-Komponenten für die vollständige API-Referenz:

• CallToAction — Handlungsaufforderung
• Faqs — FAQ-Akkordeon
• Features — Feature-Übersicht
• ReviewCarousel — Testimonial-Carousel
• LogoCloud — Logo-Leiste
• DynamicTeaser — Automatische Teaser aus Seitenverzeichnis