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øHow real estate professionals use Homi's broker tools to manage multiple clients, streamline workflows, and close more deals with less stress.
Kristian Elset BøA practical guide to turning commute, routines, budget, safety research, and household tradeoffs into a neighborhood shortlist before you commit to a home.
Kristian Elset BøWhy general-purpose AI falls short for the biggest purchase of your life, and how structured workspaces combined with AI create better home search outcomes.