> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/withastro/astro/llms.txt
> Use this file to discover all available pages before exploring further.
# UI Framework Integrations
> Add React, Vue, Svelte, Solid, Preact, and Alpine.js components to your Astro project
Astro supports multiple UI frameworks, allowing you to use your favorite component library or mix and match frameworks in the same project.
## Available Framework Integrations
Use React components with server-side rendering and client-side hydration
Add Vue 3 components to your Astro project
Integrate Svelte components with support for Svelte 3, 4, and 5
Use SolidJS components with fine-grained reactivity
Add lightweight Preact components as a React alternative
Add Alpine.js for lightweight JavaScript behavior
## React
The React integration enables server-side rendering and client-side hydration for React components.
### Installation
```bash theme={null}
npx astro add react
```
Or manually:
```bash theme={null}
npm install @astrojs/react react react-dom
```
### Configuration
```js title="astro.config.mjs" theme={null}
import { defineConfig } from 'astro/config';
import react from '@astrojs/react';
export default defineConfig({
integrations: [react()],
});
```
### Options
```ts theme={null}
react({
// Only include React in specific directories
include: ['**/react/*'],
// Exclude specific patterns
exclude: ['**/ignore/*'],
// Experimental: Support React children in Astro components
experimentalReactChildren: false,
// Experimental: Disable streaming for React components
experimentalDisableStreaming: false,
// Custom Babel configuration
babel: {
plugins: [],
presets: [],
},
})
```
### Usage Example
Create a React component:
```tsx title="src/components/Counter.tsx" theme={null}
import { useState } from 'react';
export default function Counter({ count: initialCount }: { count: number }) {
const [count, setCount] = useState(initialCount);
return (
{count}
);
}
```
Use it in an Astro page:
```astro title="src/pages/index.astro" theme={null}
---
import Counter from '../components/Counter.tsx';
---
React in Astro
```
## Vue
The Vue integration adds support for Vue 3 components with server-side rendering.
### Installation
```bash theme={null}
npx astro add vue
```
Or manually:
```bash theme={null}
npm install @astrojs/vue vue
```
### Configuration
```js title="astro.config.mjs" theme={null}
import { defineConfig } from 'astro/config';
import vue from '@astrojs/vue';
export default defineConfig({
integrations: [vue()],
});
```
### Options
```ts theme={null}
vue({
// Pass options to @vitejs/plugin-vue
template: {
compilerOptions: {
isCustomElement: (tag) => tag.startsWith('custom-')
}
},
// Support for Vue JSX
jsx: true,
// App entrypoint for Vue plugins
appEntrypoint: '/src/pages/_app',
})
```
### Usage Example
```vue title="src/components/Greeting.vue" theme={null}
{{ greeting }}
```
## Svelte
The Svelte integration supports Svelte 3, 4, and 5 with server-side rendering.
### Installation
```bash theme={null}
npx astro add svelte
```
### Configuration
```js title="astro.config.mjs" theme={null}
import { defineConfig } from 'astro/config';
import svelte from '@astrojs/svelte';
export default defineConfig({
integrations: [svelte()],
});
```
### Options
```ts theme={null}
svelte({
// Pass options to the Svelte compiler
compilerOptions: {
css: 'injected',
},
// Preprocess Svelte files
preprocess: [],
})
```
### Usage Example
```svelte title="src/components/Todo.svelte" theme={null}
{task}
```
## Solid
The Solid integration enables SolidJS components with fine-grained reactivity.
### Installation
```bash theme={null}
npx astro add solid
```
### Configuration
```js title="astro.config.mjs" theme={null}
import { defineConfig } from 'astro/config';
import solid from '@astrojs/solid-js';
export default defineConfig({
integrations: [solid()],
});
```
### Usage Example
```tsx title="src/components/Signal.tsx" theme={null}
import { createSignal } from 'solid-js';
export default function Signal() {
const [count, setCount] = createSignal(0);
return (
);
}
```
## Preact
Preact is a lightweight alternative to React with the same modern API.
### Installation
```bash theme={null}
npx astro add preact
```
### Configuration
```js title="astro.config.mjs" theme={null}
import { defineConfig } from 'astro/config';
import preact from '@astrojs/preact';
export default defineConfig({
integrations: [preact()],
});
```
### Options
```ts theme={null}
preact({
// Include only in specific paths
include: ['**/preact/*'],
// Use Preact's compatibility layer for React
compat: true,
})
```
## Alpine.js
Alpine.js allows you to add interactive behavior with minimal JavaScript.
### Installation
```bash theme={null}
npx astro add alpinejs
```
### Configuration
```js title="astro.config.mjs" theme={null}
import { defineConfig } from 'astro/config';
import alpinejs from '@astrojs/alpinejs';
export default defineConfig({
integrations: [alpinejs()],
});
```
### Usage Example
```astro title="src/components/Dropdown.astro" theme={null}
Dropdown content
```
## Using Multiple Frameworks
Astro supports using multiple frameworks in the same project:
```js title="astro.config.mjs" theme={null}
import { defineConfig } from 'astro/config';
import react from '@astrojs/react';
import vue from '@astrojs/vue';
import svelte from '@astrojs/svelte';
export default defineConfig({
integrations: [react(), vue(), svelte()],
});
```
### Avoiding JSX Conflicts
When using multiple JSX frameworks (React, Preact, Solid), use the `include` option:
```js title="astro.config.mjs" theme={null}
import { defineConfig } from 'astro/config';
import preact from '@astrojs/preact';
import react from '@astrojs/react';
import solid from '@astrojs/solid-js';
export default defineConfig({
integrations: [
preact({ include: ['**/preact/*'] }),
react({ include: ['**/react/*'] }),
solid({ include: ['**/solid/*'] }),
],
});
```
Organize your components by framework:
```
src/
├── components/
│ ├── react/
│ │ └── Counter.tsx
│ ├── preact/
│ │ └── Button.tsx
│ └── solid/
│ └── Signal.tsx
```
## Client Directives
All framework components support Astro's client directives for controlling hydration:
* `client:load` - Hydrate immediately on page load
* `client:idle` - Hydrate when the browser is idle
* `client:visible` - Hydrate when the component enters the viewport
* `client:media` - Hydrate when a media query matches
* `client:only` - Skip server rendering, only render on the client
```astro theme={null}
```
## Next Steps
Explore MDX, Sitemap, Partytown, and more
Deploy with server-side rendering