Awesome Astro Integrations

Best Astro web framework extensions and plugins that add new features and behaviors for your Astro web framework projects 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

Extensions and plugins that add functionality to Astro web framework projects.

Updated with reviews and recommendations for your kind of project

About
Quick Start
Official Integrations
Community Integrations
Code Examples
Best Practices
Resources

🎯 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

Footnotes

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

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

Footnotes

Top categories