Components

Mintlify components let you build rich, interactive documentation pages using MDX. Here are some commonly used ones.

See the components overview in the Mintlify documentation for a complete list.

Callouts

Use callouts to draw attention to important information.

A Note is for general information that helps the reader.

A Tip highlights a helpful shortcut or best practice.

A Warning flags something that could cause problems.

An Info callout provides supplementary context.

A **Note** is for general information that helps the reader.

A **Tip** highlights a helpful shortcut or best practice.

A **Warning** flags something that could cause problems.

An **Info** callout provides supplementary context.

Cards

Cards link readers to other pages or resources.

Auto-generated docs from your OpenAPI spec.

Get your docs running in three steps.

    Auto-generated docs from your OpenAPI spec.


    Get your docs running in three steps.

Use “ to control the grid width. Cards without href render as informational panels.

Steps

Steps present numbered procedures clearly.

bash npm install my-package

Run the init command in your project root. bash npx my-package init

Start using the package in your code.

  ```bash npm install my-package ```
  Run the init command in your project root.
  Start using the package in your code.

Tabs

Tabs let readers switch between alternative content — different languages, environments, or platforms.

bash npm install my-package bash yarn add my-package bash pnpm add my-package

  ```bash npm install my-package ```
  ```bash yarn add my-package ```
  ```bash pnpm add my-package ```

Accordions

Accordions collapse content behind a toggle — useful for FAQs or optional detail.

A brief answer to the first question. Keep it concise.

Another answer here. Use as much space as you need.

  A brief answer to the first question.
  Another answer here.

Frames

Wrap images or other content in a Frame to add a styled border and rounded corners.

  <img src="/images/screenshot.png" alt="App screenshot" />

Code groups

CodeGroup displays multiple code snippets as tabs — ideal for showing the same example in multiple languages.

const response = await fetch('https://api.example.com/users');
const users = await response.json();

import requests
response = requests.get('https://api.example.com/users')
users = response.json()

curl https://api.example.com/users

  ```typescript TypeScript
  const response = await fetch('https://api.example.com/users');
  ```

```python Python
response = requests.get('https://api.example.com/users')
```