> ## Documentation Index
> Fetch the complete documentation index at: https://omer-d3c826d3.mintlify.site/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.

> [!TIP]
>
> A **Tip** highlights a helpful shortcut or best practice.

> [!WARNING]
>
> A **Warning** flags something that could cause problems.

> [!NOTE]
>
> An **Info** callout provides supplementary context.

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

> **[API Reference](/api-reference/introduction)**
>
> Auto-generated docs from your OpenAPI spec.

> **[Quickstart](/quickstart)**
>
> Get your docs running in three steps.

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

**1. Install the package**

```bash theme={null}
npm install my-package
```

**2. Initialize**

Run the init command in your project root.

```bash theme={null}
npx my-package init
```

**3. You're ready**

Start using the package in your code.

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

**npm**

```bash theme={null}
npm install my-package
```

**yarn**

```bash theme={null}
yarn add my-package
```

**pnpm**

```bash theme={null}
pnpm add my-package
```

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

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

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

![Big Bend landscape](https://mintlify-assets.b-cdn.net/bigbend.jpg)

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

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

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


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.