Awesome Astro Integrations

The best Astro integrations -> plugins that add new features and behaviors for your project with only a few lines of code, including compatibility with other tools and UI frameworks like React, Vue, Svelte, and Tailwind CSS.

#astro #astro-js #astrojs #awesome #integration #integrations #list #popular #reviews #awesome-list

Download

🚀 Awesome Astro Integrations

A curated, opinionated collection of the very best Astro integrations

Constantly updated with reviews and recommendations for your kind of project

🎯 About

This repository is your go-to resource for discovering the best Astro integrations. Whether you're building a blog, documentation site, e-commerce platform, or web application, you'll find carefully curated integrations that deliver real impact.

Curated by: Rich Lewis (@RichLewis007)

What makes an integration "AWESOME"?

✅ Actively maintained
✅ Well-documented
✅ Production-ready
✅ Performance-conscious
✅ Developer-friendly

⚡ Quick Start

Install an integration

# Using Astro's automatic setup (recommended)
npx astro add react tailwind mdx

# Or install manually
npm install @astrojs/react @astrojs/tailwind @astrojs/mdx

Then add to your astro.config.mjs:

import { defineConfig } from "astro/config";
import react from "@astrojs/react";
import tailwind from "@astrojs/tailwind";
import mdx from "@astrojs/mdx";

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

Quick picks by goal

Make it feel instant: astro-critical-css + astro-compress
Ship fewer bytes of CSS: UnoCSS or Tailwind CSS
Keep analytics but remove jank: Partytown + Umami or Plausible
Docs that don't fight you: Starlight + @astrojs/mdx
Icons without bloat: astro-icon
Add React/Vue/Svelte: @astrojs/react, @astrojs/vue, @astrojs/svelte
Deploy anywhere: @astrojs/vercel, @astrojs/netlify, @astrojs/cloudflare

🏢 Official Integrations

Integrations maintained by the Astro core team. These are battle-tested and production-ready.

UI Frameworks

@astrojs/react - Use React components in Astro

Weekly Downloads: ~1.2M | Official | Most Popular

Why it's awesome: Seamlessly integrate React components as islands. Perfect for adding interactivity without shipping React to every page.

Installation:

npx astro add react

@astrojs/vue - Use Vue components in Astro

Weekly Downloads: ~167K | Official

Why it's awesome: Vue 3 support with Composition API. Great for teams already using Vue.

Installation:

npx astro add vue

@astrojs/svelte - Use Svelte components in Astro

Weekly Downloads: ~264K | Official

Why it's awesome: Svelte's compile-time approach pairs perfectly with Astro's zero-JS philosophy.

Installation:

npx astro add svelte

@astrojs/preact - Use Preact components in Astro

Weekly Downloads: ~45K | Official

Why it's awesome: React-compatible but much smaller (3KB). Perfect for performance-critical apps.

Installation:

npx astro add preact

@astrojs/solid-js - Use SolidJS components in Astro

Weekly Downloads: ~12K | Official

Why it's awesome: Fine-grained reactivity with no virtual DOM. Excellent performance characteristics.

Installation:

npx astro add solid-js

@astrojs/alpinejs - Use Alpine.js in Astro

Weekly Downloads: ~25K | Official

Why it's awesome: Minimal JavaScript framework (15KB). Perfect for adding interactivity without a build step.

Installation:

npx astro add alpinejs

Content & Documentation

@astrojs/mdx - MDX support for Astro

Weekly Downloads: ~986K | Official | Most Popular

Why it's awesome: Mix Markdown with JSX components. Keep authoring flow simple and use shortcodes everywhere.

Installation:

npx astro add mdx

@astrojs/starlight - Official documentation theme

Weekly Downloads: ~85K | Official

Why it's awesome: Built-in search, i18n, strong a11y, and theming. Saves weeks for any docs site.

Installation:

npx astro add starlight

@astrojs/markdoc - Markdoc support

Weekly Downloads: ~5K | Official

Why it's awesome: Structured Markdown with schema validation. Great for content that needs type safety.

Installation:

npx astro add markdoc

Adapters & Deployment

@astrojs/vercel - Deploy to Vercel

Weekly Downloads: ~241K | Official

Why it's awesome: Zero-config deployment with edge functions support. Perfect for SSR and static sites.

Installation:

npx astro add vercel

@astrojs/netlify - Deploy to Netlify

Weekly Downloads: ~148K | Official

Why it's awesome: Netlify Functions and Edge Functions support. Great DX with Netlify Dev.

Installation:

npx astro add netlify

@astrojs/cloudflare - Deploy to Cloudflare

Weekly Downloads: ~95K | Official

Why it's awesome: Deploy to Cloudflare Workers/Pages. Edge computing with global distribution.

Installation:

npx astro add cloudflare

@astrojs/node - Deploy to Node.js

Weekly Downloads: ~623K | Official

Why it's awesome: Deploy to any Node.js server. Flexible for custom hosting setups.

Installation:

npx astro add node

Other Official Integrations

@astrojs/sitemap - Automatic sitemap generation

Weekly Downloads: ~1.3M | Official | Most Popular

Why it's awesome: Automatically generates sitemaps for SEO. Zero configuration needed.

Installation:

npx astro add sitemap

@astrojs/db - Built-in database with Drizzle ORM

Weekly Downloads: ~15K | Official

Why it's awesome: Built-in, managed SQL store. Perfect for small dynamic features without a separate backend.

Installation:

npx astro add db

@astrojs/partytown - Offload third-party scripts to web workers

Weekly Downloads: ~45K | Official

Why it's awesome: Offload analytics and tag managers to web workers. Stops blocking the main thread.

Installation:

npx astro add partytown

🌟 Community Integrations

High-quality integrations built and maintained by the Astro community.

Performance & Optimization

astro-compress - Minify and compress HTML, CSS, JS, and images

Weekly Downloads: ~25K

Why it's awesome: One switch to minify everything. Put it last in your integrations array.

Installation:

npm i -D astro-compress

astro-critters - Inline critical CSS

Weekly Downloads: ~8K

Why it's awesome: Inlines above-the-fold CSS and lazy-loads the rest for faster first paint.

Installation:

npm i -D astro-critters

astro-critical-css - Extract and inline critical CSS

Weekly Downloads: ~3K

Why it's awesome: Alternative to astro-critters with different extraction strategy.

Installation:

npm i -D astro-critical-css

UnoCSS - Utility-first CSS engine

Weekly Downloads: ~150K

Why it's awesome: On-demand generation and presets. Usually lighter than shipping a full framework.

Installation:

npm i -D unocss @unocss/reset

Styling & CSS

@astrojs/tailwind - Tailwind CSS integration

Weekly Downloads: ~861K | Official

Why it's awesome: Official Tailwind CSS support. Utility-first styling with zero config.

Installation:

npx astro add tailwind

Images, Icons & Fonts

astro-icon - Icon component with Iconify support

Weekly Downloads: ~374K

Why it's awesome: Local or Iconify icons with smart SVG inlining and sprite dedupe for tiny payloads.

Installation:

npm i -D astro-icon

astro-font - Font optimization

Weekly Downloads: ~12K

Why it's awesome: Automates local and hosted font optimization with sensible defaults.

Installation:

npm i -D astro-font

Authentication & Security

@clerk/astro - Clerk authentication

Weekly Downloads: ~5K

Why it's awesome: Drop-in auth for accounts, sessions, and user management with SSR paths aligned for Astro.

Installation:

npm i @clerk/astro

@auth/astro - Auth.js (NextAuth.js) for Astro

Weekly Downloads: ~8K

Why it's awesome: Popular authentication solution with many providers. Great for teams familiar with NextAuth.

Installation:

npm i @auth/astro

@supabase/auth-helpers-astro - Supabase authentication

Weekly Downloads: ~15K

Why it's awesome: Open-source Firebase alternative. Includes auth, database, and storage.

Installation:

npm i @supabase/supabase-js @supabase/auth-helpers-astro

Database & CMS

Contentful - Headless CMS integration

Why it's awesome: Popular headless CMS with great developer experience and content modeling.

Installation:

npm i contentful

Sanity - Headless CMS with real-time collaboration

Why it's awesome: Real-time collaboration, structured content, and powerful querying.

Installation:

npm i @sanity/client

Strapi - Open-source headless CMS

Why it's awesome: Self-hosted, open-source CMS with REST and GraphQL APIs.

Installation:

npm i @strapi/strapi

Prisma - Next-generation ORM

Why it's awesome: Type-safe database access with excellent developer experience.

Installation:

npm i @prisma/client
npm i -D prisma

SEO & Analytics

astro-seo - SEO component

Weekly Downloads: ~153K

Why it's awesome: Makes it easy to add SEO-relevant tags to your Astro app.

Installation:

npm i -D astro-seo

Plausible Analytics - Privacy-friendly analytics

Why it's awesome: Lightweight analytics with simple wiring. No cookies, GDPR compliant.

Installation:

# Manual setup - see code examples

astro-umami - Umami analytics integration

Weekly Downloads: ~2K

Why it's awesome: Privacy-friendly analytics with smooth integration. Works well with View Transitions and Partytown.

Installation:

npm i -D astro-umami

@astrojs/rss - RSS feed generation

Weekly Downloads: ~45K

Why it's awesome: Generate RSS for blogs or release notes. Keeps subscribers in sync.

Installation:

npm i -D @astrojs/rss

Developer Experience

astro-auto-import - Auto-import components

Weekly Downloads: ~8K

Why it's awesome: Automatically imports components in Astro projects. Reduces boilerplate.

Installation:

npm i -D astro-auto-import

astro-expressive-code - Syntax highlighting engine

Weekly Downloads: ~12K

Why it's awesome: Modular syntax highlighting & annotation engine for presenting source code.

Installation:

npm i -D astro-expressive-code

eslint-plugin-astro - ESLint plugin for Astro

Weekly Downloads: ~85K

Why it's awesome: Linting Astro components using ESLint. Find problems and apply consistent code style.

Installation:

npm i -D eslint @astrojs/eslint-config eslint-plugin-astro

Testing & Quality Assurance

Vitest - Unit testing

Why it's awesome: Fast unit test framework. Works great with Astro's Vite-based build.

Installation:

npm i -D vitest @testing-library/dom @testing-library/user-event

Playwright - End-to-end testing

Why it's awesome: Reliable end-to-end testing. Prevents regressions in layouts, routes, and interactive islands.

Installation:

npm i -D @playwright/test
npx playwright install

@axe-core/playwright - Accessibility testing

Why it's awesome: Automated accessibility testing. Prevents regressions and improves usability for everyone.

Installation:

npm i -D @axe-core/playwright

Accessibility

astro-a11y - Accessibility checks

Weekly Downloads: ~3K

Why it's awesome: Provides accessibility checks and improvements for Astro projects.

Installation:

npm i -D astro-a11y

📝 Code Examples

Detailed code examples and implementation guides are available in the examples/ directory:

Performance Optimization - Compression, critical CSS, Partytown, UnoCSS
Content Management - MDX, Content Collections, Starlight
UI Frameworks - React, Vue, Svelte, Preact, SolidJS, Alpine.js
Adapters & Deployment - Vercel, Netlify, Cloudflare, Node.js
SEO & Analytics - Sitemap, SEO tags, Google Analytics, Plausible, Umami, RSS
Images, Icons & Fonts - Astro Icon, image optimization, font loading
Authentication - Clerk, Auth.js, Supabase, Lucia
Database & CMS - Astro DB, Contentful, Sanity, Strapi, Prisma
Testing & QA - Vitest, Playwright, ESLint, accessibility testing

💡 Best Practices

Island Architecture

Prefer fewer, larger islands over many small ones to reduce hydration overhead
Use client:visible or client:idle to delay hydration where possible
Lazy-import heavy subcomponents inside hydrated islands
Keep the rest of the site native so Astro can ship near-zero JS by default

Performance

Put compression integrations last in your integrations array
Use critical CSS inliners for faster first paint
Offload third-party scripts to Partytown
Optimize images using Astro's built-in image optimization

SEO

Always set your site URL in astro.config.mjs for sitemap generation
Use structured data (JSON-LD) for rich snippets
Generate RSS feeds for blogs and changelogs
Set up proper robots.txt

Security

Use security headers (CSP, HSTS, etc.)
Validate environment variables
Sanitize user input
Use HTTPS everywhere

📚 Resources

Official Resources

Community Resources

🤝 Contributing

Contributions are welcome! This repository aims to be a comprehensive resource for Astro integrations.

Curator: Rich Lewis (@RichLewis007)

How to contribute:

Add a new integration: Submit a pull request with the integration details
Update existing entries: Keep information current and accurate
Improve examples: Add or enhance code examples
Fix issues: Report bugs or suggest improvements

Guidelines:

Only include integrations that are actively maintained
Provide links to documentation, GitHub, and npm
Include installation instructions
Add code examples when possible
Keep descriptions concise and helpful

Made with ❤️ for the Astro community

Curated by Rich Lewis (@RichLewis007)

⭐ Star this repo if you find it helpful!

Top categories

tailwind daisyui admin template popup mdsvex portfolio blog form ecommerce ui carousel auth dark seo image routing

Awesome Astro Integrations

🚀 Awesome Astro Integrations

📑 Table of Contents

🎯 About

⚡ Quick Start

🏢 Official Integrations

UI Frameworks

Content & Documentation

Adapters & Deployment

Other Official Integrations

🌟 Community Integrations

Performance & Optimization

Styling & CSS

Images, Icons & Fonts

Authentication & Security

Database & CMS

SEO & Analytics

Developer Experience

Testing & Quality Assurance

Accessibility

📝 Code Examples

💡 Best Practices

📚 Resources

Official Resources

Community Resources

Related Awesome Lists

🤝 Contributing

Top categories