> ## Documentation Index
> Fetch the complete documentation index at: https://docs.threat.best/llms.txt
> Use this file to discover all available pages before exploring further.

# 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](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 theme={null}
<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 theme={null}
<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 theme={null}
    npm install my-package
    ```
  </Step>

  <Step title="Initialize">
    Run the init command in your project root.

    ```bash theme={null}
    npx my-package init
    ```
  </Step>

  <Step title="You're ready">
    Start using the package in your code.
  </Step>
</Steps>

````mdx theme={null}
<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 theme={null}
    npm install my-package
    ```
  </Tab>

  <Tab title="yarn">
    ```bash theme={null}
    yarn add my-package
    ```
  </Tab>

  <Tab title="pnpm">
    ```bash theme={null}
    pnpm add my-package
    ```
  </Tab>
</Tabs>

````mdx theme={null}
<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 theme={null}
<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 theme={null}
<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 theme={null}
  const response = await fetch('https://api.example.com/users');
  const users = await response.json();
  ```

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

  ```bash curl theme={null}
  curl https://api.example.com/users
  ```
</CodeGroup>

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

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