Manuals/essentials/components.mdx

---
title: 'Components'
description: 'Callouts, cards, steps, tabs, and more'
icon: 'puzzle-piece'
---

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

See the [components overview](https://mintlify.com/docs/components) in the Mintlify documentation for a complete list.

## Callouts

Use callouts to draw attention to important information.

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

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

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

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

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

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

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

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

<AccordionGroup>
  <Accordion title="What does this product do?">
    A brief answer to the first question. Keep it concise.
  </Accordion>
  <Accordion title="How is pricing calculated?">
    Another answer here. Use as much space as you need.
  </Accordion>
</AccordionGroup>

```mdx
<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="https://mintlify-assets.b-cdn.net/bigbend.jpg" alt="Big Bend landscape" />
</Frame>

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

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

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

  ```bash curl
  curl https://api.example.com/users
  ```
</CodeGroup>

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

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