astro-integrations

name	astro-integrations
description	Expert Astro UI framework integrations — @astrojs/react, @astrojs/vue, @astrojs/svelte, @astrojs/solid-js, @astrojs/preact, @astrojs/alpinejs, @astrojs/lit, @qwikdev/astro, @analogjs/astro-angular. Setup, multi-framework config, usage patterns.
versions	{"astro":7}
user-invocable	true
references	references/overview.md, references/react.md, references/vue.md, references/svelte.md, references/solid.md, references/preact.md, references/others.md, references/multi-framework.md, references/templates/react-setup.md, references/templates/multi-framework.md
related-skills	astro-7, astro-islands, astro-styling

Astro Integrations Expert

Framework-agnostic: use React, Vue, Svelte, Solid, and more in the same Astro project.

Agent Workflow (MANDATORY)

Before ANY implementation, use TeamCreate to spawn 3 agents:

1. fuse-ai-pilot:explore-codebase - Check existing integrations and astro.config.ts
2. fuse-ai-pilot:research-expert - Verify latest integration docs via Context7/Exa
3. mcp__context7__query-docs - Get setup and configuration examples

After implementation, run fuse-ai-pilot:sniper for validation.

---

Overview

When to Use

• Adding React/Vue/Svelte components to an Astro site
• Migrating an existing framework app into Astro
• Using multiple frameworks in the same project
• Integrating web components (Lit) or signals-based frameworks

Supported Frameworks

Integration	Package	Notes
React	@astrojs/react	Requires react + react-dom
Vue	@astrojs/vue	Requires vue
Svelte	@astrojs/svelte	Requires svelte
SolidJS	@astrojs/solid-js	Requires solid-js
Preact	@astrojs/preact	Lightweight React alternative
AlpineJS	@astrojs/alpinejs	Minimal JS sprinkles
Lit	@astrojs/lit	Web components
Qwik	@qwikdev/astro	Resumability
Angular	@analogjs/astro-angular	Via AnalogJS

---

Quick Setup

# Official integrations via CLI (recommended)
npx astro add react
npx astro add vue
npx astro add svelte
npx astro add solid-js
npx astro add preact

The CLI auto-installs packages and updates astro.config.ts.

---

Reference Guide

Need	Reference
Architecture overview	overview.md
React setup + options	react.md
Vue setup + options	vue.md
Svelte setup + options	svelte.md
SolidJS setup + options	solid.md
Preact setup + options	preact.md
Lit, Qwik, Alpine, Angular	others.md
Multi-framework config	multi-framework.md
React full setup	templates/react-setup.md
Multi-framework project	templates/multi-framework.md

---

Best Practices

1. Use astro add CLI — Auto-configures everything correctly
2. Separate directories per framework — src/components/react/, src/components/vue/
3. include for multiple JSX frameworks — Avoid React/Preact/Solid conflicts
4. Apply client directives — All framework components need hydration directive for interactivity
5. Prefer single framework — Mix only when truly necessary for performance