mirror of
https://github.com/mintlify/docs.git
synced 2026-09-14 13:35:46 +08:00
mintlify[bot]
a268d81a3d
Co-authored-by: mintlify[bot] <109931778+mintlify[bot]@users.noreply.github.com>
132 lines
3.7 KiB
Plaintext
132 lines
3.7 KiB
Plaintext
---
|
|
title: "Components overview"
|
|
description: "Browse the full Mintlify component library for layout, emphasis, API documentation, and navigation elements available in your MDX pages."
|
|
keywords:
|
|
["MDX components", "documentation components", "UI components", "components"]
|
|
boost: 3
|
|
---
|
|
|
|
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>
|