---
title: Use MDX Components
description: Build richer documentation with CamelMind's built-in MDX components. No imports required.
---
CamelMind includes built-in MDX components to make your documentation easier to read and navigate. Every component is available in any `.mdx` file—no imports or setup required.
---
## Add Callout components
Use the `Callout` component to highlight notes, tips, warnings, important information, critical warnings, or success messages.
CamelMind provides the following Callout types:
```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.
### Customize a Callout title
Use the `title` prop to set a custom title for a Callout instead of its default heading.
```mdx
The API accepts up to 1,000 requests per minute.
```
The API accepts up to 1,000 requests per minute.
### Customize a Callout icon
Use the `icon` prop to replace the default Callout icon with a [Lucide](https://lucide.dev/icons/) icon.
```mdx
Ready to launch.
```
Ready to launch.
---
## Add Steps components
Use the `Steps` component to present installation instructions, tutorials, and other sequential workflows as a series of ordered steps.
```mdx
Run the installer.
Launch the development server.
```
rendered as:
Run the installer.
Launch the development server.
---
## Add tabs components
Use tabs to organize related content that readers can switch between, such as instructions for different operating systems, languages, or configuration options.
```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.
===
---
## Add Details components
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 blocks
Use standard Markdown code fences to display syntax-highlighted code with built-in copy, line-wrapping, and dark-mode support.
```typescript
function greet(name: string) {
return `Hello ${name}`;
}
```
---
## Control AI-visible content with LLMOnly and LLMIgnore
Use `LLMOnly` and `LLMIgnore` to control whether specific documentation content is visible to AI systems through `llms.txt`.
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](/features/llms-txt) for more information.