Build your Astro website without sacrificing your favorite component framework.
Astro supports a variety of popular frameworks including React, Preact, Svelte, Vue, SolidJS, AlpineJS and Lit.
Installing IntegrationsSection titled Installing Integrations
Astro ships with optional integrations for React, Preact, Svelte, Vue, SolidJS, AlpineJS and Lit. One or several of these Astro integrations can be installed and configured in your project.
⚙️ View the Integrations Guide for more details on installing and configuring Astro integrations.
⚙️ Want to see an example for the framework of your choice? Visit astro.new and select one of the framework templates.
Using Framework ComponentsSection titled Using Framework Components
/src/components, or can be organized in any way you like.
To use a framework component, import it from its relative path in your Astro component script. Then, use the component alongside other components, HTML elements and JSX-like expressions in the component template.
Hydrating Interactive ComponentsSection titled Hydrating Interactive Components
A framework component can be made interactive (hydrated) using a
With all client directives except
Available Hydration DirectivesSection titled Available Hydration Directives
There are several hydration directives available for UI framework components:
📚 See our directives reference page for a full description of these hydration directives, and their usage.
Mixing FrameworksSection titled Mixing Frameworks
You can import and render components from multiple frameworks in the same Astro component.
Passing Props to Framework ComponentsSection titled Passing Props to Framework Components
You can pass props from Astro components to framework components:
Passing Children to Framework ComponentsSection titled Passing Children to Framework Components
Inside of an Astro component, you can pass children to framework components. Each framework has its own patterns for how to reference these children: React, Preact, and Solid all use a special prop named
children, while Svelte and Vue use the
<slot /> element.
Additionally, you can use Named Slots to group specific children together.
For React, Preact, and Solid these slots will be converted to a top-level prop. Slot names using
kebab-case will be converted to
For Svelte and Vue these slots can be referenced using a
<slot> element with the
name attribute. Slot names using
kebab-case will be preserved.
Nesting Framework ComponentsSection titled Nesting Framework Components
Inside of an Astro file, framework component children can also be hydrated components. This means that you can recursively nest components from any of these frameworks.
Can I use Astro Components inside my Framework Components?Section titled Can I use Astro Components inside my Framework Components?
Any UI framework component becomes an “island” of that framework. These components must be written entirely as valid code for that framework, using only its own imports and packages. You cannot import
.astro components in a UI framework component (e.g.
You can, however, use the Astro
<slot /> pattern to pass static content generated by Astro components as children to your framework components inside an
Can I Hydrate Astro Components?Section titled Can I Hydrate Astro Components?
If you try to hydrate an Astro component with a
client: modifier, you will get an error.
Astro components are HTML-only templating components with no client-side runtime. But, you can use a
📚 Learn more about client-side
<script> tags in Astro components