Other Integrations

Enhance your Astro site with MDX, Sitemap, Partytown, and other useful integrations.

Beyond UI frameworks and deployment adapters, Astro offers many other integrations to enhance your site with additional features and tools.

Popular Integrations

MDX

Use JSX components and expressions in Markdown files

Sitemap

Automatically generate XML sitemaps for SEO

Partytown

Run third-party scripts in a web worker

Tailwind CSS

Utility-first CSS framework integration

MDX Integration

The @astrojs/mdx integration enables the usage of MDX components and allows you to create pages as .mdx files.

What is MDX?

MDX allows you to use variables, JSX expressions, and components within Markdown content. You can write standard Markdown and seamlessly include interactive components.

Installation

Automatic

npx astro add mdx

Manual

Install the package:

npm install @astrojs/mdx

Add to your config:

astro.config.mjs

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

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

Usage Example

Create an .mdx file with frontmatter and components:

src/pages/post.mdx

---
title: My First MDX Post
author: Houston
---
import Button from '../components/Button.astro';

# {frontmatter.title}

Written by: {frontmatter.author}

This is a regular paragraph in Markdown.

<Button>Click me!</Button>

Using Components in MDX

Import and use both Astro and framework components:

src/content/blog/post-1.mdx

---
title: My first post
---
import ReactCounter from '../components/ReactCounter.jsx';

I just started my new Astro blog!

Here is my counter component, working in MDX:

<ReactCounter client:load />

Custom Component Mapping

Map Markdown syntax to custom components:

src/components/Blockquote.astro

---
const props = Astro.props;
---
<blockquote {...props} class="bg-blue-50 p-4">
  <span class="text-4xl text-blue-600 mb-2">"</span>
  <slot />
</blockquote>

src/pages/post.mdx

import Blockquote from '../components/Blockquote.astro';
export const components = { blockquote: Blockquote }

> This quote will use the custom Blockquote component

Configuration

Configure MDX with remark and rehype plugins:

astro.config.mjs

import { defineConfig } from 'astro/config';
import mdx from '@astrojs/mdx';
import remarkToc from 'remark-toc';
import rehypePresetMinify from 'rehype-preset-minify';

export default defineConfig({
  integrations: [
    mdx({
      syntaxHighlight: 'shiki',
      shikiConfig: { theme: 'dracula' },
      remarkPlugins: [remarkToc],
      rehypePlugins: [rehypePresetMinify],
    }),
  ],
});

Sitemap Integration

The @astrojs/sitemap integration automatically generates an XML sitemap for your site to help search engines discover your pages.

Installation

Automatic

npx astro add sitemap

Manual

Install the package:

npm install @astrojs/sitemap

Add to your config:

astro.config.mjs

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

export default defineConfig({
  site: 'https://example.com',
  integrations: [sitemap()],
});

The site option is required for sitemap generation.

Configuration

Customize your sitemap generation:

astro.config.mjs

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

export default defineConfig({
  site: 'https://example.com',
  integrations: [
    sitemap({
      filter: (page) => !page.includes('/draft/'),
      changefreq: 'weekly',
      priority: 0.7,
      lastmod: new Date(),
    }),
  ],
});

Partytown Integration

The @astrojs/partytown integration moves third-party scripts into a web worker, keeping your main thread free for a better user experience.

Installation

Automatic

npx astro add partytown

Manual

Install the package:

npm install @astrojs/partytown

Add to your config:

astro.config.mjs

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

export default defineConfig({
  integrations: [
    partytown({
      config: {
        forward: ['dataLayer.push'],
      },
    }),
  ],
});

Usage

Add the type="text/partytown" attribute to your scripts:

src/pages/index.astro

<script type="text/partytown" src="https://example.com/analytics.js"></script>

Tailwind CSS Integration

The @astrojs/tailwind integration brings Tailwind CSS’s utility-first CSS framework to your project.

Installation

Automatic

npx astro add tailwind

Manual

Install the package:

npm install @astrojs/tailwind tailwindcss

Add to your config:

astro.config.mjs

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

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

Configuration

Customize Tailwind with a config file:

tailwind.config.mjs

export default {
  content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
  theme: {
    extend: {
      colors: {
        primary: '#3b82f6',
      },
    },
  },
  plugins: [],
}

Usage

Use Tailwind utility classes in your components:

src/components/Button.astro

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  Click me
</button>

Database Integrations

Connect to databases with official integrations:

• @astrojs/db - Astro’s built-in SQL database
• Community integrations for PostgreSQL, MongoDB, and more

Image Optimization

• @astrojs/image - Optimize and transform images
• Works with local and remote images
• Automatic format conversion and resizing

Finding More Integrations

Browse the complete set of hundreds of official and community integrations:

• Astro Integrations Directory
• Filter by category: authentication, analytics, performance, SEO, accessibility, and more
• Community-built integrations for popular services and tools