Learn how to create and use reusable React components in your MDX content
kristian
Author
This guide shows you how to create rich, interactive content using our custom MDX component system.
Provide a quick summary at the start of your posts:
Use callout boxes to highlight important information:
This is an info callout - perfect for tips and helpful information.
Warning callouts grab attention for important notices.
Success callouts celebrate achievements and positive outcomes.
Error callouts help users avoid common mistakes.
Drive user actions with styled CTA components:
Rich call-to-action cards with feature lists:
Join thousands of families using Homi to find their perfect home
Capture email subscribers with beautiful newsletter forms:
Weekly insights on finding and buying your perfect property
Showcase features in an organized grid:
Full TypeScript support for your content and components
See changes instantly during development
Built-in metadata and performance optimization
Add new components as your needs grow
Add credibility with styled quotes:
The MDX component system makes it so easy to create rich, interactive content. Our marketing team loves being able to drop in calls-to-action and feature highlights without touching any code.
Show data with impact:
Embed YouTube or Vimeo videos seamlessly:
Combine product screens or editorial photos in a balanced gallery. Selecting an image opens the full lightbox.
Use an intent-matched card when the article naturally leads into a specific Homi surface.
No. Components in the shared MDX registry are available to every blog and engineering article.
No. Add one only when the reader reaches a real decision point and the linked Homi surface is the useful next step.
Pro Tip: Test your components with different content lengths to ensure they're robust and flexible.
Ready to start using these components in your own content?
Founder of homi and real estate enthusiast.
Continue reading with these related articles
Kristian Elset BøKeep portal listings, broker messages, documents, and the questions you still cannot answer in one place while you compare homes abroad.
Kristian Elset BøCommon family conflicts during house searches and how collaborative tools transform the experience from stressful disagreements to shared success.
Kristian Elset BøThe journey from tracking properties in Excel to building Homi, and how the right timing, AI breakthrough, and real user needs created the perfect storm for a new category of real estate tools.