> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.manicule.dev/llms.txt
> Use this file to discover all available pages before exploring further.
> For every page in one file, fetch https://mintlify.manicule.dev/llms-full.txt (large).
> To search and read these docs as tools, connect the MCP server at https://mintlify.manicule.dev/api/mcp.
> Every agent surface: https://mintlify.manicule.dev/.well-known/llms-manifest.json

# Components overview (/components)

<!-- agent-signals: reading_time_min: 2 · est_tokens: 890 · updated: 2026-07-31 -->
Related: [What is the agent?](/agent.md), [Assistant](/assistant.md), [Automations overview](/automations.md), [Mintlify CLI](/cli.md), [Editor overview](/editor.md), [Guides](/guides.md)

> 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 title="Tabs" icon="folder" href="/components/tabs">Organize related content into switchable tabbed views.</Card>

<Card title="Code groups" icon="code" href="/components/code-groups">Display code examples in multiple languages.</Card>

<Card title="Steps" icon="list-ordered" href="/components/steps">Display sequential instructions in a numbered format.</Card>

<Card title="Columns" icon="columns-3" href="/components/columns">Arrange content side by side in responsive layouts.</Card>

<Card title="Panel" icon="panel-right" href="/components/panel">Create sidebar panels for supplementary content.</Card>

## Draw attention

<Card title="Callouts" icon="message-square-warning" href="/components/callouts">Emphasize important information with styled alerts.</Card>

<Card title="Banner" icon="flag" href="/components/banner">Display prominent announcements at the top of pages.</Card>

<Card title="Badge" icon="award" href="/components/badge">Add inline labels and status indicators.</Card>

<Card title="Update" icon="bell" href="/components/update">Highlight new or updated content.</Card>

<Card title="Frames" icon="frame" href="/components/frames">Add borders and styling to images and content.</Card>

<Card title="Tooltips" icon="message-circle" href="/components/tooltips">Display additional information on hover.</Card>

## Showcase AI prompts

<Card title="Prompt" icon="sparkles" href="/components/prompt">Display copyable AI prompts with Cursor integration.</Card>

## Show and hide content

<Card title="Accordions" icon="chevron-down" href="/components/accordions">Expandable sections for progressive disclosure of content.</Card>

<Card title="Expandables" icon="chevrons-down" href="/components/expandables">Show and hide detailed content on demand.</Card>

<Card title="View" icon="eye" href="/components/view">Conditionally show content based on context.</Card>

<Card title="Visibility" icon="eye-off" href="/components/visibility">Control content shown to humans versus AI agents.</Card>

## Document your API

<Card title="Fields" icon="text-cursor-input" href="/components/fields">Display parameter and property definitions.</Card>

<Card title="Responses" icon="arrow-left-right" href="/components/responses">Document API response structures and fields.</Card>

<Card title="Examples" icon="file-code" href="/components/examples">Show request and response examples side by side.</Card>

## Link to other pages

<Card title="Cards" icon="square" href="/components/cards">Highlight content with customizable containers and icons.</Card>

<Card title="Tiles" icon="layout-grid" href="/components/tiles">Display content in a grid of clickable tiles.</Card>

## Add visual context

<Card title="Icons" icon="smile" href="/components/icons">Add visual indicators using the Lucide icon library.</Card>

<Card title="Mermaid diagrams" icon="git-branch" href="/components/mermaid-diagrams">Create flowcharts, sequence diagrams, and more.</Card>

<Card title="Color" icon="palette" href="/components/color">Display color swatches with hex values.</Card>

<Card title="Tree" icon="folder-tree" href="/components/tree">Display hierarchical file and folder structures.</Card>
