Skip to main content
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

The fastest way to add an integration is using the astro add command: 
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: 
npx astro add react tailwind

​
Manual Installation

You can also manually install integrations:
  1. Install the package:
npm install @astrojs/react
  1. Add it to your config:
astro.config.mjs
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:
astro.config.mjs
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

UI Frameworks

Add support for React, Vue, Svelte, Solid, Preact, and Alpine.js components

SSR Adapters

Deploy your site with server-side rendering to Node, Vercel, Netlify, Cloudflare, and more

Official Integrations

MDX, Sitemap, Partytown, Markdoc, and other official integrations

Community Integrations

Discover integrations created by the Astro community

​
How Integrations Work

Integrations use the Astro Integration API to hook into the build process. Here’s a simplified example from the React integration: 
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:
astro.config.mjs
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

UI Framework Integrations

Learn about React, Vue, Svelte, and other framework integrations

SSR Adapters

Deploy your site with server-side rendering

Build docs developers (and LLMs) love

Get started for freeTalk to us