How to Add an Integration to Astro

Integrations add features to your Astro project, such as MDX support, a sitemap, or the ability to use React components.

Step 1: Run astro add

In your project folder, run this command:

npx astro add mdx

You can replace mdx with the integration you want. For example, use sitemap or react.

Step 2: Approve the changes

Astro shows you exactly what it’s about to change and asks you to confirm. Press Enter or type y to accept.

It installs the package and adds it to astro.config.mjs, which 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

Press Ctrl and C to stop your dev server, then start it again with npm run dev.

Three integrations worth knowing

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

Only add what you need. Every integration is one more thing to keep updated.

For step-by-step guides to the most useful ones, see how to add Tailwind CSS and how to add a sitemap.

Frequently asked questions

Is an integration the same as a WordPress plugin?

They're similar, but integrations usually work at build time and rarely add a settings page. You configure them in astro.config.mjs.

Where can I find integrations?

Browse the official directory at astro.build/integrations.