mintlify-components-guide

Mintlify Components Guide

This guide provides comprehensive documentation for all Mintlify components and their available options.

Table of Contents

• Accordions
• Accordion Groups
• Callout Boxes
• Cards
• Card Groups
• Code Blocks
• Code Groups
• Frames
• Icons
• Mermaid Diagrams
• Steps
• Tabs
• Tooltips
• Update

Writing Content

• Page Titles and Metadata
• Headers and Text
• Images, Videos, and Embeds
• Lists and Tables
• Code Blocks
• Reusable Snippets

Accordions

A dropdown component to toggle content.

Usage

<Accordion title="I am an Accordion.">
  You can put any content in here.
</Accordion>

Props

Accordion Groups

Group multiple accordions together.

Usage

<AccordionGroup>
  <Accordion title="First accordion">
    Content for the first accordion.
  </Accordion>
  <Accordion title="Second accordion">
    Content for the second accordion.
  </Accordion>
</AccordionGroup>

Props

No specific props for AccordionGroup itself as it serves as a container for Accordion components.

Callout Boxes

Highlight important information with callout boxes.

Usage

<Callout type="info" emoji="ℹ️">
  This is an informational callout.
</Callout>

Props

Cards

Display content in a card format.

Usage

<Card title="Card Title" icon="icon-name">
  Card content goes here.
</Card>

Props

Card Groups

Display multiple cards in a grid layout.

Usage

<CardGroup>
  <Card title="First Card" icon="bolt">
    Content for the first card.
  </Card>
  <Card title="Second Card" icon="star">
    Content for the second card.
  </Card>
</CardGroup>

Props

Code Blocks

Display code with syntax highlighting.

Usage

```js
// JavaScript code here
console.log('Hello, world!');

### Options

| Option | Description |
|--------|-------------|
| title | Add a title to the code block |
| showLineNumbers | Show line numbers |
| highlightLines | Highlight specific lines |
| copyable | Allow copying of code (default: true) |

Example with options:

````mdx
```js title="example.js" showLineNumbers highlightLines="2,4-6"
const greeting = "Hello";
console.log(greeting + ", world!");
function sayHello() {
  return greeting;
}

## Code Groups

Group multiple code blocks together with tabs.

### Usage

```mdx
<CodeGroup>
  ```js title="JavaScript"
  console.log('Hello, world!');
  ```

  ```python title="Python"
  print("Hello, world!")
  ```
</CodeGroup>
```

### Props

No specific props for CodeGroup itself as it serves as a container for code blocks.

## Frames

Display content within a framed container.

### Usage

```mdx
<Frame>
  <img src="/path/to/image.png" />
</Frame>
```

### Props

| Prop | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| caption | string | - | No | Caption for the frame. |
| border | boolean | true | No | Whether to show a border. |
| shadow | boolean | false | No | Whether to show a shadow. |

## Icons

Display vector icons.

### Usage

```mdx
<Icon icon="check" color="green" />
```

### Props

| Prop | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| icon | string | - | Yes | Name of the icon (Font Awesome or Lucide). |
| color | string | - | No | Color of the icon. |
| size | number | - | No | Size of the icon. |

## Mermaid Diagrams

Create diagrams using Mermaid syntax.

### Usage

````mdx
```mermaid
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
```

Options

Tabs

Display content in tabs.

Usage

<Tabs>
  <Tab title="First Tab">
    Content for the first tab.
  </Tab>
  <Tab title="Second Tab">
    Content for the second tab.
  </Tab>
</Tabs>

Props for Tabs

No specific props for the Tabs container component.

Props for Tab

Steps

Display step-by-step instructions.

<Steps>
  <Step title="First Step">
    Instructions for the first step.
  </Step>
  <Step title="Second Step">
    Instructions for the second step.
  </Step>
</Steps>

Props for Steps

No specific props for the Steps container component.

Props for Step

Images

Display images with additional features.

<Image src="/path/to/image.png" alt="Image description" />

Props for Image

FileTree

Display a file/directory structure.

<FileTree>
  <FileTree.Folder name="src" defaultOpen>
    <FileTree.File name="index.js" />
    <FileTree.File name="components.js" />
  </FileTree.Folder>
  <FileTree.File name="package.json" />
</FileTree>

Props for FileTree.Folder

Props for FileTree.File

Note

A specialized callout for notes.

<Note>This is an important note.</Note>

Props for Note

Warning

A specialized callout for warnings.

<Warning>This is a warning message.</Warning>

Props for Warning

Tip

A specialized callout for tips.

<Tip>Here's a helpful tip.</Tip>

Props for Tip

Info

A specialized callout for information.

<Info>Here's some useful information.</Info>

Props for Info

Api

Display API endpoints.

<Api method="GET" endpoint="/api/users" />

Props for Api

ParamField

Display parameters in API documentation.

<ParamField name="user_id" type="string" required>
  The ID of the user.
</ParamField>

Props for ParamField

ResponseField

Display response fields in API documentation.

<ResponseField name="user" type="object">
  Information about the user.
</ResponseField>

Props for ResponseField

Tooltips

Display a tooltip on hover.

Usage

<Tooltip tip="Tooltip content">Hover me</Tooltip>

Props for Tooltip

Update

The Update component displays a notification about content that has been recently updated.

Usage

<Update>
  This documentation was updated on April 7, 2025 to reflect the latest features.
</Update>

Props

Writing Content

This section provides guidance on how to effectively structure and format your documentation.

Page Titles and Metadata

Define page titles and metadata to improve SEO and navigation.

---
title: 'API Reference'
description: 'Complete API documentation for developers'
---

# API Reference

Headers and Text

Use headers to organize your content hierarchically.

# Main Heading (H1)
## Section Heading (H2)
### Subsection Heading (H3)
#### Minor Section (H4)

Regular paragraph text goes here. You can use **bold**, *italic*, or ~~strikethrough~~ formatting.

Images, Videos, and Embeds

Embed rich media content in your documentation.

![Alt text for the image](/path/to/image.png)

<Frame>
  <img src="/screenshots/dashboard.png" alt="Dashboard Screenshot" />
</Frame>

<iframe
  width="560"
  height="315"
  src="https://www.youtube.com/embed/your-video-id"
  frameborder="0"
  allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen
></iframe>

Lists and Tables

Organize information with lists and tables.

Unordered list:
- Item one
- Item two
  - Nested item
- Item three

Ordered list:
1. First step
2. Second step
3. Third step

| Header 1 | Header 2 | Header 3 |
|----------|----------|----------|
| Cell 1   | Cell 2   | Cell 3   |
| Cell 4   | Cell 5   | Cell 6   |

Reusable Snippets

Create reusable content snippets to maintain consistency across your documentation.

import { Snippet } from '@mintlify/components';

<Snippet file="common-errors.mdx" />

To create a snippet, add your content to a file in the snippets/ directory, then import and use it as shown above. | tip | string | - | Yes | Content of the tooltip. |