---
title: Étapes
description: "Guides étape par étape numérotés pour configuration, tutoriels et dépannage. Compatibles avec icônes, blocs de code et contenu imbriqué."
---

Utilisez Steps pour des guides numérotés clairs, tels que les flux de configuration et de dépannage.

## Usage

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

## Steps de base

<Steps>
  <Step title="Installer le package">
    ```bash
    npm install @jamdesk/cli
    ```
  </Step>
  <Step title="Initialiser votre projet">
    ```bash
    jamdesk init
    ```
  </Step>
  <Step title="Démarrer le serveur de développement">
    ```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 sans titres

Les steps fonctionnent également sans titres :

<Steps>
  <Step>
    Clonez le dépôt depuis GitHub.
  </Step>
  <Step>
    Installez les dépendances avec `npm install`.
  </Step>
  <Step>
    Lancez le serveur de développement.
  </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>
```

## Contenu enrichi dans les steps

Chaque step peut contenir n'importe quel contenu :

<Steps>
  <Step title="Configurer votre API">
    Créez un fichier de configuration :

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

    <Note>
    Gardez votre clé API secrète ! Ne la committez jamais dans le contrôle de version.
    </Note>
  </Step>
  <Step title="Effectuer votre première requête">
    Utilisez le SDK pour effectuer une requête :

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

## Steps avec icônes

Utilisez des icônes à la place des numéros pour une variété visuelle :

<Steps>
  <Step title="Cloner le dépôt" icon="code-branch">
    Clonez depuis GitHub vers votre machine locale.
  </Step>
  <Step title="Installer les dépendances" icon="download">
    Exécutez la commande d'installation du gestionnaire de packages.
  </Step>
  <Step title="Commencer à développer" icon="rocket">
    Lancez le serveur de développement.
  </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>
```

## Taille des titres

Contrôlez la hiérarchie des titres avec `titleSize` sur le conteneur Steps :

<Steps titleSize="h3">
  <Step title="Première étape">
    Ce titre est rendu comme un élément h3.
  </Step>
  <Step title="Deuxième étape">
    Utile pour le SEO et la structure du document.
  </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">
  Élément de titre pour les titres des steps.
</ParamField>

### Step

<ParamField name="title" type="string">
  Titre optionnel du step.
</ParamField>

<ParamField name="icon" type="string">
  Nom d'icône, URL ou chemin (remplace le numéro du step).
</ParamField>

<ParamField name="iconType" type="solid | regular | light | thin | sharp-solid | duotone | brands" default="solid">
  Style d'icône Font Awesome.
</ParamField>

<ParamField name="titleSize" type="p | h2 | h3">
  Remplace le titleSize du Steps parent. Hérite du parent si non défini.
</ParamField>

<ParamField name="stepNumber" type="number">
  Définit manuellement le numéro du step (attribué automatiquement si omis).
</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>