Framework Integrations

Astro doesn’t have its own UI framework for islands — it integrates with the major ones. Install whichever you want.

The Command

npx astro add react      # or vue, svelte, solid, preact, alpine, lit

The CLI installs the framework, adds it to astro.config.mjs, and configures TypeScript if needed.

After npx astro add react:

// astro.config.mjs
import { defineConfig } from "astro/config";
import react from "@astrojs/react";

export default defineConfig({
  integrations: [react()],
});

Now you can drop .tsx / .jsx files in src/components/ and use them like any other component.

Multiple Frameworks At Once

Yes, in the same project — even on the same page:

import react from "@astrojs/react";
import vue from "@astrojs/vue";
import svelte from "@astrojs/svelte";

export default defineConfig({
  integrations: [react(), vue(), svelte()],
});

The cost: each framework’s runtime is its own ~5–10 KB (gzipped). If you only use React for one widget, you pay for one runtime — not the others.

Most projects pick one and stick with it; the multi-framework ability is rare in practice but real when you need it.

Common Integrations

Up Next

A concrete example — a React component as an island.