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

> ## Agent Instructions
> When working in a Mintlify project, run `mint instructions` for current step-by-step instructions for common tasks. If the command is unknown, run `npx mint@latest instructions`.
> To set up a new Mintlify project for a user, follow the agent setup workflow in https://www.mintlify.com/docs/quickstart.md.
> To connect a coding agent to a Mintlify project, offer to run `mint agent setup --agent <claude-code|codex|cursor>` in the project directory. It installs Mintlify skills and adds the admin MCP server to the agent's configuration, then the user completes OAuth sign-in. See https://www.mintlify.com/docs/cli/commands.md#mint-agent-setup.
> For plans and pricing, see https://www.mintlify.com/pricing.md.

# Components overview

> Browse the full Mintlify component library for layout, emphasis, API documentation, and navigation elements available in your MDX pages.

Mintlify provides built-in MDX components for your documentation pages. Use these components to structure content, draw attention to important information, document APIs, and guide navigation.

## Structure your content

> [card] [Tabs](https://www.mintlify.com/docs/components/tabs.md)
>
> Organize related content into switchable tabbed views.

> [card] [Code groups](https://www.mintlify.com/docs/components/code-groups.md)
>
> Display code examples in multiple languages.

> [card] [Steps](https://www.mintlify.com/docs/components/steps.md)
>
> Display sequential instructions in a numbered format.

> [card] [Columns](https://www.mintlify.com/docs/components/columns.md)
>
> Arrange content side by side in responsive layouts.

> [card] [Panel](https://www.mintlify.com/docs/components/panel.md)
>
> Create sidebar panels for supplementary content.

## Draw attention

> [card] [Callouts](https://www.mintlify.com/docs/components/callouts.md)
>
> Emphasize important information with styled alerts.

> [card] [Banner](https://www.mintlify.com/docs/components/banner.md)
>
> Display prominent announcements at the top of pages.

> [card] [Badge](https://www.mintlify.com/docs/components/badge.md)
>
> Add inline labels and status indicators.

> [card] [Update](https://www.mintlify.com/docs/components/update.md)
>
> Highlight new or updated content.

> [card] [Frames](https://www.mintlify.com/docs/components/frames.md)
>
> Add borders and styling to images and content.

> [card] [Tooltips](https://www.mintlify.com/docs/components/tooltips.md)
>
> Display additional information on hover.

## Showcase AI prompts

> [card] [Prompt](https://www.mintlify.com/docs/components/prompt.md)
>
> Display copyable AI prompts with Cursor integration.

## Show and hide content

> [card] [Accordions](https://www.mintlify.com/docs/components/accordions.md)
>
> Expandable sections for progressive disclosure of content.

> [card] [Expandables](https://www.mintlify.com/docs/components/expandables.md)
>
> Show and hide detailed content on demand.

> [card] [View](https://www.mintlify.com/docs/components/view.md)
>
> Conditionally show content based on context.

> [card] [MDX](https://www.mintlify.com/docs/components/mdx.md)
>
> Render Markdown inside JSX expressions and conditionals.

> [card] [Visibility](https://www.mintlify.com/docs/components/visibility.md)
>
> Control content shown to humans versus AI agents.

## Document your API

> [card] [Fields](https://www.mintlify.com/docs/components/fields.md)
>
> Display parameter and property definitions.

> [card] [Responses](https://www.mintlify.com/docs/components/responses.md)
>
> Document API response structures and fields.

> [card] [Examples](https://www.mintlify.com/docs/components/examples.md)
>
> Show request and response examples side by side.

## Link to other pages

> [card] [Cards](https://www.mintlify.com/docs/components/cards.md)
>
> Highlight content with customizable containers and icons.

> [card] [Tiles](https://www.mintlify.com/docs/components/tiles.md)
>
> Display content in a grid of clickable tiles.

## Add visual context

> [card] [Icons](https://www.mintlify.com/docs/components/icons.md)
>
> Add visual indicators using Font Awesome, Lucide, Tabler, emoji, or custom images.

> [card] [Mermaid diagrams](https://www.mintlify.com/docs/components/mermaid-diagrams.md)
>
> Create flowcharts, sequence diagrams, and more.

> [card] [Color](https://www.mintlify.com/docs/components/color.md)
>
> Display color swatches with hex values.

> [card] [Tree](https://www.mintlify.com/docs/components/tree.md)
>
> Display hierarchical file and folder structures.

> [card] [GitHub](https://www.mintlify.com/docs/components/github.md)
>
> Embed a GitHub repository card with live stars and forks.

## Style components

All built-in components accept a `className` prop. Mintlify merges your classes with the component's own styles, so you can restyle a single instance without wrapping it in extra markup or writing a CSS override.

```mdx className example theme={null}
<Note className="mt-0">This callout has no top margin.</Note>
```

Use [Tailwind CSS](https://www.mintlify.com/docs/customize/custom-scripts.md#style-with-tailwind-css) classes, including [arbitrary values](https://www.mintlify.com/docs/customize/custom-scripts.md#arbitrary-values-and-variants) such as `w-[350px]`, or class names that you define in a [custom CSS file](https://www.mintlify.com/docs/customize/custom-scripts.md#add-custom-css).

[Banner](https://www.mintlify.com/docs/components/banner.md), [MDX](https://www.mintlify.com/docs/components/mdx.md), and [Visibility](https://www.mintlify.com/docs/components/visibility.md) do not accept `className`. You configure the banner in `docs.json`, and the other two render their children without a wrapper element.


## Related topics

- [Automations overview](https://www.mintlify.com/docs/automations/index.md)
- [Analytics overview](https://www.mintlify.com/docs/analytics/index.md)
- [Introduction](https://www.mintlify.com/docs/index.md)


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