astro components in solid js

[hoary marlin]

Can i import Astro components inside SolidJS

Also is it not recommended to do that>

[oak reef]

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

---

No, you cannot import Astro components (i.e., .astro files) directly inside SolidJS components. UI framework components like SolidJS must be written entirely as valid code for that framework, using only its own imports and packages. Astro components cannot be imported into framework components such as .jsx, .tsx, or .svelte files.

However, you can use the Astro <slot /> pattern to pass static content generated by Astro components as children to your framework components, but this must be done inside an .astro component—not inside the SolidJS component itself. This means you can compose Astro and SolidJS components together at the Astro layer, but not by importing .astro files into SolidJS files.

Any UI framework component becomes an “island” of that framework. These components must be written entirely as valid code for that framework, using only its own imports and packages. You cannot import .astro components in a UI framework component (e.g. .jsx or .svelte)
Can I use Astro components inside my framework components?

So, it is not recommended (and not supported) to import Astro components inside SolidJS components. The recommended approach is to compose them at the Astro level.

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