Build your Astro website without sacrificing your favorite component framework.
Astro supports a variety of popular frameworks including [React](https://react.dev/), [Preact](https://preactjs.com/), [Svelte](https://svelte.dev/), [Vue](https://vuejs.org/), [SolidJS](https://www.solidjs.com/), [AlpineJS](https://alpinejs.dev/) and [Lit](https://lit.dev/).
And Qwik also allow you to do that with [Qwikify](https://qwik.builder.io/docs/integrations/react/)
## Astro
```jsx
---
// Example: Mixing multiple framework components on the same page.
import MyReactComponent from '../components/MyReactComponent.jsx';
import MySvelteComponent from '../components/MySvelteComponent.svelte';
import MyVueComponent from '../components/MyVueComponent.vue';
---
<div>
<MySvelteComponent />
<MyReactComponent />
<MyVueComponent />
</div>
```
passing props to framework component
```jsx
---
import TodoList from '../components/TodoList.jsx';
import Counter from '../components/Counter.svelte';
---
<div>
<TodoList initialTodos={["learn Astro", "review PRs"]} />
<Counter startingCount={1} />
</div>
```
passing children
```jsx
---
import MyReactSidebar from '../components/MyReactSidebar.jsx';
---
<MyReactSidebar>
<p>Here is a sidebar with some text and a button.</p>
</MyReactSidebar>
```
passing multiple children
```jsx
---
import MySidebar from '../components/MySidebar.jsx';
---
<MySidebar>
<h2 slot="title">Menu</h2>
<p>Here is a sidebar with some text and a button.</p>
<ul slot="social-links">
<li><a href="https://twitter.com/astrodotbuild">Twitter</a></li>
<li><a href="https://github.com/withastro">GitHub</a></li>
</ul>
</MySidebar>
```
```jsx
export default function MySidebar(props) {
return (
<aside>
<header>{props.title}</header>
<main>{props.children}</main>
<footer>{props.socialLinks}</footer>
</aside>
)
}
```
nesting different framework children
```jsx
---
import MyReactSidebar from '../components/MyReactSidebar.jsx';
import MyReactButton from '../components/MyReactButton.jsx';
import MySvelteButton from '../components/MySvelteButton.svelte';
---
<MyReactSidebar>
<p>Here is a sidebar with some text and a button.</p>
<div slot="actions">
<MyReactButton client:idle />
<MySvelteButton client:idle />
</div>
</MyReactSidebar>
```
> [!success]
> The doc is very complete and the implementation seem promising thanks to the astro island selective hydration architecture
## Qwik