Mintlify reference
Reference for building documentation with Mintlify. This file covers essentials that apply to every task. For detailed reference on specific topics, read the files listed in the reference index below.
Reference index
Read these files only when your task requires them. They are in the reference/ directory next to this file. To find them, look in the same directory as this skill file (e.g., .claude/skills/mintlify/reference/).
| File |
When to read |
reference/components.md |
Adding or modifying components (callouts, cards, steps, tabs, accordions, code groups, fields, frames, icons, tooltips, badges, trees, mermaid, panels, prompts, colors, tiles, updates, views). |
reference/configuration.md |
Changing docs.json settings (theme, colors, logo, fonts, appearance, navbar, footer, banner, redirects, SEO, integrations, API config). Also covers snippets, hidden pages, .mintignore, custom CSS/JS, and the complete frontmatter fields table. |
reference/navigation.md |
Modifying site navigation structure (groups, tabs, anchors, dropdowns, products, versions, languages, OpenAPI in nav). |
reference/api-docs.md |
Setting up API documentation (OpenAPI, AsyncAPI, MDX manual API pages, extensions, playground config). |
Before you start
Read the project's docs.json file first. It defines the site's navigation, theme, colors, and configuration.
Search for existing content before creating new pages. You may need to update an existing page, add a section, or link to existing content rather than duplicating.
Read 2-3 similar pages to match the site's voice, structure, and formatting.
File format
Mintlify uses MDX files (.mdx or .md) with YAML frontmatter.
project/
├── docs.json # Site configuration (required)
├── index.mdx
├── quickstart.mdx
├── guides/
│ └── example.mdx
├── openapi.yml # API specification (optional)
├── images/ # Static assets
│ └── example.png
└── snippets/ # Reusable components
└── component.jsx
File naming
- Match existing patterns in the directory
- If no existing files or mixed file naming patterns, use kebab-case:
getting-started.mdx
- Add new pages to
docs.json navigation or they won't appear in the sidebar
Internal links
- Use root-relative paths without file extensions:
/getting-started/quickstart
- Do not use relative paths (
../) or absolute URLs for internal pages
Images
Store images in an images/ directory. Reference with root-relative paths. All images require descriptive alt text.

Page frontmatter
Every page requires title in its frontmatter. Include description and keywords for SEO.
---
title: "Clear, descriptive title"
description: "Concise summary for SEO and navigation."
keywords: ["relevant", "search", "terms"]
---
Common frontmatter fields
| Field |
Type |
Required |
Description |
title |
string |
Yes |
Page title in navigation and browser tabs. |
description |
string |
No |
Brief description for SEO. Displays under the title. |
sidebarTitle |
string |
No |
Short title for sidebar navigation. |
icon |
string |
No |
Lucide, Font Awesome, or Tabler icon name. Also accepts a URL or file path. |
tag |
string |
No |
Label next to page title in sidebar (e.g., "NEW"). |
hidden |
boolean |
No |
Remove from sidebar. Page still accessible by URL. |
mode |
string |
No |
Page layout: default, wide, custom, frame, center. |
keywords |
array |
No |
Search terms for internal search and SEO. |
api |
string |
No |
API endpoint for interactive playground (e.g., "POST /users"). |
openapi |
string |
No |
OpenAPI endpoint reference (e.g., "GET /endpoint"). |
Quick component reference
Below are the most commonly used components. For full props and all 24 components, read reference/components.md.
Callouts
<Note>Supplementary information, safe to skip.</Note>
<Info>Helpful context such as permissions or prerequisites.</Info>
<Tip>Recommendations or best practices.</Tip>
<Warning>Potentially destructive actions or important caveats.</Warning>
<Check>Success confirmation or completed status.</Check>
<Danger>Critical warnings about data loss or breaking changes.</Danger>
Steps
<Steps>
<Step title="First step">
Instructions for step one.
</Step>
<Step title="Second step">
Instructions for step two.
</Step>
</Steps>
Tabs and code groups
<Tabs>
<Tab title="npm">
```bash
npm install package-name
```
</Tab>
<Tab title="yarn">
```bash
yarn add package-name
```
</Tab>
</Tabs>
<CodeGroup>
```javascript example.js
const greeting = "Hello, world!";
greeting = "Hello, world!"
Cards and columns
<Columns cols={2}>
<Card title="First card" icon="rocket" href="/quickstart">
Card description text.
</Card>
<Card title="Second card" icon="book" href="/guides">
Card description text.
</Card>
</Columns>
Use <Columns> to arrange cards (or other content) in a grid. cols accepts 1-4.
Accordions
<AccordionGroup>
<Accordion title="First section">Content one.</Accordion>
<Accordion title="Second section">Content two.</Accordion>
</AccordionGroup>
CLI commands
npm i -g mint — Install the Mintlify CLI.
mint dev — Local preview at localhost:3000.
mint broken-links — Check internal links.
mint a11y — Check for accessibility issues.
mint validate — Validate documentation builds.
mint upgrade — Upgrade from mint.json to docs.json.
Writing standards
- Second-person voice ("you").
- Active voice, direct language.
- Sentence case for headings ("Getting started", not "Getting Started").
- Sentence case for code block titles.
- All code blocks must have language tags.
- All images must have descriptive alt text.
- No marketing language, filler phrases, or emoji.
- Keep code examples simple, practical, and tested.
Common mistakes
- Missing language tag on a code block (use
```python, not ```).
- Using relative paths (
../page) instead of root-relative (/section/page).
- Forgetting to add new pages to
docs.json navigation.
- Images without alt text.
- Adding file extensions to internal links (
/page.mdx instead of /page).
1---2name: mintlify3description: Comprehensive reference for building Mintlify documentation sites. Use when creating pages, configuring docs.json, adding components, setting up navigation, or working with API references. Routes to detailed reference files for all components and configuration options.4license: MIT5---6
7# Mintlify reference
8
9Reference for building documentation with Mintlify. This file covers essentials that apply to every task. For detailed reference on specific topics, read the files listed in the reference index below.
10
11## Reference index
12
13Read these files **only when your task requires them**. They are in the `reference/` directory next to this file. To find them, look in the same directory as this skill file (e.g., `.claude/skills/mintlify/reference/`).
14
15| File | When to read |
16|------|-------------|
17| `reference/components.md` | Adding or modifying components (callouts, cards, steps, tabs, accordions, code groups, fields, frames, icons, tooltips, badges, trees, mermaid, panels, prompts, colors, tiles, updates, views). |
18| `reference/configuration.md` | Changing docs.json settings (theme, colors, logo, fonts, appearance, navbar, footer, banner, redirects, SEO, integrations, API config). Also covers snippets, hidden pages, .mintignore, custom CSS/JS, and the complete frontmatter fields table. |
19| `reference/navigation.md` | Modifying site navigation structure (groups, tabs, anchors, dropdowns, products, versions, languages, OpenAPI in nav). |
20| `reference/api-docs.md` | Setting up API documentation (OpenAPI, AsyncAPI, MDX manual API pages, extensions, playground config). |
21
22## Before you start
23
24Read the project's `docs.json` file first. It defines the site's navigation, theme, colors, and configuration.
25
26Search for existing content before creating new pages. You may need to update an existing page, add a section, or link to existing content rather than duplicating.
27
28Read 2-3 similar pages to match the site's voice, structure, and formatting.
29
30## File format
31
32Mintlify uses MDX files (`.mdx` or `.md`) with YAML frontmatter.
33
34```
35project/
36├── docs.json # Site configuration (required)
37├── index.mdx
38├── quickstart.mdx
39├── guides/
40│ └── example.mdx
41├── openapi.yml # API specification (optional)
42├── images/ # Static assets
43│ └── example.png
44└── snippets/ # Reusable components
45 └── component.jsx
46```
47
48### File naming
49
50- Match existing patterns in the directory
51- If no existing files or mixed file naming patterns, use kebab-case: `getting-started.mdx`
52- Add new pages to `docs.json` navigation or they won't appear in the sidebar
53
54### Internal links
55
56- Use root-relative paths without file extensions: `/getting-started/quickstart`
57- Do not use relative paths (`../`) or absolute URLs for internal pages
58
59### Images
60
61Store images in an `images/` directory. Reference with root-relative paths. All images require descriptive alt text.
62
63```mdx
64
65```
66
67## Page frontmatter
68
69Every page requires `title` in its frontmatter. Include `description` and `keywords` for SEO.
70
71```yaml
72---
73title: "Clear, descriptive title"
74description: "Concise summary for SEO and navigation."
75keywords: ["relevant", "search", "terms"]
76---
77```
78
79### Common frontmatter fields
80
81| Field | Type | Required | Description |
82|-------|------|----------|-------------|
83| `title` | string | Yes | Page title in navigation and browser tabs. |
84| `description` | string | No | Brief description for SEO. Displays under the title. |
85| `sidebarTitle` | string | No | Short title for sidebar navigation. |
86| `icon` | string | No | Lucide, Font Awesome, or Tabler icon name. Also accepts a URL or file path. |
87| `tag` | string | No | Label next to page title in sidebar (e.g., "NEW"). |
88| `hidden` | boolean | No | Remove from sidebar. Page still accessible by URL. |
89| `mode` | string | No | Page layout: `default`, `wide`, `custom`, `frame`, `center`. |
90| `keywords` | array | No | Search terms for internal search and SEO. |
91| `api` | string | No | API endpoint for interactive playground (e.g., `"POST /users"`). |
92| `openapi` | string | No | OpenAPI endpoint reference (e.g., `"GET /endpoint"`). |
93
94## Quick component reference
95
96Below are the most commonly used components. For full props and all 24 components, read `reference/components.md`.
97
98### Callouts
99
100```mdx
101<Note>Supplementary information, safe to skip.</Note>
102<Info>Helpful context such as permissions or prerequisites.</Info>
103<Tip>Recommendations or best practices.</Tip>
104<Warning>Potentially destructive actions or important caveats.</Warning>
105<Check>Success confirmation or completed status.</Check>
106<Danger>Critical warnings about data loss or breaking changes.</Danger>
107```
108
109### Steps
110
111```mdx
112<Steps>
113 <Step title="First step">
114 Instructions for step one.
115 </Step>
116 <Step title="Second step">
117 Instructions for step two.
118 </Step>
119</Steps>
120```
121
122### Tabs and code groups
123
124```mdx
125<Tabs>
126 <Tab title="npm">
127 ```bash
128 npm install package-name
129 ```
130 </Tab>
131 <Tab title="yarn">
132 ```bash
133 yarn add package-name
134 ```
135 </Tab>
136</Tabs>
137```
138
139```mdx
140<CodeGroup>
141
142```javascript example.js
143const greeting = "Hello, world!";
144```
145
146```python example.py
147greeting = "Hello, world!"
148```
149
150</CodeGroup>
151```
152
153### Cards and columns
154
155```mdx
156<Columns cols={2}>
157 <Card title="First card" icon="rocket" href="/quickstart">
158 Card description text.
159 </Card>
160 <Card title="Second card" icon="book" href="/guides">
161 Card description text.
162 </Card>
163</Columns>
164```
165
166Use `<Columns>` to arrange cards (or other content) in a grid. `cols` accepts 1-4.
167
168### Accordions
169
170```mdx
171<AccordionGroup>
172 <Accordion title="First section">Content one.</Accordion>
173 <Accordion title="Second section">Content two.</Accordion>
174</AccordionGroup>
175```
176
177## CLI commands
178
179- `npm i -g mint` — Install the Mintlify CLI.
180- `mint dev` — Local preview at localhost:3000.
181- `mint broken-links` — Check internal links.
182- `mint a11y` — Check for accessibility issues.
183- `mint validate` — Validate documentation builds.
184- `mint upgrade` — Upgrade from `mint.json` to `docs.json`.
185
186## Writing standards
187
188- Second-person voice ("you").
189- Active voice, direct language.
190- Sentence case for headings ("Getting started", not "Getting Started").
191- Sentence case for code block titles.
192- All code blocks must have language tags.
193- All images must have descriptive alt text.
194- No marketing language, filler phrases, or emoji.
195- Keep code examples simple, practical, and tested.
196
197## Common mistakes
198
199- Missing language tag on a code block (use ` ```python `, not ` ``` `).
200- Using relative paths (`../page`) instead of root-relative (`/section/page`).
201- Forgetting to add new pages to `docs.json` navigation.
202- Images without alt text.
203- Adding file extensions to internal links (`/page.mdx` instead of `/page`).