Using Components in MDX

This MDX file demonstrates how to import and use Astro components.

Imported Component

Here’s the Welcome component imported from our components directory:

How This Works

1. Import at the top: Use ES6 import syntax after the frontmatter
2. Use like JSX: Reference the component with JSX syntax
3. Props supported: You can pass props to components

import Welcome from '../../components/Welcome.astro';
import CustomCard from '../../components/CustomCard.astro';

<Welcome />
<CustomCard title="My Card" description="Card content here" />

That’s how you can combine the power of Markdown with interactive components!