Skip to main content
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 install 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.
A brief answer to the first question. Keep it concise.
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.
Big Bend landscape
<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. 
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>