{"id":37181462,"url":"https://github.com/RichLewis007/awesome-astro-integrations","last_synced_at":"2026-01-22T00:00:51.184Z","repository":{"id":322717209,"uuid":"1075926489","full_name":"RichLewis007/awesome-astro-integrations","owner":"RichLewis007","description":"The best Astro integrations: 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.","archived":false,"fork":false,"pushed_at":"2026-01-13T13:14:45.000Z","size":60,"stargazers_count":4,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-01-13T13:22:41.957Z","etag":null,"topics":["astro","astro-js","astrojs","awesome","awesome-list","framework","integration","integrations","list","popular","react","reviews","svelte","sveltekit","tailwind","tailwind-css","tailwindcss","vue"],"latest_commit_sha":null,"homepage":"","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"cc0-1.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/RichLewis007.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-10-14T07:12:59.000Z","updated_at":"2026-01-13T13:17:08.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/RichLewis007/awesome-astro-integrations","commit_stats":null,"previous_names":["richlewis007/awesome-astro-js-integrations","richlewis007/awesome-astro-integrations"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/RichLewis007/awesome-astro-integrations","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RichLewis007%2Fawesome-astro-integrations","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RichLewis007%2Fawesome-astro-integrations/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RichLewis007%2Fawesome-astro-integrations/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RichLewis007%2Fawesome-astro-integrations/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/RichLewis007","download_url":"https://codeload.github.com/RichLewis007/awesome-astro-integrations/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RichLewis007%2Fawesome-astro-integrations/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28647471,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-21T21:29:11.980Z","status":"ssl_error","status_checked_at":"2026-01-21T21:24:31.872Z","response_time":86,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["astro","astro-js","astrojs","awesome","awesome-list","framework","integration","integrations","list","popular","react","reviews","svelte","sveltekit","tailwind","tailwind-css","tailwindcss","vue"],"created_at":"2026-01-14T21:00:24.729Z","updated_at":"2026-01-22T00:00:51.044Z","avatar_url":"https://github.com/RichLewis007.png","language":null,"funding_links":[],"categories":["Footnotes"],"sub_categories":["Related Awesome Lists"],"readme":"\u003c!--lint disable awesome-list-item awesome-badge awesome-contributing double-link--\u003e\n\u003cdiv align=\"center\"\u003e\n\n\u003cimg src=\"images/awesome-astro-integrations-banner.jpg\" alt=\"Awesome Astro Integrations\" width=\"800\"\u003e\n\n# Awesome Astro Integrations [![Awesome](https://awesome.re/badge.svg)](https://awesome.re)\n\nExtensions and plugins that add functionality to Astro web framework projects.\n\n[![Astro](https://img.shields.io/badge/Astro-5.0+-FF5D01?logo=astro\u0026logoColor=white)](https://astro.build)\n\n_Updated with reviews and recommendations for your kind of project_\n\n\u003c/div\u003e\n\n---\n\n## Contents\n\n- [About](#-about)\n- [Quick Start](#-quick-start)\n- [Official Integrations](#-official-integrations)\n  - [UI Frameworks](#ui-frameworks)\n  - [Content \u0026 Documentation](#content--documentation)\n  - [Adapters \u0026 Deployment](#adapters--deployment)\n  - [Other Official Integrations](#other-official-integrations)\n- [Community Integrations](#-community-integrations)\n  - [Performance \u0026 Optimization](#performance--optimization)\n  - [Styling \u0026 CSS](#styling--css)\n  - [Images, Icons \u0026 Fonts](#images-icons--fonts)\n  - [Authentication \u0026 Security](#authentication--security)\n  - [Database \u0026 CMS](#database--cms)\n  - [SEO \u0026 Analytics](#seo--analytics)\n  - [Developer Experience](#developer-experience)\n  - [Testing \u0026 Quality Assurance](#testing--quality-assurance)\n  - [Accessibility](#accessibility)\n- [Code Examples](#-code-examples)\n- [Best Practices](#-best-practices)\n- [Resources](#-resources)\n\n---\n\n## 🎯 About\n\nThis 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.\n\n**Curated by:** [Rich Lewis](https://RichLewis.com) ([@RichLewis007](https://github.com/RichLewis007))\n\n**What makes an integration \"AWESOME\"?**\n\n- ✅ Actively maintained\n- ✅ Well-documented\n- ✅ Production-ready\n- ✅ Performance-conscious\n- ✅ Developer-friendly\n\n---\n\n## ⚡ Quick Start\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003eInstall an integration\u003c/strong\u003e\u003c/summary\u003e\n\n```bash\n# Using Astro's automatic setup (recommended)\nnpx astro add react tailwind mdx\n\n# Or install manually\nnpm install @astrojs/react @astrojs/tailwind @astrojs/mdx\n```\n\nThen add to your `astro.config.mjs`:\n\n```ts\nimport { defineConfig } from \"astro/config\";\nimport react from \"@astrojs/react\";\nimport tailwind from \"@astrojs/tailwind\";\nimport mdx from \"@astrojs/mdx\";\n\nexport default defineConfig({\n  integrations: [react(), tailwind(), mdx()],\n});\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003eQuick picks by goal\u003c/strong\u003e\u003c/summary\u003e\n\n- **Make it feel instant**: `astro-critical-css` + `astro-compress`\n- **Ship fewer bytes of CSS**: `UnoCSS` or `Tailwind CSS`\n- **Keep analytics but remove jank**: `Partytown` + `Umami` or `Plausible`\n- **Docs that don't fight you**: `Starlight` + `@astrojs/mdx`\n- **Icons without bloat**: `astro-icon`\n- **Add React/Vue/Svelte**: `@astrojs/react`, `@astrojs/vue`, `@astrojs/svelte`\n- **Deploy anywhere**: `@astrojs/vercel`, `@astrojs/netlify`, `@astrojs/cloudflare`\n\n\u003c/details\u003e\n\n---\n\n## 🏢 Official Integrations\n\nIntegrations maintained by the Astro core team. These are battle-tested and production-ready.\n\n### UI Frameworks\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003e@astrojs/react\u003c/strong\u003e - Use React components in Astro\u003c/summary\u003e\n\n**Weekly Downloads:** ~1.2M | **Official** | **Most Popular**\n\n- [📖 Documentation](https://docs.astro.build/en/guides/integrations-guide/react/)\n- [📦 npm](https://www.npmjs.com/package/@astrojs/react)\n- [💻 GitHub](https://github.com/withastro/astro/tree/main/packages/integrations/react)\n- [📝 Code Examples](./examples/ui-frameworks.md#react-integration)\n\n**Why it's awesome:** Seamlessly integrate React components as islands. Perfect for adding interactivity without shipping React to every page.\n\n**Installation:**\n\n```bash\nnpx astro add react\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003e@astrojs/vue\u003c/strong\u003e - Use Vue components in Astro\u003c/summary\u003e\n\n**Weekly Downloads:** ~167K | **Official**\n\n- [📖 Documentation](https://docs.astro.build/en/guides/integrations-guide/vue/)\n- [📦 npm](https://www.npmjs.com/package/@astrojs/vue)\n- [💻 GitHub](https://github.com/withastro/astro/tree/main/packages/integrations/vue)\n- [📝 Code Examples](./examples/ui-frameworks.md#vue-integration)\n\n**Why it's awesome:** Vue 3 support with Composition API. Great for teams already using Vue.\n\n**Installation:**\n\n```bash\nnpx astro add vue\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003e@astrojs/svelte\u003c/strong\u003e - Use Svelte components in Astro\u003c/summary\u003e\n\n**Weekly Downloads:** ~264K | **Official**\n\n- [📖 Documentation](https://docs.astro.build/en/guides/integrations-guide/svelte/)\n- [📦 npm](https://www.npmjs.com/package/@astrojs/svelte)\n- [💻 GitHub](https://github.com/withastro/astro/tree/main/packages/integrations/svelte)\n- [📝 Code Examples](./examples/ui-frameworks.md#svelte-integration)\n\n**Why it's awesome:** Svelte's compile-time approach pairs perfectly with Astro's zero-JS philosophy.\n\n**Installation:**\n\n```bash\nnpx astro add svelte\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003e@astrojs/preact\u003c/strong\u003e - Use Preact components in Astro\u003c/summary\u003e\n\n**Weekly Downloads:** ~45K | **Official**\n\n- [📖 Documentation](https://docs.astro.build/en/guides/integrations-guide/preact/)\n- [📦 npm](https://www.npmjs.com/package/@astrojs/preact)\n- [💻 GitHub](https://github.com/withastro/astro/tree/main/packages/integrations/preact)\n- [📝 Code Examples](./examples/ui-frameworks.md#preact-integration)\n\n**Why it's awesome:** React-compatible but much smaller (3KB). Perfect for performance-critical apps.\n\n**Installation:**\n\n```bash\nnpx astro add preact\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003e@astrojs/solid-js\u003c/strong\u003e - Use SolidJS components in Astro\u003c/summary\u003e\n\n**Weekly Downloads:** ~12K | **Official**\n\n- [📖 Documentation](https://docs.astro.build/en/guides/integrations-guide/solid-js/)\n- [📦 npm](https://www.npmjs.com/package/@astrojs/solid-js)\n- [💻 GitHub](https://github.com/withastro/astro/tree/main/packages/integrations/solid-js)\n- [📝 Code Examples](./examples/ui-frameworks.md#solidjs-integration)\n\n**Why it's awesome:** Fine-grained reactivity with no virtual DOM. Excellent performance characteristics.\n\n**Installation:**\n\n```bash\nnpx astro add solid-js\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003e@astrojs/alpinejs\u003c/strong\u003e - Use Alpine.js in Astro\u003c/summary\u003e\n\n**Weekly Downloads:** ~25K | **Official**\n\n- [📖 Documentation](https://docs.astro.build/en/guides/integrations-guide/alpinejs/)\n- [📦 npm](https://www.npmjs.com/package/@astrojs/alpinejs)\n- [💻 GitHub](https://github.com/withastro/astro/tree/main/packages/integrations/alpinejs)\n- [📝 Code Examples](./examples/ui-frameworks.md#alpinejs-integration)\n\n**Why it's awesome:** Minimal JavaScript framework (15KB). Perfect for adding interactivity without a build step.\n\n**Installation:**\n\n```bash\nnpx astro add alpinejs\n```\n\n\u003c/details\u003e\n\n### Content \u0026 Documentation\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003e@astrojs/mdx\u003c/strong\u003e - MDX support for Astro\u003c/summary\u003e\n\n**Weekly Downloads:** ~986K | **Official** | **Most Popular**\n\n- [📖 Documentation](https://docs.astro.build/en/guides/integrations-guide/mdx/)\n- [📦 npm](https://www.npmjs.com/package/@astrojs/mdx)\n- [💻 GitHub](https://github.com/withastro/astro/tree/main/packages/integrations/mdx)\n- [📝 Code Examples](./examples/content-management.md#mdx-integration)\n\n**Why it's awesome:** Mix Markdown with JSX components. Keep authoring flow simple and use shortcodes everywhere.\n\n**Installation:**\n\n```bash\nnpx astro add mdx\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003e@astrojs/starlight\u003c/strong\u003e - Official documentation theme\u003c/summary\u003e\n\n**Weekly Downloads:** ~85K | **Official**\n\n- [📖 Documentation](https://starlight.astro.build/)\n- [📦 npm](https://www.npmjs.com/package/@astrojs/starlight)\n- [💻 GitHub](https://github.com/withastro/starlight)\n- [📝 Code Examples](./examples/content-management.md#starlight-documentation-theme)\n\n**Why it's awesome:** Built-in search, i18n, strong a11y, and theming. Saves weeks for any docs site.\n\n**Installation:**\n\n```bash\nnpx astro add starlight\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003e@astrojs/markdoc\u003c/strong\u003e - Markdoc support\u003c/summary\u003e\n\n**Weekly Downloads:** ~5K | **Official**\n\n- [📖 Documentation](https://docs.astro.build/en/guides/integrations-guide/markdoc/)\n- [📦 npm](https://www.npmjs.com/package/@astrojs/markdoc)\n- [💻 GitHub](https://github.com/withastro/astro/tree/main/packages/integrations/markdoc)\n\n**Why it's awesome:** Structured Markdown with schema validation. Great for content that needs type safety.\n\n**Installation:**\n\n```bash\nnpx astro add markdoc\n```\n\n\u003c/details\u003e\n\n### Adapters \u0026 Deployment\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003e@astrojs/vercel\u003c/strong\u003e - Deploy to Vercel\u003c/summary\u003e\n\n**Weekly Downloads:** ~241K | **Official**\n\n- [📖 Documentation](https://docs.astro.build/en/guides/deploy/vercel/)\n- [📦 npm](https://www.npmjs.com/package/@astrojs/vercel)\n- [💻 GitHub](https://github.com/withastro/astro/tree/main/packages/integrations/vercel)\n- [📝 Code Examples](./examples/adapters-deployment.md#vercel-adapter)\n\n**Why it's awesome:** Zero-config deployment with edge functions support. Perfect for SSR and static sites.\n\n**Installation:**\n\n```bash\nnpx astro add vercel\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003e@astrojs/netlify\u003c/strong\u003e - Deploy to Netlify\u003c/summary\u003e\n\n**Weekly Downloads:** ~148K | **Official**\n\n- [📖 Documentation](https://docs.astro.build/en/guides/deploy/netlify/)\n- [📦 npm](https://www.npmjs.com/package/@astrojs/netlify)\n- [💻 GitHub](https://github.com/withastro/astro/tree/main/packages/integrations/netlify)\n- [📝 Code Examples](./examples/adapters-deployment.md#netlify-adapter)\n\n**Why it's awesome:** Netlify Functions and Edge Functions support. Great DX with Netlify Dev.\n\n**Installation:**\n\n```bash\nnpx astro add netlify\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003e@astrojs/cloudflare\u003c/strong\u003e - Deploy to Cloudflare\u003c/summary\u003e\n\n**Weekly Downloads:** ~95K | **Official**\n\n- [📖 Documentation](https://docs.astro.build/en/guides/deploy/cloudflare/)\n- [📦 npm](https://www.npmjs.com/package/@astrojs/cloudflare)\n- [💻 GitHub](https://github.com/withastro/astro/tree/main/packages/integrations/cloudflare)\n- [📝 Code Examples](./examples/adapters-deployment.md#cloudflare-adapter)\n\n**Why it's awesome:** Deploy to Cloudflare Workers/Pages. Edge computing with global distribution.\n\n**Installation:**\n\n```bash\nnpx astro add cloudflare\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003e@astrojs/node\u003c/strong\u003e - Deploy to Node.js\u003c/summary\u003e\n\n**Weekly Downloads:** ~623K | **Official**\n\n- [📖 Documentation](https://docs.astro.build/en/guides/deploy/node/)\n- [📦 npm](https://www.npmjs.com/package/@astrojs/node)\n- [💻 GitHub](https://github.com/withastro/astro/tree/main/packages/integrations/node)\n- [📝 Code Examples](./examples/adapters-deployment.md#nodejs-adapter)\n\n**Why it's awesome:** Deploy to any Node.js server. Flexible for custom hosting setups.\n\n**Installation:**\n\n```bash\nnpx astro add node\n```\n\n\u003c/details\u003e\n\n### Other Official Integrations\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003e@astrojs/sitemap\u003c/strong\u003e - Automatic sitemap generation\u003c/summary\u003e\n\n**Weekly Downloads:** ~1.3M | **Official** | **Most Popular**\n\n- [📖 Documentation](https://docs.astro.build/en/guides/integrations-guide/sitemap/)\n- [📦 npm](https://www.npmjs.com/package/@astrojs/sitemap)\n- [💻 GitHub](https://github.com/withastro/astro/tree/main/packages/integrations/sitemap)\n- [📝 Code Examples](./examples/seo-analytics.md#sitemap-generation)\n\n**Why it's awesome:** Automatically generates sitemaps for SEO. Zero configuration needed.\n\n**Installation:**\n\n```bash\nnpx astro add sitemap\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003e@astrojs/db\u003c/strong\u003e - Built-in database with Drizzle ORM\u003c/summary\u003e\n\n**Weekly Downloads:** ~15K | **Official**\n\n- [📖 Documentation](https://docs.astro.build/en/guides/astro-db/)\n- [📦 npm](https://www.npmjs.com/package/@astrojs/db)\n- [💻 GitHub](https://github.com/withastro/astro/tree/main/packages/integrations/db)\n- [📝 Code Examples](./examples/database-cms.md#astro-db)\n\n**Why it's awesome:** Built-in, managed SQL store. Perfect for small dynamic features without a separate backend.\n\n**Installation:**\n\n```bash\nnpx astro add db\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003e@astrojs/partytown\u003c/strong\u003e - Offload third-party scripts to web workers\u003c/summary\u003e\n\n**Weekly Downloads:** ~45K | **Official**\n\n- [📖 Documentation](https://docs.astro.build/en/guides/integrations-guide/partytown/)\n- [📦 npm](https://www.npmjs.com/package/@astrojs/partytown)\n- [💻 GitHub](https://github.com/withastro/astro/tree/main/packages/integrations/partytown)\n- [📝 Code Examples](./examples/performance-optimization.md#partytown)\n\n**Why it's awesome:** Offload analytics and tag managers to web workers. Stops blocking the main thread.\n\n**Installation:**\n\n```bash\nnpx astro add partytown\n```\n\n\u003c/details\u003e\n\n---\n\n## 🌟 Community Integrations\n\nHigh-quality integrations built and maintained by the Astro community.\n\n### Performance \u0026 Optimization\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003eastro-compress\u003c/strong\u003e - Minify and compress HTML, CSS, JS, and images\u003c/summary\u003e\n\n**Weekly Downloads:** ~25K\n\n- [📦 npm](https://www.npmjs.com/package/astro-compress)\n- [💻 GitHub](https://github.com/kamranahmedse/astro-compress)\n- [📝 Code Examples](./examples/performance-optimization.md#compression-and-minification)\n\n**Why it's awesome:** One switch to minify everything. Put it last in your `integrations` array.\n\n**Installation:**\n\n```bash\nnpm i -D astro-compress\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003eastro-critters\u003c/strong\u003e - Inline critical CSS\u003c/summary\u003e\n\n**Weekly Downloads:** ~8K\n\n- [📦 npm](https://www.npmjs.com/package/astro-critters)\n- [💻 GitHub](https://github.com/fariasf/astro-critters)\n- [📝 Code Examples](./examples/performance-optimization.md#astro-critters)\n\n**Why it's awesome:** Inlines above-the-fold CSS and lazy-loads the rest for faster first paint.\n\n**Installation:**\n\n```bash\nnpm i -D astro-critters\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003eastro-critical-css\u003c/strong\u003e - Extract and inline critical CSS\u003c/summary\u003e\n\n**Weekly Downloads:** ~3K\n\n- [📦 npm](https://www.npmjs.com/package/astro-critical-css)\n- [💻 GitHub](https://github.com/rumaan/astro-critical-css)\n- [📝 Code Examples](./examples/performance-optimization.md#astro-critical-css)\n\n**Why it's awesome:** Alternative to astro-critters with different extraction strategy.\n\n**Installation:**\n\n```bash\nnpm i -D astro-critical-css\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003eUnoCSS\u003c/strong\u003e - Utility-first CSS engine\u003c/summary\u003e\n\n**Weekly Downloads:** ~150K\n\n- [📖 Documentation](https://unocss.dev/)\n- [📦 npm](https://www.npmjs.com/package/unocss)\n- [💻 GitHub](https://github.com/unocss/unocss)\n- [📝 Code Examples](./examples/performance-optimization.md#unocss)\n\n**Why it's awesome:** On-demand generation and presets. Usually lighter than shipping a full framework.\n\n**Installation:**\n\n```bash\nnpm i -D unocss @unocss/reset\n```\n\n\u003c/details\u003e\n\n### Styling \u0026 CSS\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003e@astrojs/tailwind\u003c/strong\u003e - Tailwind CSS integration\u003c/summary\u003e\n\n**Weekly Downloads:** ~861K | **Official**\n\n- [📖 Documentation](https://docs.astro.build/en/guides/integrations-guide/tailwind/)\n- [📦 npm](https://www.npmjs.com/package/@astrojs/tailwind)\n- [💻 GitHub](https://github.com/withastro/astro/tree/main/packages/integrations/tailwind)\n\n**Why it's awesome:** Official Tailwind CSS support. Utility-first styling with zero config.\n\n**Installation:**\n\n```bash\nnpx astro add tailwind\n```\n\n\u003c/details\u003e\n\n### Images, Icons \u0026 Fonts\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003eastro-icon\u003c/strong\u003e - Icon component with Iconify support\u003c/summary\u003e\n\n**Weekly Downloads:** ~374K\n\n- [📖 Documentation](https://www.astroicon.dev/)\n- [📦 npm](https://www.npmjs.com/package/astro-icon)\n- [💻 GitHub](https://github.com/natemoo-re/astro-icon)\n- [📝 Code Examples](./examples/images-icons-fonts.md#astro-icon)\n\n**Why it's awesome:** Local or Iconify icons with smart SVG inlining and sprite dedupe for tiny payloads.\n\n**Installation:**\n\n```bash\nnpm i -D astro-icon\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003eastro-font\u003c/strong\u003e - Font optimization\u003c/summary\u003e\n\n**Weekly Downloads:** ~12K\n\n- [📦 npm](https://www.npmjs.com/package/astro-font)\n- [💻 GitHub](https://github.com/ayco/astro-font)\n- [📝 Code Examples](./examples/images-icons-fonts.md#font-optimization)\n\n**Why it's awesome:** Automates local and hosted font optimization with sensible defaults.\n\n**Installation:**\n\n```bash\nnpm i -D astro-font\n```\n\n\u003c/details\u003e\n\n### Authentication \u0026 Security\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003e@clerk/astro\u003c/strong\u003e - Clerk authentication\u003c/summary\u003e\n\n**Weekly Downloads:** ~5K\n\n- [📖 Documentation](https://clerk.com/docs/reference/astro/overview)\n- [📦 npm](https://www.npmjs.com/package/@clerk/astro)\n- [💻 GitHub](https://github.com/clerk/clerk-sdk-js)\n- [📝 Code Examples](./examples/authentication.md#clerk-authentication)\n\n**Why it's awesome:** Drop-in auth for accounts, sessions, and user management with SSR paths aligned for Astro.\n\n**Installation:**\n\n```bash\nnpm i @clerk/astro\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003e@auth/astro\u003c/strong\u003e - Auth.js (NextAuth.js) for Astro\u003c/summary\u003e\n\n**Weekly Downloads:** ~8K\n\n- [📖 Documentation](https://authjs.dev/getting-started/installation/adapters/astro)\n- [📦 npm](https://www.npmjs.com/package/@auth/astro)\n- [💻 GitHub](https://github.com/nextauthjs/next-auth)\n- [📝 Code Examples](./examples/authentication.md#authjs-nextauthjs)\n\n**Why it's awesome:** Popular authentication solution with many providers. Great for teams familiar with NextAuth.\n\n**Installation:**\n\n```bash\nnpm i @auth/astro\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003e@supabase/auth-helpers-astro\u003c/strong\u003e - Supabase authentication\u003c/summary\u003e\n\n**Weekly Downloads:** ~15K\n\n- [📖 Documentation](https://supabase.com/docs/guides/auth/auth-helpers/astro)\n- [📦 npm](https://www.npmjs.com/package/@supabase/auth-helpers-astro)\n- [💻 GitHub](https://github.com/supabase/auth-helpers)\n- [📝 Code Examples](./examples/authentication.md#supabase-auth)\n\n**Why it's awesome:** Open-source Firebase alternative. Includes auth, database, and storage.\n\n**Installation:**\n\n```bash\nnpm i @supabase/supabase-js @supabase/auth-helpers-astro\n```\n\n\u003c/details\u003e\n\n### Database \u0026 CMS\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003eContentful\u003c/strong\u003e - Headless CMS integration\u003c/summary\u003e\n\n- [📖 Documentation](https://www.contentful.com/developers/docs/javascript/tutorials/using-contentful-in-astro/)\n- [📦 npm](https://www.npmjs.com/package/contentful)\n- [💻 GitHub](https://github.com/contentful/contentful.js)\n- [📝 Code Examples](./examples/database-cms.md#contentful-cms)\n\n**Why it's awesome:** Popular headless CMS with great developer experience and content modeling.\n\n**Installation:**\n\n```bash\nnpm i contentful\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003eSanity\u003c/strong\u003e - Headless CMS with real-time collaboration\u003c/summary\u003e\n\n- [📖 Documentation](https://www.sanity.io/guides/astro)\n- [📦 npm](https://www.npmjs.com/package/@sanity/client)\n- [💻 GitHub](https://github.com/sanity-io/sanity)\n- [📝 Code Examples](./examples/database-cms.md#sanity-cms)\n\n**Why it's awesome:** Real-time collaboration, structured content, and powerful querying.\n\n**Installation:**\n\n```bash\nnpm i @sanity/client\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003eStrapi\u003c/strong\u003e - Open-source headless CMS\u003c/summary\u003e\n\n- [📖 Documentation](https://strapi.io/integrations/astro-cms)\n- [📦 npm](https://www.npmjs.com/package/@strapi/strapi)\n- [💻 GitHub](https://github.com/strapi/strapi)\n- [📝 Code Examples](./examples/database-cms.md#strapi-cms)\n\n**Why it's awesome:** Self-hosted, open-source CMS with REST and GraphQL APIs.\n\n**Installation:**\n\n```bash\nnpm i @strapi/strapi\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003ePrisma\u003c/strong\u003e - Next-generation ORM\u003c/summary\u003e\n\n- [📖 Documentation](https://www.prisma.io/docs/getting-started)\n- [📦 npm](https://www.npmjs.com/package/@prisma/client)\n- [💻 GitHub](https://github.com/prisma/prisma)\n- [📝 Code Examples](./examples/database-cms.md#prisma-orm)\n\n**Why it's awesome:** Type-safe database access with excellent developer experience.\n\n**Installation:**\n\n```bash\nnpm i @prisma/client\nnpm i -D prisma\n```\n\n\u003c/details\u003e\n\n### SEO \u0026 Analytics\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003eastro-seo\u003c/strong\u003e - SEO component\u003c/summary\u003e\n\n**Weekly Downloads:** ~153K\n\n- [📦 npm](https://www.npmjs.com/package/astro-seo)\n- [💻 GitHub](https://github.com/jonasmerlin/astro-seo)\n- [📝 Code Examples](./examples/seo-analytics.md#seo-component)\n\n**Why it's awesome:** Makes it easy to add SEO-relevant tags to your Astro app.\n\n**Installation:**\n\n```bash\nnpm i -D astro-seo\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003ePlausible Analytics\u003c/strong\u003e - Privacy-friendly analytics\u003c/summary\u003e\n\n- [📖 Documentation](https://plausible.io/docs)\n- [💻 GitHub](https://github.com/plausible/analytics)\n- [📝 Code Examples](./examples/seo-analytics.md#plausible-analytics)\n\n**Why it's awesome:** Lightweight analytics with simple wiring. No cookies, GDPR compliant.\n\n**Installation:**\n\n```bash\n# Manual setup - see code examples\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003eastro-umami\u003c/strong\u003e - Umami analytics integration\u003c/summary\u003e\n\n**Weekly Downloads:** ~2K\n\n- [📦 npm](https://www.npmjs.com/package/astro-umami)\n- [💻 GitHub](https://github.com/yeskunall/astro-umami)\n- [📝 Code Examples](./examples/seo-analytics.md#umami-analytics)\n\n**Why it's awesome:** Privacy-friendly analytics with smooth integration. Works well with View Transitions and Partytown.\n\n**Installation:**\n\n```bash\nnpm i -D astro-umami\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003e@astrojs/rss\u003c/strong\u003e - RSS feed generation\u003c/summary\u003e\n\n**Weekly Downloads:** ~45K\n\n- [📖 Documentation](https://docs.astro.build/en/guides/rss/)\n- [📦 npm](https://www.npmjs.com/package/@astrojs/rss)\n- [💻 GitHub](https://github.com/withastro/astro/tree/main/packages/integrations/rss)\n- [📝 Code Examples](./examples/seo-analytics.md#rss-feed)\n\n**Why it's awesome:** Generate RSS for blogs or release notes. Keeps subscribers in sync.\n\n**Installation:**\n\n```bash\nnpm i -D @astrojs/rss\n```\n\n\u003c/details\u003e\n\n### Developer Experience\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003eastro-auto-import\u003c/strong\u003e - Auto-import components\u003c/summary\u003e\n\n**Weekly Downloads:** ~8K\n\n- [📦 npm](https://www.npmjs.com/package/astro-auto-import)\n- [💻 GitHub](https://github.com/ElMassimo/astro-auto-import)\n\n**Why it's awesome:** Automatically imports components in Astro projects. Reduces boilerplate.\n\n**Installation:**\n\n```bash\nnpm i -D astro-auto-import\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003eastro-expressive-code\u003c/strong\u003e - Syntax highlighting engine\u003c/summary\u003e\n\n**Weekly Downloads:** ~12K\n\n- [📦 npm](https://www.npmjs.com/package/astro-expressive-code)\n- [💻 GitHub](https://github.com/expressive-code/astro-expressive-code)\n\n**Why it's awesome:** Modular syntax highlighting \u0026 annotation engine for presenting source code.\n\n**Installation:**\n\n```bash\nnpm i -D astro-expressive-code\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003eeslint-plugin-astro\u003c/strong\u003e - ESLint plugin for Astro\u003c/summary\u003e\n\n**Weekly Downloads:** ~85K\n\n- [📦 npm](https://www.npmjs.com/package/eslint-plugin-astro)\n- [💻 GitHub](https://github.com/ota-meshi/eslint-plugin-astro)\n- [📝 Code Examples](./examples/testing-qa.md#eslint-for-astro)\n\n**Why it's awesome:** Linting Astro components using ESLint. Find problems and apply consistent code style.\n\n**Installation:**\n\n```bash\nnpm i -D eslint @astrojs/eslint-config eslint-plugin-astro\n```\n\n\u003c/details\u003e\n\n### Testing \u0026 Quality Assurance\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003eVitest\u003c/strong\u003e - Unit testing\u003c/summary\u003e\n\n- [📖 Documentation](https://vitest.dev/)\n- [📦 npm](https://www.npmjs.com/package/vitest)\n- [💻 GitHub](https://github.com/vitest-dev/vitest)\n- [📝 Code Examples](./examples/testing-qa.md#vitest-setup)\n\n**Why it's awesome:** Fast unit test framework. Works great with Astro's Vite-based build.\n\n**Installation:**\n\n```bash\nnpm i -D vitest @testing-library/dom @testing-library/user-event\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003ePlaywright\u003c/strong\u003e - End-to-end testing\u003c/summary\u003e\n\n- [📖 Documentation](https://playwright.dev/)\n- [📦 npm](https://www.npmjs.com/package/@playwright/test)\n- [💻 GitHub](https://github.com/microsoft/playwright)\n- [📝 Code Examples](./examples/testing-qa.md#playwright-e2e-testing)\n\n**Why it's awesome:** Reliable end-to-end testing. Prevents regressions in layouts, routes, and interactive islands.\n\n**Installation:**\n\n```bash\nnpm i -D @playwright/test\nnpx playwright install\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003e@axe-core/playwright\u003c/strong\u003e - Accessibility testing\u003c/summary\u003e\n\n- [📦 npm](https://www.npmjs.com/package/@axe-core/playwright)\n- [💻 GitHub](https://github.com/dequelabs/axe-core)\n- [📝 Code Examples](./examples/testing-qa.md#accessibility-testing-with-axe)\n\n**Why it's awesome:** Automated accessibility testing. Prevents regressions and improves usability for everyone.\n\n**Installation:**\n\n```bash\nnpm i -D @axe-core/playwright\n```\n\n\u003c/details\u003e\n\n### Accessibility\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003eastro-a11y\u003c/strong\u003e - Accessibility checks\u003c/summary\u003e\n\n**Weekly Downloads:** ~3K\n\n- [📦 npm](https://www.npmjs.com/package/astro-a11y)\n- [💻 GitHub](https://github.com/markteekman/astro-a11y)\n\n**Why it's awesome:** Provides accessibility checks and improvements for Astro projects.\n\n**Installation:**\n\n```bash\nnpm i -D astro-a11y\n```\n\n\u003c/details\u003e\n\n---\n\n## 📝 Code Examples\n\nDetailed code examples and implementation guides are available in the [`examples/`](./examples/) directory:\n\n- [Performance Optimization](./examples/performance-optimization.md) - Compression, critical CSS, Partytown, UnoCSS\n- [Content Management](./examples/content-management.md) - MDX, Content Collections, Starlight\n- [UI Frameworks](./examples/ui-frameworks.md) - React, Vue, Svelte, Preact, SolidJS, Alpine.js\n- [Adapters \u0026 Deployment](./examples/adapters-deployment.md) - Vercel, Netlify, Cloudflare, Node.js\n- [SEO \u0026 Analytics](./examples/seo-analytics.md) - Sitemap, SEO tags, Google Analytics, Plausible, Umami, RSS\n- [Images, Icons \u0026 Fonts](./examples/images-icons-fonts.md) - Astro Icon, image optimization, font loading\n- [Authentication](./examples/authentication.md) - Clerk, Auth.js, Supabase, Lucia\n- [Database \u0026 CMS](./examples/database-cms.md) - Astro DB, Contentful, Sanity, Strapi, Prisma\n- [Testing \u0026 QA](./examples/testing-qa.md) - Vitest, Playwright, ESLint, accessibility testing\n\n---\n\n## 💡 Best Practices\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003eIsland Architecture\u003c/strong\u003e\u003c/summary\u003e\n\n- Prefer fewer, larger islands over many small ones to reduce hydration overhead\n- Use `client:visible` or `client:idle` to delay hydration where possible\n- Lazy-import heavy subcomponents inside hydrated islands\n- Keep the rest of the site native so Astro can ship near-zero JS by default\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003ePerformance\u003c/strong\u003e\u003c/summary\u003e\n\n- Put compression integrations last in your `integrations` array\n- Use critical CSS inliners for faster first paint\n- Offload third-party scripts to Partytown\n- Optimize images using Astro's built-in image optimization\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003eSEO\u003c/strong\u003e\u003c/summary\u003e\n\n- Always set your `site` URL in `astro.config.mjs` for sitemap generation\n- Use structured data (JSON-LD) for rich snippets\n- Generate RSS feeds for blogs and changelogs\n- Set up proper robots.txt\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003eSecurity\u003c/strong\u003e\u003c/summary\u003e\n\n- Use security headers (CSP, HSTS, etc.)\n- Validate environment variables\n- Sanitize user input\n- Use HTTPS everywhere\n\n\u003c/details\u003e\n\n---\n\n## 📚 Resources\n\n### Official Resources\n\n- [Astro Documentation](https://docs.astro.build/)\n- [Astro Integrations Guide](https://docs.astro.build/en/guides/integrations-guide/)\n- [Astro Integration API Reference](https://docs.astro.build/en/reference/integrations-reference/)\n- [Astro Integrations Directory](https://astro.build/integrations/)\n- [Astro Discord Community](https://astro.build/chat)\n\n### Community Resources\n\n- [Astro Blog](https://astro.build/blog/)\n- [Astro GitHub Discussions](https://github.com/withastro/astro/discussions)\n- [r/astrojs](https://www.reddit.com/r/astrojs/) - Reddit community.\n- [Stack Overflow - Astro](https://stackoverflow.com/questions/tagged/astro)\n\n### Related Awesome Lists\n\n- [Awesome Astro](https://github.com/one-aalam/awesome-astro)\n- [Astro Themes](https://astro.build/themes/)\n\n---\n\n## 🤝 Contributing\n\nContributions are welcome! This repository aims to be a comprehensive resource for Astro integrations.\n\n**Curator:** [Rich Lewis](https://RichLewis.com) ([@RichLewis007](https://github.com/RichLewis007))\n\n**How to contribute:**\n\n1. **Add a new integration**: Submit a pull request with the integration details\n2. **Update existing entries**: Keep information current and accurate\n3. **Improve examples**: Add or enhance code examples\n4. **Fix issues**: Report bugs or suggest improvements\n\n**Guidelines:**\n\n- Only include integrations that are actively maintained\n- Provide links to documentation, GitHub, and npm\n- Include installation instructions\n- Add code examples when possible\n- Keep descriptions concise and helpful\n\n---\n\n## Footnotes\n\n- Curated by [Rich Lewis](https://RichLewis.com) ([@RichLewis007](https://github.com/RichLewis007))\n- [⭐ Star this repo](https://github.com/RichLewis007/awesome-astro-integrations) if you find it helpful!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FRichLewis007%2Fawesome-astro-integrations","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FRichLewis007%2Fawesome-astro-integrations","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FRichLewis007%2Fawesome-astro-integrations/lists"}