Mix Frameworks in Astro
From the Astro cheat sheet · Framework Components · verified Jul 2026
Mix Frameworks
astro
---
import ReactCounter from './ReactCounter.jsx';
import VueButton from './VueButton.vue';
import SvelteCard from './SvelteCard.svelte';
---
<div>
<ReactCounter client:load />
<VueButton client:idle />
<SvelteCard client:visible />
</div>✅ Mix React, Vue, Svelte, Solid in same .astro file
💡 Each framework only ships its own runtime when used
🔍 Cannot mix frameworks within same framework component file
⚡ Supported props: strings, numbers, objects, arrays, dates, maps, sets
frameworksreactvuesveltemulti-framework