# MDX Components Reference
Complete reference for all 26+ Mintlify MDX components.
## Structure Content
### Tabs
Organize content into tabbed sections.
```mdx
JavaScript content here
Python content here
Go content here
```
### Code Groups
Display code examples in multiple languages with syntax highlighting.
```mdx
```bash npm
npm install package
```
```bash yarn
yarn add package
```
```bash pnpm
pnpm add package
```
```
### Steps
Create numbered step-by-step instructions.
```mdx
Run `npm install` to install required packages.
Create `.env` file with your API keys.
Run `npm start` to launch the application.
```
### Columns
Create multi-column layouts.
```mdx
Content in first column
Content in second column
Content in third column
```
### Panel
Create bordered content panels.
```mdx
This content appears in a bordered panel.
```
## Draw Attention
### Callouts
Four types of callouts for different message types.
```mdx
This is a general note or information.
This is a warning about potential issues.
This is a helpful tip or best practice.
This is informational content.
This indicates success or completion.
```
### Banner
Display prominent banners at the top of pages.
```mdx
Important announcement or message
```
### Badge
Add inline badges for labels or statuses.
```mdx
New
Available
Beta
Deprecated
```
### Update
Highlight recent updates or changelog entries.
```mdx
Added new authentication methods
```
### Frames
Embed iframes or external content.
```mdx
```
### Tooltips
Add hover tooltips to text.
```mdx
Hover over this text
```
## Show/Hide
### Accordions
Create collapsible accordion sections.
```mdx
Mintlify is a modern documentation platform that helps you create beautiful docs.
Run `mint new` to create a new documentation project.
Yes, you can use React components in your MDX files.
```
### Expandables
Create expandable content sections.
```mdx
Hidden content that appears when expanded.
This content is expanded by default.
```
### View
Show/hide content based on conditions.
```mdx
This content only shows for API documentation.
This content is hidden on mobile devices.
```
## Document API
### ParamField
Document API parameters with type information.
```mdx
Unique identifier for the resource
Page number for pagination
User's email address
Bearer token for authentication
```
**Attributes:**
- `path` / `query` / `body` / `header` - Parameter location
- `type` - Data type (string, number, boolean, object, array)
- `required` - Mark as required parameter
- `default` - Default value if not provided
- `enum` - Array of allowed values
- `enumDescriptions` - Descriptions for enum values
**With enum:**
```mdx
Account status
```
### ResponseField
Document API response fields.
```mdx
Unique identifier of the created resource
User's email address
ISO 8601 timestamp of creation
```
**Nested responses:**
```mdx
User information
User ID
Full name
```
### RequestExample
Show example API requests in multiple languages.
```mdx
```bash cURL
curl -X POST https://api.example.com/users \
-H "Authorization: Bearer YOUR_TOKEN" \
-H "Content-Type: application/json" \
-d '{"email": "user@example.com"}'
```
```python Python
import requests
response = requests.post(
"https://api.example.com/users",
headers={"Authorization": "Bearer YOUR_TOKEN"},
json={"email": "user@example.com"}
)
```
```javascript JavaScript
fetch("https://api.example.com/users", {
method: "POST",
headers: {
"Authorization": "Bearer YOUR_TOKEN",
"Content-Type": "application/json"
},
body: JSON.stringify({ email: "user@example.com" })
})
```
```
### ResponseExample
Show example API responses.
```mdx
```json Success Response
{
"id": "usr_123",
"email": "user@example.com",
"created_at": "2024-01-15T10:30:00Z"
}
```
```json Error Response
{
"error": {
"code": "invalid_email",
"message": "The provided email address is invalid"
}
}
```
```
## Link Pages
### Cards
Create clickable cards that link to other pages.
```mdx
Quick introduction to get up and running
Complete API documentation
Step-by-step tutorials and guides
Real-world implementation examples
```
**Attributes:**
- `title` - Card title
- `icon` - Icon name (Font Awesome or Lucide)
- `href` - Link destination
- `color` - Card accent color
**CardGroup attributes:**
- `cols` - Number of columns (1-4)
### Tiles
Compact tile layout for links.
```mdx
```
## Visual Context
### Icons
Display icons inline using Font Awesome or Lucide.
```mdx
```
**Attributes:**
- `icon` - Icon name
- `size` - Icon size in pixels
- `color` - Icon color
- `iconType` - Icon style (solid, regular, light, duotone)
### Mermaid Diagrams
Create diagrams using Mermaid syntax.
````mdx
```mermaid
graph TD
A[Start] --> B{Is it working?}
B -->|Yes| C[Great!]
B -->|No| D[Debug]
D --> A
```
````
**Supported diagram types:**
- Flowcharts
- Sequence diagrams
- Class diagrams
- State diagrams
- Entity relationship diagrams
- Gantt charts
- Pie charts
- Git graphs
**Sequence diagram example:**
````mdx
```mermaid
sequenceDiagram
participant Client
participant API
participant Database
Client->>API: POST /users
API->>Database: INSERT user
Database-->>API: Success
API-->>Client: 201 Created
```
````
### Color
Display color swatches with hex values.
```mdx
```
### Tree
Display file tree structures.
```mdx
```
## Page Frontmatter
All MDX pages support frontmatter for metadata and configuration.
```mdx
---
title: "Page Title"
description: "SEO description"
icon: "rocket"
mode: "wide"
---
Page content here...
```
**Common frontmatter fields:**
- `title` - Page title
- `description` - SEO description
- `icon` - Page icon
- `mode` - Layout mode (default, wide, custom, frame, center)
- `sidebarTitle` - Custom sidebar title
- `openapi` - OpenAPI operation (e.g., "GET /users")
**Mode options:**
- `default` - Standard content width
- `wide` - Wider content area
- `custom` - Full-width custom layout
- `frame` - Embedded frame (Aspen/Almond themes only)
- `center` - Centered content (Mint/Linden themes only)
## React Components
Import and use custom React components in MDX.
```mdx
---
title: "Custom Components"
---
import { CustomButton } from '@/components/CustomButton'
import { Chart } from '@/components/Chart'
console.log('clicked')}>
Click me
```
Place custom components in `/components` directory or configure import paths in your build setup.