|
| 1 | +--- |
| 2 | +title: "Overview" |
| 3 | +description: "Component library for layout, emphasis, API documentation, and navigation." |
| 4 | +--- |
| 5 | + |
| 6 | +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. |
| 7 | + |
| 8 | +## Structure your content |
| 9 | + |
| 10 | +<Card title="Tabs" icon="folder" href="/components/tabs"> |
| 11 | + Organize related content into switchable tabbed views. |
| 12 | +</Card> |
| 13 | + |
| 14 | +<Card title="Code groups" icon="code" href="/components/code-groups"> |
| 15 | + Display code examples in multiple languages. |
| 16 | +</Card> |
| 17 | + |
| 18 | +<Card title="Steps" icon="list-ordered" href="/components/steps"> |
| 19 | + Display sequential instructions in a numbered format. |
| 20 | +</Card> |
| 21 | + |
| 22 | +<Card title="Columns" icon="columns-3" href="/components/columns"> |
| 23 | + Arrange content side by side in responsive layouts. |
| 24 | +</Card> |
| 25 | + |
| 26 | +<Card title="Panel" icon="panel-right" href="/components/panel"> |
| 27 | + Create sidebar panels for supplementary content. |
| 28 | +</Card> |
| 29 | + |
| 30 | +## Draw attention |
| 31 | + |
| 32 | +<Card title="Callouts" icon="message-square-warning" href="/components/callouts"> |
| 33 | + Emphasize important information with styled alerts. |
| 34 | +</Card> |
| 35 | + |
| 36 | +<Card title="Banner" icon="flag" href="/components/banner"> |
| 37 | + Display prominent announcements at the top of pages. |
| 38 | +</Card> |
| 39 | + |
| 40 | +<Card title="Badge" icon="award" href="/components/badge"> |
| 41 | + Add inline labels and status indicators. |
| 42 | +</Card> |
| 43 | + |
| 44 | +<Card title="Update" icon="bell" href="/components/update"> |
| 45 | + Highlight new or updated content. |
| 46 | +</Card> |
| 47 | + |
| 48 | +<Card title="Frames" icon="frame" href="/components/frames"> |
| 49 | + Add borders and styling to images and content. |
| 50 | +</Card> |
| 51 | + |
| 52 | +<Card title="Tooltips" icon="message-circle" href="/components/tooltips"> |
| 53 | + Display additional information on hover. |
| 54 | +</Card> |
| 55 | + |
| 56 | +## Show and hide content |
| 57 | + |
| 58 | +<Card title="Accordions" icon="chevron-down" href="/components/accordions"> |
| 59 | + Expandable sections for progressive disclosure of content. |
| 60 | +</Card> |
| 61 | + |
| 62 | +<Card title="Expandables" icon="chevrons-down" href="/components/expandables"> |
| 63 | + Show and hide detailed content on demand. |
| 64 | +</Card> |
| 65 | + |
| 66 | +<Card title="View" icon="eye" href="/components/view"> |
| 67 | + Conditionally show content based on context. |
| 68 | +</Card> |
| 69 | + |
| 70 | +## Document your API |
| 71 | + |
| 72 | +<Card title="Fields" icon="text-cursor-input" href="/components/fields"> |
| 73 | + Display parameter and property definitions. |
| 74 | +</Card> |
| 75 | + |
| 76 | +<Card title="Responses" icon="arrow-left-right" href="/components/responses"> |
| 77 | + Document API response structures and fields. |
| 78 | +</Card> |
| 79 | + |
| 80 | +<Card title="Examples" icon="file-code" href="/components/examples"> |
| 81 | + Show request and response examples side by side. |
| 82 | +</Card> |
| 83 | + |
| 84 | +## Link to other pages |
| 85 | + |
| 86 | +<Card title="Cards" icon="square" href="/components/cards"> |
| 87 | + Highlight content with customizable containers and icons. |
| 88 | +</Card> |
| 89 | + |
| 90 | +<Card title="Tiles" icon="layout-grid" href="/components/tiles"> |
| 91 | + Display content in a grid of clickable tiles. |
| 92 | +</Card> |
| 93 | + |
| 94 | +## Add visual context |
| 95 | + |
| 96 | +<Card title="Icons" icon="smile" href="/components/icons"> |
| 97 | + Add visual indicators using the Lucide icon library. |
| 98 | +</Card> |
| 99 | + |
| 100 | +<Card title="Mermaid diagrams" icon="git-branch" href="/components/mermaid-diagrams"> |
| 101 | + Create flowcharts, sequence diagrams, and more. |
| 102 | +</Card> |
| 103 | + |
| 104 | +<Card title="Color" icon="palette" href="/components/color"> |
| 105 | + Display color swatches with hex values. |
| 106 | +</Card> |
0 commit comments