# mintlify-components-guide

# Mintlify Components Guide

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

## Table of Contents

- [Accordions](#accordions)
- [Accordion Groups](#accordion-groups)
- [Callout Boxes](#callout-boxes)
- [Cards](#cards)
- [Card Groups](#card-groups)
- [Code Blocks](#code-blocks)
- [Code Groups](#code-groups)
- [Frames](#frames)
- [Icons](#icons)
- [Mermaid Diagrams](#mermaid-diagrams)
- [Steps](#steps)
- [Tabs](#tabs)
- [Tooltips](#tooltips)
- [Update](#update)

## Writing Content

- [Page Titles and Metadata](#page-titles-and-metadata)
- [Headers and Text](#headers-and-text)
- [Images, Videos, and Embeds](#images-videos-and-embeds)
- [Lists and Tables](#lists-and-tables)
- [Code Blocks](#code-blocks)
- [Reusable Snippets](#reusable-snippets)

## Accordions

A dropdown component to toggle content.

### Usage

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

### Props

| Prop        | Type          | Default | Required | Description                                      |
| ----------- | ------------- | ------- | -------- | ------------------------------------------------ |
| title       | string        | -       | Yes      | Title in the Accordion preview.                  |
| description | string        | -       | No       | Detail below the title in the Accordion preview. |
| defaultOpen | boolean       | "false" | No       | Whether the Accordion is open by default.        |
| icon        | string or svg | -       | No       | A Font Awesome icon, Lucide icon, or SVG code.   |

## Accordion Groups

Group multiple accordions together.

### Usage

```mdx
<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

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

### Props

| Prop  | Type   | Default        | Required | Description                                                            |
| ----- | ------ | -------------- | -------- | ---------------------------------------------------------------------- |
| type  | string | "info"         | No       | Type of callout. Options: "info", "warning", "error", "check", "note". |
| emoji | string | Varies by type | No       | Emoji to display in the callout.                                       |
| title | string | -              | No       | Title of the callout.                                                  |

## Cards

Display content in a card format.

### Usage

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

### Props

| Prop  | Type   | Default | Required | Description                  |
| ----- | ------ | ------- | -------- | ---------------------------- |
| title | string | -       | No       | Title of the card.           |
| icon  | string | -       | No       | Icon to display in the card. |
| href  | string | -       | No       | URL to link the card to.     |
| color | string | -       | No       | Accent color for the card.   |

## Card Groups

Display multiple cards in a grid layout.

### Usage

```mdx
<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

| Prop | Type   | Default | Required | Description                    |
| ---- | ------ | ------- | -------- | ------------------------------ |
| cols | number | 3       | No       | Number of columns in the grid. |

## Code Blocks

Display code with syntax highlighting.

### Usage

````mdx
```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

| Option  | Description                  |
| ------- | ---------------------------- |
| title   | Add a title to the diagram   |
| caption | Add a caption to the diagram |

## Tabs

Display content in tabs.

### Usage

```mdx
<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

| Prop  | Type   | Default | Required | Description       |
| ----- | ------ | ------- | -------- | ----------------- |
| title | string | -       | Yes      | Title of the tab. |

## Steps

Display step-by-step instructions.

```mdx
<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

| Prop  | Type   | Default | Required | Description        |
| ----- | ------ | ------- | -------- | ------------------ |
| title | string | -       | No       | Title of the step. |

### Images

Display images with additional features.

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

### Props for Image

| Prop    | Type             | Default | Required | Description                     |
| ------- | ---------------- | ------- | -------- | ------------------------------- |
| src     | string           | -       | Yes      | Source URL of the image.        |
| alt     | string           | -       | Yes      | Alternative text for the image. |
| caption | string           | -       | No       | Caption for the image.          |
| width   | number or string | -       | No       | Width of the image.             |
| height  | number or string | -       | No       | Height of the image.            |

### FileTree

Display a file/directory structure.

```mdx
<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

| Prop        | Type    | Default | Required | Description                            |
| ----------- | ------- | ------- | -------- | -------------------------------------- |
| name        | string  | -       | Yes      | Name of the folder.                    |
| defaultOpen | boolean | false   | No       | Whether the folder is open by default. |

### Props for FileTree.File

| Prop | Type   | Default | Required | Description       |
| ---- | ------ | ------- | -------- | ----------------- |
| name | string | -       | Yes      | Name of the file. |

### Note

A specialized callout for notes.

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

### Props for Note

| Prop  | Type   | Default | Required | Description        |
| ----- | ------ | ------- | -------- | ------------------ |
| title | string | "Note"  | No       | Title of the note. |

### Warning

A specialized callout for warnings.

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

### Props for Warning

| Prop  | Type   | Default   | Required | Description           |
| ----- | ------ | --------- | -------- | --------------------- |
| title | string | "Warning" | No       | Title of the warning. |

### Tip

A specialized callout for tips.

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

### Props for Tip

| Prop  | Type   | Default | Required | Description       |
| ----- | ------ | ------- | -------- | ----------------- |
| title | string | "Tip"   | No       | Title of the tip. |

### Info

A specialized callout for information.

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

### Props for Info

| Prop  | Type   | Default | Required | Description                |
| ----- | ------ | ------- | -------- | -------------------------- |
| title | string | "Info"  | No       | Title of the info callout. |

### Api

Display API endpoints.

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

### Props for Api

| Prop     | Type   | Default | Required | Description                                 |
| -------- | ------ | ------- | -------- | ------------------------------------------- |
| method   | string | -       | Yes      | HTTP method (GET, POST, PUT, DELETE, etc.). |
| endpoint | string | -       | Yes      | API endpoint path.                          |
| title    | string | -       | No       | Title for the API block.                    |

### ParamField

Display parameters in API documentation.

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

### Props for ParamField

| Prop     | Type    | Default | Required | Description                        |
| -------- | ------- | ------- | -------- | ---------------------------------- |
| name     | string  | -       | Yes      | Name of the parameter.             |
| type     | string  | -       | Yes      | Type of the parameter.             |
| required | boolean | false   | No       | Whether the parameter is required. |
| default  | string  | -       | No       | Default value of the parameter.    |

### ResponseField

Display response fields in API documentation.

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

### Props for ResponseField

| Prop     | Type    | Default | Required | Description                                       |
| -------- | ------- | ------- | -------- | ------------------------------------------------- |
| name     | string  | -       | Yes      | Name of the response field.                       |
| type     | string  | -       | Yes      | Type of the response field.                       |
| required | boolean | false   | No       | Whether the field is always present in responses. |

## Tooltips

Display a tooltip on hover.

### Usage

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

### Props for Tooltip

| Prop | Type   | Default | Required | Description             |
| ---- | ------ | ------- | -------- | ----------------------- |
| tip  | string | -       | Yes      | Content of the tooltip. |

## Update

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

### Usage

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

### Props

| Prop | Type   | Default | Required | Description                        |
| ---- | ------ | ------- | -------- | ---------------------------------- |
| date | string | -       | No       | Date when the content was updated. |

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

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

# API Reference
```

### Headers and Text

Use headers to organize your content hierarchically.

```mdx
# 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.

```mdx
![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.

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

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