mintlify__docs/fr/components/index.mdx

---
title: "Aperçu"
description: "Parcourez la bibliothèque complète de composants Mintlify pour la mise en page, la mise en avant, la documentation d'API et la navigation dans vos pages MDX."
keywords:
  ["composants MDX", "composants de documentation", "composants d’interface utilisateur", "composants"]
boost: 3
---

Mintlify fournit des composants MDX intégrés pour vos pages de documentation. Utilisez ces composants pour structurer le contenu, attirer l’attention sur les informations importantes, documenter vos API et guider la navigation.

<div id="structure-your-content">
  ## Structurez votre contenu
</div>

<Card title="Tabs" icon="folder" href="/fr/components/tabs">
  Organisez du contenu connexe dans des vues à onglets entre lesquelles vous pouvez basculer.
</Card>

<Card title="Groupes de code" icon="code" href="/fr/components/code-groups">
  Affichez des exemples de code dans plusieurs langages.
</Card>

<Card title="Étapes" icon="list-ordered" href="/fr/components/steps">
  Affichez des instructions séquentielles dans un format numéroté.
</Card>

<Card title="Colonnes" icon="columns-3" href="/fr/components/columns">
  Disposez le contenu côte à côte dans des mises en page adaptatives.
</Card>

<Card title="Panneau" icon="panel-right" href="/fr/components/panel">
  Créez des panneaux latéraux pour du contenu complémentaire.
</Card>

<div id="draw-attention">
  ## Attirer l&#39;attention
</div>

<Card title="Encadrés" icon="message-square-warning" href="/fr/components/callouts">
  Mettez en avant des informations importantes à l’aide d’alertes stylisées.
</Card>

<Card title="Bannière" icon="flag" href="/fr/components/banner">
  Affichez des annonces bien visibles en haut des pages.
</Card>

<Card title="Badge" icon="award" href="/fr/components/badge">
  Ajoutez des libellés en ligne et des indicateurs d’état.
</Card>

<Card title="Mise à jour" icon="bell" href="/fr/components/update">
  Mettez en évidence le contenu nouveau ou mis à jour.
</Card>

<Card title="Cadres" icon="frame" href="/fr/components/frames">
  Ajoutez des bordures et du style aux images et au contenu.
</Card>

<Card title="Infobulles" icon="message-circle" href="/fr/components/tooltips">
  Affichez des informations supplémentaires au survol.
</Card>

<div id="showcase-ai-prompts">
  ## Mettre en avant des prompts IA
</div>

<Card title="Prompt" icon="sparkles" href="/fr/components/prompt">
  Affichez des prompts IA copiables avec l’intégration Cursor.
</Card>

<div id="show-and-hide-content">
  ## Afficher et masquer le contenu
</div>

<Card title="Accordions" icon="chevron-down" href="/fr/components/accordions">
  Sections extensibles pour dévoiler progressivement le contenu.
</Card>

<Card title="Expandables" icon="chevrons-down" href="/fr/components/expandables">
  Afficher ou masquer le contenu détaillé à la demande.
</Card>

<Card title="View" icon="eye" href="/fr/components/view">
  Afficher le contenu de manière conditionnelle, en fonction du contexte.
</Card>

<Card title="Visibility" icon="eye-off" href="/fr/components/visibility">
  Contrôlez le contenu affiché aux humains par rapport aux agents IA.
</Card>

<div id="document-your-api">
  ## Documentez votre API
</div>

<Card title="Champs" icon="text-cursor-input" href="/fr/components/fields">
  Affichez les définitions des paramètres et propriétés.
</Card>

<Card title="Réponses" icon="arrow-left-right" href="/fr/components/responses">
  Documentez les structures de réponse de votre API et leurs champs.
</Card>

<Card title="Exemples" icon="file-code" href="/fr/components/examples">
  Affichez des exemples de requêtes et de réponses côte à côte.
</Card>

<div id="link-to-other-pages">
  ## Lien vers d&#39;autres pages
</div>

<Card title="Cartes" icon="square" href="/fr/components/cards">
  Mettez en valeur du contenu avec des conteneurs personnalisables et des icônes.
</Card>

<Card title="Tuiles" icon="layout-grid" href="/fr/components/tiles">
  Affichez du contenu sous forme de grille de tuiles cliquables.
</Card>

<div id="add-visual-context">
  ## Ajouter un contexte visuel
</div>

<Card title="Icônes" icon="smile" href="/fr/components/icons">
  Ajoutez des indicateurs visuels à l’aide de la bibliothèque d’icônes Lucide.
</Card>

<Card title="Diagrammes Mermaid" icon="git-branch" href="/fr/components/mermaid-diagrams">
  Créez des organigrammes, des diagrammes de séquence et bien plus encore.
</Card>

<Card title="Couleur" icon="palette" href="/fr/components/color">
  Affichez des nuanciers de couleur avec des codes hexadécimaux.
</Card>

<Card title="Tree" icon="folder-tree" href="/fr/components/tree">
  Affichez des structures hiérarchiques de fichiers et de dossiers.
</Card>