mdx custom component with props

[polar pine]

Hi @distant tundra. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

To use a custom component with props in MDX, you can indeed pass props like type='fancy' to your custom component. The Astro documentation provides information on how to achieve this. Here's how you can do it:

1. First, import your custom component in your MDX file.
2. Then, use the component in your MDX content, passing the prop as you would in JSX.

Here's an example of how this might look:

---
title: My MDX Page
---
import CustomLink from '../components/CustomLink.astro';

# Welcome to my page

<CustomLink href="/some-page" type="fancy">Click me!</CustomLink>

In this example, CustomLink is your custom component, and type="fancy" is the prop you're passing to it.

You can also use the components export to map HTML elements to your custom components. This allows you to use Markdown syntax while still leveraging your custom components. Here's how you can do that:

---
title: My MDX Page
---
import CustomLink from '../components/CustomLink.astro';

export const components = {
  a: (props) => <CustomLink {...props} type="fancy" />
}

# Welcome to my page

[Click me!](/some-page)

In this case, all Markdown links will be rendered using your CustomLink component with type="fancy".

For more detailed information on using components in MDX, you can refer to the Using Components in MDX section in the Astro documentation.

MDX in Astro

Remember that if you're using a UI framework component, you might need to include a client: directive to make it interactive.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@distant tundra Kapa.ai is still learning and improving, please let me know how I did by reacting below.