Components - Mintlify Starter Kit

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.

Install the package

npm install my-package

Initialize

Run the init command in your project root.

npx my-package init

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

npm install my-package

yarn add my-package

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.

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

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

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

​Callouts

​Cards

API Reference

Quickstart

​Steps

​Tabs

​Accordions

​Frames

​Code groups

Callouts

Cards

Steps

Tabs

Accordions

Frames

Code groups