Use MDX Components

Build richer documentation with CamelMind's built-in MDX components. No imports required.

CamelMind includes a library of built-in MDX components that help you create documentation that's easier to read and navigate. Every component is available in any .mdx file—no imports or setup required.


Callout

Use a Callout to emphasize important information, tips, warnings, or success messages.

mdx
<Callout type="note">A general note.</Callout>

<Callout type="tip">A helpful tip.</Callout>

<Callout type="warning">
Something to watch out for.
</Callout>

<Callout type="important">
Pay close attention.
</Callout>

<Callout type="danger">
A critical warning.
</Callout>

<Callout type="success">
Configuration saved successfully.
</Callout>
Note
A general note.
Tip
A helpful tip.
Warning
Something to watch out for.
Important
Pay close attention.
Danger
A critical warning.
Success
Configuration saved successfully.

Custom title

Override the default heading with the title prop.

mdx
<Callout
  type="warning"
  title="Rate limits apply"
>
The API accepts up to 1,000 requests per minute.
</Callout>
Rate limits apply

The API accepts up to 1,000 requests per minute.

Custom icon

Replace the default icon with any Lucide icon.

mdx
<Callout type="tip" icon="rocket">
Ready to launch.
</Callout>
Tip

Ready to launch.


Steps

Use Steps for installation guides, tutorials, and sequential workflows to guide users through a process.

mdx
<Steps>
  <Step n={1} title="Install">
    Run the installer.
  </Step>

  <Step n={2} title="Start">
    Launch the development server.
  </Step>
</Steps>

rendered as:

1

Install

Run the installer.

2

Start

Launch the development server.


Tabs

Use tabs when readers can choose between multiple alternatives.

mdx
  === "Tab 1"

  Camels have remarkable desert adaptations. A hump stores up to 80 pounds of fat for energy rather than water.

  === "Tab 2"
  Camels are surprisingly fast, able to run up to 40 miles per hour. They can carry up to 900 pounds for 25 miles a day.

  ===

rendered as:

Camels have remarkable desert adaptations. A hump stores up to 80 pounds of fat for energy rather than water.


Details (collapsible sections)

Use Details to hide optional or advanced information behind a collapsible section.

mdx
<Details summary="Advanced configuration">

These settings are only needed for enterprise deployments.

</Details>

rendered as:

Advanced configuration

These settings are only needed for enterprise deployments.

Anchor-linkable details

Give a Details component an id to create a shareable link.

mdx
<Details
  id="rate-limits"
  summary="Rate limits"
>

Content...

</Details>

rendered as:

Rate limits

Content...


Display code

Standard Markdown code fences automatically include:

  • Syntax highlighting
  • Copy button
  • Line wrapping
  • Dark mode support
typescript
function greet(name: string) {
  return `Hello ${name}`;
}

Control AI-visible content

Content inside LLMOnly is included in llms.txt but hidden from the rendered documentation.

mdx
<LLMIgnore>

Internal implementation details.

</LLMIgnore>

See LLMs.txt for more information.

July 25, 2026
Was this page helpful?