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

<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

<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

<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.

<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.

<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

<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 pour la syntaxe Markdown, les images et le code.
• docs.json.