---
title: Use MDX Components
description: 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
A general note.
A helpful tip.
Something to watch out for.
Pay close attention.
A critical warning.
Configuration saved successfully.
```
A general note.
A helpful tip.
Something to watch out for.
Pay close attention.
A critical warning.
Configuration saved successfully.
### Custom title
Override the default heading with the `title` prop.
```mdx
The API accepts up to 1,000 requests per minute.
```
The API accepts up to 1,000 requests per minute.
### Custom icon
Replace the default icon with any [Lucide](https://lucide.dev/icons/) icon.
```mdx
Ready to launch.
```
Ready to launch.
---
## Steps
Use `Steps` for installation guides, tutorials, and sequential workflows to guide users through a process.
```mdx
Run the installer.
Launch the development server.
```
rendered as:
Run the installer.
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:
=== "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.
===
---
## Details (collapsible sections)
Use `Details` to hide optional or advanced information behind a collapsible section.
```mdx
These settings are only needed for enterprise deployments.
```
rendered as:
These settings are only needed for enterprise deployments.
### Anchor-linkable details
Give a `Details` component an `id` to create a shareable link.
```mdx
Content...
```
rendered as:
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
Internal implementation details.
```
Content inside `LLMIgnore` is visible to readers but omitted from `llms.txt`.
```mdx
Internal implementation details.
```
See LLMs.txt for more information.