---
title: Steps
description: Nummerierte Schritt-für-Schritt-Anleitungen für Einrichtungsabläufe, Tutorials und Fehlerbehebung. Unterstützt Symbole, Codeblöcke und verschachtelte Inhalte.
---

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

Verwenden Sie Steps für klare, nummerierte Anleitungen, etwa für Einrichtungs- und Fehlerbehebungsabläufe.

## Verwendung

```mdx
<Steps>
  <Step title="Install">Add the package.</Step>
  <Step title="Configure">Set your options.</Step>
  <Step title="Run">Start the build.</Step>
</Steps>
```

## Grundlegende Steps

<Steps>
  <Step title="Paket installieren">
    ```bash
    npm install @jamdesk/cli
    ```
  </Step>
  <Step title="Projekt initialisieren">
    ```bash
    jamdesk init
    ```
  </Step>
  <Step title="Entwicklungsserver starten">
    ```bash
    jamdesk dev
    ```
  </Step>
</Steps>

````mdx
<Steps>
  <Step title="Install the package">
    ```bash
    npm install @jamdesk/cli
    ```
  </Step>
  <Step title="Initialize your project">
    ```bash
    jamdesk init
    ```
  </Step>
  <Step title="Start the dev server">
    ```bash
    jamdesk dev
    ```
  </Step>
</Steps>
````

## Steps ohne Titel

Steps funktionieren auch ohne Titel:

<Steps>
  <Step>
    Klonen Sie das Repository von GitHub.
  </Step>
  <Step>
    Installieren Sie die Abhängigkeiten mit `npm install`.
  </Step>
  <Step>
    Starten Sie den Entwicklungsserver.
  </Step>
</Steps>

```mdx
<Steps>
  <Step>
    Clone the repository from GitHub.
  </Step>
  <Step>
    Install dependencies with `npm install`.
  </Step>
  <Step>
    Run the development server.
  </Step>
</Steps>
```

## Umfangreiche Inhalte in Steps

Jeder Step kann beliebige Inhalte enthalten:

<Steps>
  <Step title="API konfigurieren">
    Erstellen Sie eine Konfigurationsdatei:

    ```json config.json
    {
      "apiKey": "your-api-key",
      "endpoint": "https://api.example.com"
    }
    ```

    <Note>
    Bewahren Sie Ihren API-Schlüssel geheim auf! Committen Sie ihn niemals in die Versionsverwaltung.
    </Note>
  </Step>
  <Step title="Ihre erste Anfrage senden">
    Verwenden Sie das SDK, um eine Anfrage zu senden:

    ```javascript
    const response = await client.getData();
    console.log(response);
    ```
  </Step>
</Steps>

## Steps mit Symbolen

Verwenden Sie anstelle von Zahlen Symbole für eine visuelle Abwechslung:

<Steps>
  <Step title="Repository klonen" icon="code-branch">
    Klonen Sie das Repository von GitHub auf Ihren lokalen Rechner.
  </Step>
  <Step title="Abhängigkeiten installieren" icon="download">
    Führen Sie den Installationsbefehl des Paketmanagers aus.
  </Step>
  <Step title="Entwicklung starten" icon="rocket">
    Starten Sie den Entwicklungsserver.
  </Step>
</Steps>

```mdx
<Steps>
  <Step title="Clone the repository" icon="code-branch">
    Clone from GitHub to your local machine.
  </Step>
  <Step title="Install dependencies" icon="download">
    Run the package manager install command.
  </Step>
  <Step title="Start developing" icon="rocket">
    Launch the development server.
  </Step>
</Steps>
```

## Titelgröße

Steuern Sie die Überschriftenhierarchie mit `titleSize` am Steps-Container:

<Steps titleSize="h3">
  <Step title="Erster Step">
    Dieser Titel wird als h3-Element gerendert.
  </Step>
  <Step title="Zweiter Step">
    Nützlich für SEO und die Dokumentstruktur.
  </Step>
</Steps>

```mdx
<Steps titleSize="h3">
  <Step title="First Step">
    This title renders as an h3 element.
  </Step>
  <Step title="Second Step">
    Useful for SEO and document structure.
  </Step>
</Steps>
```

## Props

### Steps

<ParamField name="titleSize" type="p | h2 | h3" default="p">
  Überschriftenelement für Step-Titel.
</ParamField>

### Step

<ParamField name="title" type="string">
  Optionaler Step-Titel.
</ParamField>

<ParamField name="icon" type="string">
  Symbolname, URL oder Pfad (ersetzt die Step-Nummer).
</ParamField>

<ParamField name="iconType" type="solid | regular | light | thin | sharp-solid | duotone | brands" default="solid">
  Symbolstil von Font Awesome.
</ParamField>

<ParamField name="titleSize" type="p | h2 | h3">
  Überschreibt die titleSize des übergeordneten Steps-Containers. Wird vom übergeordneten Container übernommen, wenn nicht festgelegt.
</ParamField>

<ParamField name="stepNumber" type="number">
  Step-Nummer manuell festlegen (wird automatisch zugewiesen, wenn sie nicht angegeben ist).
</ParamField>

## Wie geht es weiter?

<Columns cols={2}>
  <Card title="Übersicht der Komponenten" 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 Sie, wie Sie Komponenten in MDX verwenden
  </Card>
</Columns>