> ## 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.

# Integrations Overview

> Learn how to extend Astro with integrations for UI frameworks, SSR adapters, and more

Integrations are the key to extending Astro's functionality. They allow you to add UI framework support, enable server-side rendering, integrate tools like Tailwind CSS, and much more.

## What are Integrations?

Integrations are plugins that extend Astro's core functionality. They can:

* Add support for UI frameworks (React, Vue, Svelte, etc.)
* Enable server-side rendering with adapters
* Add content format support (MDX, Markdoc)
* Integrate development tools (Partytown, Sitemap)
* Enhance your build process

Integrations hook into Astro's build lifecycle through the Astro Integration API, allowing them to modify configuration, add virtual modules, inject scripts, and more.

## Installing Integrations

### Using `astro add` (Recommended)

The fastest way to add an integration is using the `astro add` command:

```bash theme={null}
npx astro add react
```

This command will:

1. Install the integration package
2. Update your `astro.config.mjs` file
3. Install any required peer dependencies

You can add multiple integrations at once:

```bash theme={null}
npx astro add react tailwind
```

### Manual Installation

You can also manually install integrations:

1. Install the package:

```bash theme={null}
npm install @astrojs/react
```

2. Add it to your config:

```js title="astro.config.mjs" theme={null}
import { defineConfig } from 'astro/config';
import react from '@astrojs/react';

export default defineConfig({
  integrations: [react()],
});
```

## Configuration

Integrations are added to the `integrations` array in your Astro config file. Most integrations accept options:

```js title="astro.config.mjs" theme={null}
import { defineConfig } from 'astro/config';
import react from '@astrojs/react';
import mdx from '@astrojs/mdx';

export default defineConfig({
  integrations: [
    react({
      include: ['**/react/*'],
      experimentalReactChildren: true,
    }),
    mdx(),
  ],
});
```

## Types of Integrations

<CardGroup cols={2}>
  <Card title="UI Frameworks" icon="react" href="/integrations/ui-frameworks">
    Add support for React, Vue, Svelte, Solid, Preact, and Alpine.js components
  </Card>

  <Card title="SSR Adapters" icon="server" href="/integrations/adapters">
    Deploy your site with server-side rendering to Node, Vercel, Netlify, Cloudflare, and more
  </Card>

  <Card title="Official Integrations" icon="puzzle-piece" href="/integrations/official-integrations">
    MDX, Sitemap, Partytown, Markdoc, and other official integrations
  </Card>

  <Card title="Community Integrations" icon="users">
    Discover integrations created by the Astro community
  </Card>
</CardGroup>

## How Integrations Work

Integrations use the Astro Integration API to hook into the build process. Here's a simplified example from the React integration:

```ts theme={null}
import react from '@vitejs/plugin-react';
import type { AstroIntegration } from 'astro';

export default function(): AstroIntegration {
  return {
    name: '@astrojs/react',
    hooks: {
      'astro:config:setup': ({ addRenderer, updateConfig }) => {
        // Add the React renderer
        addRenderer({
          name: '@astrojs/react',
          clientEntrypoint: '@astrojs/react/client.js',
          serverEntrypoint: '@astrojs/react/server.js',
        });
        
        // Update Vite config
        updateConfig({
          vite: {
            plugins: [react()],
          },
        });
      },
    },
  };
}
```

## Using Multiple Frameworks

Astro allows you to use multiple UI frameworks in the same project. When using multiple JSX frameworks (React, Preact, Solid), use the `include` option to avoid conflicts:

```js title="astro.config.mjs" theme={null}
import { defineConfig } from 'astro/config';
import react from '@astrojs/react';
import preact from '@astrojs/preact';
import solid from '@astrojs/solid-js';

export default defineConfig({
  integrations: [
    react({ include: ['**/react/*'] }),
    preact({ include: ['**/preact/*'] }),
    solid({ include: ['**/solid/*'] }),
  ],
});
```

## Next Steps

<CardGroup cols={2}>
  <Card title="UI Framework Integrations" href="/integrations/ui-frameworks">
    Learn about React, Vue, Svelte, and other framework integrations
  </Card>

  <Card title="SSR Adapters" href="/integrations/adapters">
    Deploy your site with server-side rendering
  </Card>
</CardGroup>