Admonition Components Showcase

This post demonstrates the various admonition components available for use in MDX posts. These components help highlight important information and improve readability.

Basic Admonitions

📝

Note

This is a Note admonition. Use it for general information that’s helpful but not critical. It has a blue color scheme and a 📝 icon.

💡

Tip

This is a Tip admonition. Perfect for helpful suggestions, best practices, or pro tips. It features a green color scheme with a 💡 icon.

ℹ️

Info

This is an Info admonition. Great for providing additional context or explanatory information. It uses a cyan color scheme with an ℹ️ icon.

⚠️

Warning

This is a Warning admonition. Use it to alert readers about potential issues or things to be careful about. It has a yellow color scheme and ⚠️ icon.

🚨

Danger

This is a Danger admonition. Reserve this for critical warnings about things that could cause serious problems. It features a red color scheme with a 🚨 icon.

Custom Titles

You can also provide custom titles for any admonition:

📝

Custom Note Title

This note has a custom title instead of the default “Note” label.

💡

Pro Developer Tip

Always use meaningful variable names in your code. Your future self will thank you!

⚠️

Breaking Change Alert

The API endpoint /api/v1/users will be deprecated in version 2.0. Please migrate to /api/v2/users.

Rich Content

Admonitions support rich markdown content including:

ℹ️

Markdown Support

Bold text and italic text
inline code and code blocks
Links to external resources
Lists and other markdown elements

function example() {
  console.log("Code blocks work too!");
}

Nested Usage

💡

Best Practices

Here are some guidelines for using admonitions effectively:

📝

Note

Don’t overuse admonitions - too many can make your content feel cluttered and reduce their impact.

Use Note for supplementary information
Use Tip for helpful suggestions
Use Info for explanatory content
Use Warning for caution-worthy items
Use Danger for critical alerts only

Styling

All admonitions are designed to work with the dark theme and include:

Color-coded left borders
Semi-transparent background colors
Appropriate text colors for dark mode
Consistent spacing and typography
Icon indicators for quick visual recognition

🚨

Important Note

These components are specifically styled for dark mode. If you switch to a light theme, you may need to adjust the color schemes accordingly.

That’s it! These admonition components should help make your technical writing more engaging and easier to scan for important information.