Extensions and plugins that add functionality to Astro web framework projects.
- About
- Quick Start
- Official Integrations
- Community Integrations
- Code Examples
- Best Practices
- Resources
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
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/mdxThen 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:
UnoCSSorTailwind CSS - Keep analytics but remove jank:
Partytown+UmamiorPlausible - 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
Integrations maintained by the Astro core team. These are battle-tested and production-ready.
@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@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@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@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 partytownHigh-quality integrations built and maintained by the Astro community.
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-compressastro-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-crittersastro-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-cssUnoCSS - 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@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 tailwindastro-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-iconastro-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@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-astroContentful - Headless CMS integration
Why it's awesome: Popular headless CMS with great developer experience and content modeling.
Installation:
npm i contentfulSanity - Headless CMS with real-time collaboration
Why it's awesome: Real-time collaboration, structured content, and powerful querying.
Installation:
npm i @sanity/clientStrapi - Open-source headless CMS
Why it's awesome: Self-hosted, open-source CMS with REST and GraphQL APIs.
Installation:
npm i @strapi/strapiPrisma - Next-generation ORM
Why it's awesome: Type-safe database access with excellent developer experience.
Installation:
npm i @prisma/client
npm i -D prismaastro-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-seoPlausible Analytics - Privacy-friendly analytics
Why it's awesome: Lightweight analytics with simple wiring. No cookies, GDPR compliant.
Installation:
# Manual setup - see code examplesastro-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/rssastro-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-importastro-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-codeeslint-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-astroVitest - 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-eventPlaywright - 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/playwrightastro-a11y - Accessibility checks
Weekly Downloads: ~3K
Why it's awesome: Provides accessibility checks and improvements for Astro projects.
Installation:
npm i -D astro-a11yDetailed 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
Island Architecture
- Prefer fewer, larger islands over many small ones to reduce hydration overhead
- Use
client:visibleorclient:idleto 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
integrationsarray - 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
siteURL inastro.config.mjsfor 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
- Astro Documentation
- Astro Integrations Guide
- Astro Integration API Reference
- Astro Integrations Directory
- Astro Discord Community
- Astro Blog
- Astro GitHub Discussions
- r/astrojs - Reddit community.
- Stack Overflow - Astro
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
- Curated by Rich Lewis (@RichLewis007)
- ⭐ Star this repo if you find it helpful!