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:

To get started, open the

src/pages

directory in your project.

Read our docs Join our Discord

What's New in Astro 5.0?

From content layers to server islands, click to learn more about the new features and improvements in Astro 5.0

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!