Your browser does not support speech synthesis.
Ultimate MDX Component Guide
This blog is built with MDX, allowing us to use React components directly inside markdown. This document serves as the source of truth for all available components.
1. Highlight & Layout Utilities
These components help in structuring text and highlighting specific sections.
Key Points
Highlight a key takeaway.
Key Takeaway: Consistency is key when designing user interfaces.
<KeyPoint>Content...</KeyPoint>Info Box
For general information that needs to stand out.
This is a standard info box for general knowledge.
<InfoBox>Content...</InfoBox>Feature Section
Great for landing pages or showcasing features.
Fast Performance
Our app is optimized for speed.
<FeatureSection>Content...</FeatureSection>Important Note
Use this for critical info that shouldn't be missed.
Note: This API is deprecated in v2.0.
<ImportantNote>Content...</ImportantNote>Quote Callout
A styled quote block.
"The only way to do great work is to love what you do."
<QuoteCallout>Content...</QuoteCallout>Section Divider
A visual separator for sections.
<SectionDivider />2. Callouts
We support a versatile Callout component with aliases for convenience.
Info
Warning
Error
Success
Tip
Note
Usage:
// Generic
<Callout type="info|warning|error|success|tip|note" title="Optional Title">
Content
</Callout>
// Aliases
<InfoCallout>Content</InfoCallout>
<WarningCallout>Content</WarningCallout>
<ErrorCallout>Content</ErrorCallout>
<SuccessCallout>Content</SuccessCallout>
<TipCallout>Content</TipCallout>
<NoteCallout>Content</NoteCallout>3. Code & Technical
Code Blocks
Standard code blocks ```js ... ``` are syntax highlighted automatically.
Code Comparison
Compare two code snippets side-by-side.
var x = 1;const x: number = 1;<CodeComparison
leftFilename="File1"
leftCode="..."
rightFilename="File2"
rightCode="..."
/>File Tree
Visualize directory structures.
<FileTree>
- folder
- file.ext
</FileTree>4. Data Visualization
Charts
Render beautiful charts using Chart.js. Supported types: line, bar, pie, doughnut, polarArea, radar, bubble, scatter.
<Chart
type="bar"
data={{
labels: ['A', 'B'],
datasets: [{ label: 'Data', data: [1, 2] }]
}}
/>5. Media
Optimized Image
Alt Text
<Image src="..." alt="..." width={...} height={...} caption="..." />Image Gallery
Display a grid of images.
<Gallery>
<Image ... />
<Image ... />
</Gallery>GIFs
<Gif src="..." caption="..." />6. Embeds
YouTube
<YouTubeEmbed id="VIDEO_ID" title="..." /><Tweet tweetId="1234..." theme="light|dark" />Spotify
<Spotify spotifyId="..." type="track|album|playlist" theme="dark" height={380} />GitHub Gist
<Gist gistId="..." file="optional_filename" />7. Interactive Elements
Steps
Step 1
Step 2
<Steps>
<Step title="...">Content</Step>
</Steps>Quiz (New)
What is 2 + 2?
<Quiz
question="..."
options={["..."]}
correctAnswerIndex={0}
explanation="..."
/>Pros & Cons (New)
Pros
- Good thing
- Another good thing
Cons
- Bad thing
<ProsCons pros={[]} cons={[]} />Link Preview (New)
Next.js
The React Framework
<LinkPreview url="..." title="..." description="..." image="..." />Tooltip
This allows you to add a tooltip to text.
<Term term="Tooltip Text">Hover me</Term>Table of Contents
Conclusion
This guide covers every MDX component currently available in the system.