MDX Components

Callouts

Callouts help highlight important information.

Info Callout (Default)

This is a info callout with important information.

<Callout>
  This is a info callout with important information.
</Callout>

Warning Callout

This is a warning message.

<Callout type="warn">
  This is a warning message.
</Callout>

Error Callout

This is an error message.

<Callout type="error">
  This is an error message.
</Callout>

Success Callout

This is a success message!

<Callout type="success">
  This is a success message!
</Callout>

Cards

Display content in attractive card layouts.

Card Group

Getting Started

Quick introduction to Sleeve

API Reference

Complete API documentation

Guides

Step-by-step tutorials

Examples

Real-world examples

<CardGroup cols={2}>
  <Card title="Getting Started" icon="rocket" href="/docs/get-started">
    Quick introduction to Sleeve
  </Card>
  <Card title="API Reference" icon="code" href="/docs/mcp-server">
    Complete API documentation
  </Card>
  <Card title="Guides" icon="book">
    Step-by-step tutorials
  </Card>
  <Card title="Examples" icon="lightbulb">
    Real-world examples
  </Card>
</CardGroup>

Accordions

Collapsible content sections.

<AccordionGroup>
  <Accordion title="What is Sleeve?">
    Sleeve is an enterprise documentation platform that helps teams create, manage, and share knowledge.
  </Accordion>
  <Accordion title="How do I get started?">
    Sign in with Google or GitHub, create an organization, and start documenting!
  </Accordion>
  <Accordion title="Is it free?">
    Sleeve offers both free and premium plans to suit your needs.
  </Accordion>
</AccordionGroup>

Steps

Show sequential instructions.

Run npm install to install all required packages.

Set up your environment variables in .env.local.

Run npm run dev to start the development server.

<Steps>
  <Step title="Install Dependencies">
    Run `npm install` to install all required packages.
  </Step>
  <Step title="Configure Environment">
    Set up your environment variables in `.env.local`.
  </Step>
  <Step title="Start Development Server">
    Run `npm run dev` to start the development server.
  </Step>
</Steps>

Tabs

Organize content in tabs.

Install using npm: npm install

Install using yarn: yarn install

Install using pnpm: pnpm install

<Tabs items={['npm', 'yarn', 'pnpm']}>
  <Tab value="npm">
    Install using npm
  </Tab>
  <Tab value="yarn">
    Install using yarn
  </Tab>
  <Tab value="pnpm">
    Install using pnpm
  </Tab>
</Tabs>

Code Groups

Display multiple code examples with tabs. CodeGroup automatically creates tabs from multiple code blocks.

app.js
const express = require('express');
const app = express();

app.get('/', (req, res) => {
  res.send('Hello World!');
});
app.py
from flask import Flask
app = Flask(__name__)

@app.route('/')
def hello():
    return 'Hello World!'

Wrap multiple code blocks with <CodeGroup> tags to create a tabbed code interface. Each code block should have a title attribute.

File Tree

Display file and folder structures.

page.tsx
layout.tsx
package.json
tsconfig.json
<Files>
  <Folder name="app" defaultOpen>
    <Folder name="api">
      <File name="route.ts" />
      <File name="auth.ts" />
    </Folder>
    <Folder name="components">
      <File name="header.tsx" />
      <File name="footer.tsx" />
    </Folder>
    <File name="page.tsx" />
    <File name="layout.tsx" />
  </Folder>
  <File name="package.json" />
  <File name="tsconfig.json" />
</Files>

Badge

Add inline badges to highlight important information.

New
Beta
Deprecated
<Badge>New</Badge> <Badge variant="secondary">Beta</Badge> <Badge variant="destructive">Deprecated</Badge>

Mermaid Diagrams

Create diagrams using Mermaid syntax.

```mermaid
graph TD
    A[Start] --> B{Is it working?}
    B -->|Yes| C[Great!]
    B -->|No| D[Debug]
    D --> B
    C --> E[End]
```

Video

Embed videos in your documentation.

<Video src="/path/to/video.mp4" />

API Documentation Components

ParamField

Document API parameters.

userIdpathstringrequired

The unique identifier for the user

emailpathstring

The user's email address

<ParamField path="userId" type="string" required>
  The unique identifier for the user
</ParamField>

<ParamField path="email" type="string">
  The user's email address
</ParamField>

ResponseField

Document API response fields.

idstring

Unique identifier for the resource

created_attimestamp

Creation timestamp

<ResponseField name="id" type="string">
  Unique identifier for the resource
</ResponseField>

<ResponseField name="created_at" type="timestamp">
  Creation timestamp
</ResponseField>

Expandable

Create expandable sections.

<Expandable title="Advanced Options">
  These are advanced configuration options that most users won't need.
  
  - Option 1: Description
  - Option 2: Description
</Expandable>

Frame

Display content in a styled frame.

This content is displayed in a styled frame.

<Frame>
  This content is displayed in a styled frame.
</Frame>

Display prominent banners.

🎉 New feature released! Check out our latest updates.

<Banner variant="rainbow" rainbowColors={['rgba(255,100,0,0.5)', 'rgba(255,100,0,0.5)', 'transparent', 'rgba(255,100,0,0.5)', 'transparent', 'rgba(255,100,0,0.5)', 'transparent']}>
  🎉 New feature released! Check out our latest updates.
</Banner>

Standard Markdown

All standard Markdown syntax is supported:

Headings

## Heading 2
### Heading 3
#### Heading 4

Text Formatting

Bold text | Italic text | Strikethrough | Inline code

**Bold text**
*Italic text*
~~Strikethrough~~
`Inline code`

Lists

- Unordered list item 1
- Unordered list item 2
  - Nested item

1. Ordered list item 1
2. Ordered list item 2

Images render normally in markdown and are automatically zoomable:

PUG Banner

[Link text](https://example.com)
![Alt text](/image.png)

Blockquotes

This is a blockquote with multiple lines

> This is a blockquote
> with multiple lines

Tables

Column 1Column 2Column 3
Row 1DataData
Row 2DataData
| Column 1 | Column 2 | Column 3 |
|----------|----------|----------|
| Row 1    | Data     | Data     |
| Row 2    | Data     | Data     |

Tips for Using Components

Most components don't require imports! They're automatically available in all MDX files.

For the best documentation experience, combine multiple components to create rich, interactive content.

MCP Server Integration

Connect Sleeve to AI development tools like Cursor