How to Add an Integration to Astro

An integration is an add-on for Astro. It gives your site a new power. Some add MDX support. Some make a sitemap. Some let you use React parts on a page.

Step 1: Run astro add

Open your terminal in your project folder. Then run this command:

npx astro add mdx

Swap mdx for the add-on you want. For example, use sitemap or react.

Step 2: Say yes to the changes

Astro shows you just what it will change. Then it asks you to agree. Press Enter or type y to say yes.

Astro installs the package. It also adds a line to astro.config.mjs. That file is your site’s settings file. It ends up looking like this:

import { defineConfig } from 'astro/config';
import mdx from '@astrojs/mdx';

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

Step 3: Restart your dev server

Your dev server shows your site while you work on it. Press Ctrl and C to stop it. Then start it again with npm run dev.

Three add-ons worth knowing

Integration	What it does
mdx	Lets you use components in Markdown
sitemap	Makes a sitemap for search engines
react	Lets you build islands with React

Only add what you need. Each add-on is one more thing to keep up to date.

Want step-by-step help with the most useful ones? See how to add Tailwind CSS and how to add a sitemap.

Looking for ideas? See the 12 best Astro integrations for beginners, each tested on Astro 7.4.

Frequently asked questions

Is an integration the same as a WordPress plugin?

They are alike. But integrations mostly do their work at build time, and they rarely add a settings page. You set them up in astro.config.mjs.

Where can I find integrations?

Browse the official list at astro.build/integrations, or start with our list of the 12 best Astro integrations for beginners.