---
title: Vue d'ensemble des composants
description: Composants MDX pour les cartes, onglets, accordéons, encadrés, groupes de code et plus encore. Intégrez-les dans n'importe quelle page.
---

Jamdesk inclut des composants MDX que vous pouvez utiliser dans n'importe quelle page. Cet aperçu vous aide à choisir le bon composant pour votre contenu.

## Utilisation

Intégrez les composants directement dans votre MDX :

```mdx
<Card title="Quickstart" icon="rocket" href="/quickstart">
  Launch your docs in minutes.
</Card>
```

## Composants de mise en page

<Columns cols={3}>
  <Card title="Card" icon="square" href="/fr/components/card">
    Afficher le contenu dans des cartes avec bordure
  </Card>
  <Card title="Tabs" icon="folder" href="/fr/components/tabs">
    Organiser le contenu en sections à onglets
  </Card>
  <Card title="Accordion" icon="chevron-down" href="/fr/components/accordion">
    Sections de contenu repliables
  </Card>
  <Card title="Steps" icon="list-ol" href="/fr/components/steps">
    Guides étape par étape numérotés
  </Card>
  <Card title="Expandable" icon="expand" href="/fr/components/expandable">
    Afficher/masquer du contenu supplémentaire
  </Card>
  <Card title="Frame" icon="image" href="/fr/components/frame">
    Conteneur stylisé avec légende
  </Card>
  <Card title="Panel" icon="sidebar" href="/fr/components/panel">
    Contenu personnalisé de la barre latérale
  </Card>
  <Card title="Tables" icon="table" href="/fr/components/tables">
    Données structurées en lignes et colonnes
  </Card>
  <Card title="Tooltip" icon="message" href="/fr/components/tooltip">
    Informations contextuelles au survol
  </Card>
</Columns>

## Composants d'encadré

<Columns cols={3}>
  <Card title="Note" icon="sticky-note" href="/fr/components/callouts">
    Encadré d'information générale
  </Card>
  <Card title="Info" icon="circle-info" href="/fr/components/callouts">
    Encadré de contexte utile
  </Card>
  <Card title="Warning" icon="triangle-exclamation" href="/fr/components/callouts">
    Encadré d'avertissement important
  </Card>
  <Card title="Tip" icon="lightbulb" href="/fr/components/callouts">
    Conseil ou suggestion de pro
  </Card>
  <Card title="Check" icon="circle-check" href="/fr/components/callouts">
    Succès ou confirmation
  </Card>
  <Card title="Danger" icon="circle-xmark" href="/fr/components/callouts">
    Encadré d'avertissement critique
  </Card>
</Columns>

## Composants de code

<Columns cols={3}>
  <Card title="CodeGroup" icon="layer-group" href="/fr/components/code-group">
    Exemples de code à onglets
  </Card>
  <Card title="Mermaid" icon="diagram-project" href="/fr/components/mermaid">
    Organigrammes et diagrammes
  </Card>
  <Card title="RequestExample" icon="arrow-right" href="/fr/components/examples">
    Bloc de code de requête API
  </Card>
  <Card title="ResponseExample" icon="arrow-left" href="/fr/components/examples">
    Bloc de code de réponse API
  </Card>
</Columns>

## Quelle est la prochaine étape ?

<Columns cols={2}>
  <Card title="Composant Card" icon="square" href="/fr/components/card">
    Commencez par le composant de mise en page le plus polyvalent
  </Card>
  <Card title="Blocs de code" icon="code" href="/fr/content/code-blocks">
    Découvrez la coloration syntaxique et les fonctionnalités avancées de code
  </Card>
</Columns>