Skip to content

Commit a8c99a4

Browse files
handotdevmintlify[bot]ethanpalm
authored
Add components overview page (#2322)
* Update components.mdx Co-Authored-By: mintlify[bot] <109931778+mintlify[bot]@users.noreply.github.com> * Update docs.json Co-Authored-By: mintlify[bot] <109931778+mintlify[bot]@users.noreply.github.com> * rename page index.mdx * structure around intent * update intro --------- Co-authored-by: mintlify[bot] <109931778+mintlify[bot]@users.noreply.github.com> Co-authored-by: Ethan Palm <56270045+ethanpalm@users.noreply.github.com>
1 parent d9e2e1f commit a8c99a4

File tree

2 files changed

+107
-0
lines changed

2 files changed

+107
-0
lines changed

components/index.mdx

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
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>

docs.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -75,6 +75,7 @@
7575
{
7676
"group": "Components",
7777
"pages": [
78+
"components/index",
7879
"components/accordions",
7980
"components/badge",
8081
"components/banner",

0 commit comments

Comments
 (0)