---
title: Components Overview
description: MDX components for cards, tabs, accordions, callouts, code groups, and more. Drop them into any page.
---

Jamdesk includes MDX components you can use in any page. This overview helps you choose the right component for your content.

## Usage

Drop components directly into your MDX:

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

## Layout Components

<Columns cols={3}>
  <Card title="Card" icon="square" href="/components/card">
    Display content in bordered cards
  </Card>
  <Card title="Tabs" icon="folder" href="/components/tabs">
    Organize content in tabbed sections
  </Card>
  <Card title="Accordion" icon="chevron-down" href="/components/accordion">
    Collapsible content sections
  </Card>
  <Card title="Steps" icon="list-ol" href="/components/steps">
    Numbered step-by-step guides
  </Card>
  <Card title="Expandable" icon="expand" href="/components/expandable">
    Show/hide additional content
  </Card>
  <Card title="Frame" icon="image" href="/components/frame">
    Styled container with caption
  </Card>
  <Card title="Panel" icon="sidebar" href="/components/panel">
    Custom sidebar content
  </Card>
  <Card title="Tables" icon="table" href="/components/tables">
    Structured data in rows and columns
  </Card>
  <Card title="Tooltip" icon="message" href="/components/tooltip">
    Contextual info on hover
  </Card>
</Columns>

## Callout Components

<Columns cols={3}>
  <Card title="Note" icon="sticky-note" href="/components/callouts">
    General information callout
  </Card>
  <Card title="Info" icon="circle-info" href="/components/callouts">
    Helpful context callout
  </Card>
  <Card title="Warning" icon="triangle-exclamation" href="/components/callouts">
    Important warning callout
  </Card>
  <Card title="Tip" icon="lightbulb" href="/components/callouts">
    Pro tip or suggestion
  </Card>
  <Card title="Check" icon="circle-check" href="/components/callouts">
    Success or confirmation
  </Card>
  <Card title="Danger" icon="circle-xmark" href="/components/callouts">
    Critical warning callout
  </Card>
</Columns>

## Code Components

<Columns cols={3}>
  <Card title="CodeGroup" icon="layer-group" href="/components/code-group">
    Tabbed code examples
  </Card>
  <Card title="Mermaid" icon="diagram-project" href="/components/mermaid">
    Flowcharts and diagrams
  </Card>
  <Card title="RequestExample" icon="arrow-right" href="/components/examples">
    API request code block
  </Card>
  <Card title="ResponseExample" icon="arrow-left" href="/components/examples">
    API response code block
  </Card>
</Columns>

## What's Next?

<Columns cols={2}>
  <Card title="Card Component" icon="square" href="/components/card">
    Start with the most versatile layout component
  </Card>
  <Card title="Code Blocks" icon="code" href="/content/code-blocks">
    Learn syntax highlighting and advanced code features
  </Card>
</Columns>