Build your Astro website without sacrificing your favorite component framework.
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.
To configure Astro to use these frameworks, first, install its integration and any associated peer dependencies:
Then import and add the function to your list of integrations in
⚙️ 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 one of the
client:* directives. This is a component attribute to define how your component should be rendered and hydrated.
Most directives will render the component on the server at build time. Component JS will be sent to the client according to the specific directive. The component will hydrate when its JS has finished importing.
Available Hydration DirectivesSection titled Available Hydration Directives
There are serveral 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 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