Complete MDX Components Showcase

This guide demonstrates all available components and markdown features you can use in your blog posts.

---

1. Custom Components

Image Carousel

Perfect for showcasing multiple images with captions and titles:

Single Blog Image

For standalone images with captions:

YouTube Embed

Embed videos seamlessly:

External Link CTA

Create eye-catching call-to-action boxes:

---

2. Typography & Text Formatting

Headings

H1 Heading - Main Title

H2 Heading - Section

H3 Heading - Subsection

H4 Heading - Minor Section

H5 Heading - Small Section

H6 Heading - Smallest

Text Styles

Bold text for emphasis Italic text for subtle emphasis Bold and italic for strong emphasis Strikethrough for removed content Inline code for technical terms

Blockquotes

“Innovation distinguishes between a leader and a follower.” — Steve Jobs

Pro Tip: You can use blockquotes for important notes or quotes.

Horizontal Rules

Use --- to create separators:

---

3. Lists

Unordered Lists

• First item
• Second item
  • Nested item
  • Another nested item
• Third item

Ordered Lists

1. First step
2. Second step
   1. Sub-step A
   2. Sub-step B
3. Third step

Task Lists

• Completed task
• Pending task
• Another pending task

Definition Lists (using HTML)

Term 1

Definition of term 1

Term 2

Definition of term 2

---

4. Tables

Simple Table

Feature	Basic Plan	Pro Plan	Enterprise
Users	5	25	Unlimited
Storage	10GB	100GB	1TB
Support	Email	Priority	Dedicated
Price	$29/mo	$99/mo	Custom

Aligned Columns

Left Aligned	Center Aligned	Right Aligned
Text	Text	Text
More text	More text	More text

Complex Table with Formatting

Component	Purpose	Status
ImageCarousel	Image galleries	✅ Ready
BlogImage	Single images	✅ Ready
YouTubeEmbed	Video content	✅ Ready
ExternalLinkCTA	External links	✅ Ready

---

5. Code Blocks

Inline Code

Use const variable = value for inline code references.

JavaScript/TypeScript

function greet(name) {
  return `Hello, ${name}!`;
}

const result = greet("World");
console.log(result);

Python

def calculate_sum(numbers):
    return sum(numbers)

result = calculate_sum([1, 2, 3, 4, 5])
print(f"Sum: {result}")

JSON

{
  "name": "Accucia Softwares",
  "services": ["ERP", "Custom Software", "Consulting"],
  "established": 2020
}

CSS

.custom-component {
  background: linear-gradient(to right, #667eea, #764ba2);
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

Bash/Shell

npm install
npm run dev
npm run build

---

6. Links & References

Basic Links

Visit our website

Links with Titles

Read Documentation

Automatic Links

https://www.example.com

Reference-Style Links

Google and GitHub are useful resources.

---

7. Images (Markdown Style)

Remote Image

Remote Image with Title

---

8. Callouts & Alerts (Using HTML/Markdown)

Info Box

ℹ️ Information: This is an informational message to help guide users.

Warning Box

⚠️ Warning: Please be careful when implementing these changes.

Success Box

✅ Success: Your configuration has been updated successfully.

Danger Box

🚨 Critical: This action cannot be undone. Proceed with caution.

---

9. HTML Elements

You can use HTML directly in MDX:

Buttons

Click Me

Details/Summary (Accordion)

Click to expand

This is hidden content that appears when you click the summary.

• Point 1
• Point 2
• Point 3

Custom Styled Div

Keyboard Shortcuts

Press Ctrl + C to copy.

Highlighted Text

This is highlighted text for emphasis.

Subscript & Superscript

H₂O is water, and E=mc² is Einstein’s equation.

---

10. Footnotes

Here’s a sentence with a footnote¹.

You can also use named footnotes².

---

11. Emoji Support

You can use emojis directly:

• 🚀 Rocket
• 💡 Idea
• ✨ Sparkles
• 🎯 Target
• 📊 Chart
• 🔧 Tools
• 💻 Laptop
• 🌐 Globe

---

12. Escaping Characters

Use backslash to escape:

• *Not italic*
• [Not a link]
• `Not code`

---

13. Math Expressions (if supported)

Inline math: E = mc²

---

14. Nested Components & Advanced Usage

Carousel Inside Section

Multiple CTAs in Grid

---

15. Best Practices

Do’s ✅

• Use semantic headings (H1 → H2 → H3)
• Provide alt text for all images
• Use tables for structured data
• Add captions to images for context
• Keep paragraphs concise and readable

Don’ts ❌

• Don’t skip heading levels
• Don’t use images without alt text
• Don’t create overly wide tables
• Don’t overuse formatting
• Don’t forget to test responsive design

---

Conclusion

This showcase demonstrates all available MDX features and components. Mix and match these elements to create engaging, informative blog posts that resonate with your audience.

Ready to create your next post? Use this guide as a reference and unleash your creativity!

Footnotes

1. This is the first footnote. ↩

2. This is a named footnote with more detailed information. ↩