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

# Components

> Available Mintlify components for building documentation pages

Mintlify components work directly in your MDX files without imports. This page shows each component rendered so you can see what's available. For all available components, see the [Mintlify documentation](https://mintlify.com/docs/components).

## Cards

Use cards to link to related content or highlight key actions.

> [card] [Quickstart](https://docs.roscigno.com/quickstart.md)
>
> Get your dev environment set up in minutes.

Use `Columns` to arrange cards in a grid:

> [card] First card
>
> Cards can contain short descriptions.

> [card] Second card
>
> Arrange cards in columns for scannability.

## Accordions

Use accordions to collapse content that isn't needed on every visit.

> [accordion] What formats are supported?
>
> Pages are written in MDX, which combines Markdown with JSX components.

> [accordion] Do I need to import components?
>
> No. Mintlify components are available globally in all MDX files.

## Steps

Use steps for sequential instructions.

**1. Create a file**

Add a new `.mdx` file to the `content/` directory.

**2. Add frontmatter**

Include `title` and `description` in the YAML frontmatter.

**3. Update navigation**

Add the page path to `docs.json`.

## Tabs

Use tabs to present alternative content in the same space.

> [tab] npm
>
> ```bash theme={null}
> npm install
> ```

> [tab] yarn
>
> ```bash theme={null}
> yarn install
> ```

> [tab] pnpm
>
> ```bash theme={null}
> pnpm install
> ```

## Code blocks

Fenced code blocks support syntax highlighting and titles.

```typescript example.ts theme={null}
interface User {
  id: string;
  name: string;
  email: string;
}

function getUser(id: string): User {
  return { id, name: "Ada Lovelace", email: "ada@example.com" };
}
```

Group related code blocks with `CodeGroup`:

```bash npm theme={null}
npm run dev
```

```bash yarn theme={null}
yarn dev
```

```bash pnpm theme={null}
pnpm dev
```

## Callouts

Use callouts to draw attention to specific information.

> [!NOTE]
>
> Notes provide additional context that's helpful but not critical.

> [!TIP]
>
> Tips suggest best practices or useful shortcuts.

> [!WARNING]
>
> Warnings flag potential problems or destructive actions.


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