| 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:
- fuse-ai-pilot:explore-codebase - Check existing integrations and astro.config.ts
- fuse-ai-pilot:research-expert - Verify latest integration docs via Context7/Exa
- 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
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
Best Practices
- Use
astro add CLI — Auto-configures everything correctly
- Separate directories per framework —
src/components/react/, src/components/vue/
include for multiple JSX frameworks — Avoid React/Preact/Solid conflicts- Apply client directives — All framework components need hydration directive for interactivity
- Prefer single framework — Mix only when truly necessary for performance
