Components

Callouts, cards, steps, tabs, and more

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.

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

<Tip>A **Tip** highlights a helpful shortcut or best practice.</Tip>

<Warning>A **Warning** flags something that could cause problems.</Warning>

<Info>An **Info** callout provides supplementary context.</Info>

Cards

Cards link readers to other pages or resources.

API Reference

Auto-generated docs from your OpenAPI spec.

Quickstart

Get your docs running in three steps.

<Columns cols={2}>
  <Card title="API Reference" icon="terminal" href="/api-reference/introduction">
    Auto-generated docs from your OpenAPI spec.
  </Card>
  <Card title="Quickstart" icon="rocket" href="/quickstart">
    Get your docs running in three steps.
  </Card>
</Columns>

Use <Columns cols={N}> to control the grid width. Cards without href render as informational panels.

Steps

Steps present numbered procedures clearly.

1. Install the package

   npm install my-package
   
2. Initialize

   Run the init command in your project root.

   npx my-package init
   
3. You're ready

   Start using the package in your code.

<Steps>
  <Step title="Install the package">
    ```bash
    npm install my-package
    ```
  </Step>
  <Step title="Initialize">
    Run the init command in your project root.
  </Step>
  <Step title="You're ready">
    Start using the package in your code.
  </Step>
</Steps>

Tabs

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

npm

npm install my-package

yarn

yarn add my-package

pnpm

pnpm add my-package

<Tabs>
  <Tab title="npm">
    ```bash
    npm install my-package
    ```
  </Tab>
  <Tab title="yarn">
    ```bash
    yarn add my-package
    ```
  </Tab>
  <Tab title="pnpm">
    ```bash
    pnpm add my-package
    ```
  </Tab>
</Tabs>

Accordions

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

What does this product do?

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

How is pricing calculated?

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

<AccordionGroup>
  <Accordion title="What does this product do?">
    A brief answer to the first question.
  </Accordion>
  <Accordion title="How is pricing calculated?">
    Another answer here.
  </Accordion>
</AccordionGroup>

Frames

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

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

Code groups

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

TypeScript

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

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

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