# Composants MDX

Ces composants s’utilisent directement dans une page `.mdx`, sans `import`. Ils portent les mêmes noms que chez Mintlify. Un attribut marqué « facultatif » peut être omis.

Dans le Markdown publié (`.md`, `llms.txt`, l’assistant), chaque composant devient une forme de Markdown courante : un encadré devient une citation dont la première ligne porte le titre en gras, et une étape devient un élément de liste numérotée.

## Encadrés

`Note`, `Tip`, `Info`, `Warning`, `Danger` et `Check` affichent un encadré. Tous acceptent `title`, facultatif.

| Composant | Style       | Titre par défaut |
| --------- | ----------- | ---------------- |
| `Note`    | Information | Aucun            |
| `Tip`     | Conseil     | Aucun            |
| `Info`    | Information | « Info »         |
| `Check`   | Conseil     | Aucun            |
| `Warning` | Attention   | Aucun            |
| `Danger`  | Danger      | Aucun            |

```mdx
<Note>Une information utile à côté du texte.</Note>

<Warning title="Avant de supprimer">Cette action efface l'index du projet.</Warning>
```

## Étapes

`Steps` numérote ses enfants. Chaque `Step` a un titre obligatoire, et son contenu peut comporter du texte, des blocs de code et des listes.

| Composant | Attribut | Obligatoire |
| --------- | -------- | ----------- |
| `Steps`   | Aucun    | non         |
| `Step`    | `title`  | oui         |

```mdx
<Steps>
  <Step title="Installer">
    Ajoute le paquet à ton projet.
  </Step>
  <Step title="Configurer">
    Écris `docs.json`.
  </Step>
</Steps>
```

## Onglets

`Tabs` affiche un onglet par `Tab`. Deux `Tabs` qui partagent le même `syncKey` changent d’onglet ensemble, par exemple pour passer de npm à Bun partout dans la page.

| Composant | Attribut  | Obligatoire |
| --------- | --------- | ----------- |
| `Tabs`    | `syncKey` | non         |
| `Tab`     | `title`   | oui         |

````mdx
<Tabs syncKey="gestionnaire">
  <Tab title="npm">
    ```bash
    npm install --save-dev @hgdc/docs
    ```
  </Tab>
  <Tab title="Bun">
    ```bash
    bun add --dev @hgdc/docs
    ```
  </Tab>
</Tabs>
````

## Blocs de code

`CodeGroup` regroupe plusieurs blocs de code côte à côte. Il n’a pas d’attribut : les blocs à l’intérieur gardent leur langage et leur bouton **Copier**.

## Cartes

`Card` est une carte avec un titre. Avec `href`, toute la carte est un lien. `CardGroup` les range en grille.

| Composant   | Attribut | Obligatoire | Rôle                                                |
| ----------- | -------- | ----------- | --------------------------------------------------- |
| `Card`      | `title`  | oui         | Titre de la carte.                                  |
| `Card`      | `href`   | non         | Adresse du lien.                                    |
| `Card`      | `icon`   | non         | Accepté pour la compatibilité Mintlify, sans effet. |
| `CardGroup` | `cols`   | non         | Nombre de colonnes, de 1 à 4. Défaut : 2.           |

```mdx
<CardGroup cols={2}>
  <Card title="Avec un lien" href="/guides/publier/">Toute la carte est cliquable.</Card>
  <Card title="Sans lien">Pour présenter une idée.</Card>
</CardGroup>
```

Une valeur de `cols` hors de 1 à 4 est ramenée dans cette plage.

## Colonnes

`Columns` range son contenu en grille, comme `CardGroup`, mais pour des blocs qui ne sont pas des cartes. Même attribut `cols`, de 1 à 4, défaut 2.

## Accordéons

`AccordionGroup` regroupe des `Accordion`. Chaque `Accordion` a un titre obligatoire et peut s’ouvrir par défaut.

| Composant        | Attribut      | Obligatoire | Rôle                                                  |
| ---------------- | ------------- | ----------- | ----------------------------------------------------- |
| `AccordionGroup` | Aucun         | non         | Enveloppe les `Accordion`.                            |
| `Accordion`      | `title`       | oui         | Libellé cliquable.                                    |
| `Accordion`      | `defaultOpen` | non         | `true` pour l’ouvrir au chargement. Défaut : `false`. |

```mdx
<AccordionGroup>
  <Accordion title="Faut-il un compte HGDC pour écrire ?" defaultOpen>
    Non. Le site se construit sans compte. Le compte sert à la console.
  </Accordion>
</AccordionGroup>
```

## Cadre pour une image

`Frame` entoure une image et peut porter une légende.

| Composant | Attribut  | Obligatoire |
| --------- | --------- | ----------- |
| `Frame`   | `caption` | non         |

```mdx
<Frame caption="Le domaine vérifié, avec son certificat">
  ![Onglet Domaines avec le domaine marqué Vérifié](/images/captures/domaine-1.webp)
</Frame>
```

## Voir aussi

- [Écrire une page](/docs/guides/ecrire-une-page/) pour la syntaxe Markdown, les images et le code.
- [docs.json](/docs/reference/docs-json/).