Astro integrations add new functionality and behaviors for your project with only a few lines of code. You can write a custom integration yourself, use an official integration, or use integrations built by the community.
- Unlock React, Vue, Svelte, Solid, and other popular UI frameworks.
- Integrate tools like Tailwind, and Partytown with a few lines of code.
- Add new features to your project, like automatic sitemap generation.
- Write custom code that hooks into the build process, dev server, and more.
Browse or search the complete set of hundreds of official and community integrations in our integrations directory. Find packages to add to your Astro project for authentication, analytics, performance, SEO, accessibility, UI, developer tools, and more.
Official IntegrationsSection titled Official Integrations
The following integrations are maintained by Astro.
Automatic Integration SetupSection titled Automatic Integration Setup
Astro includes an
astro add command to automate the setup of official integrations. Several community plugins can also be added using this command. Please check each integration’s own documentation to see whether
astro add is supported, or whether you must install manually.
astro add command using the package manager of your choice and our automatic integration wizard will update your configuration file and install any necessary dependencies.
It’s even possible to add multiple integrations at the same time!
If you see any warnings like
Cannot find package '[package-name]' after adding an integration, your package manager may not have installed peer dependencies for you. To install these missing packages, run
npm install [package-name].
Manual InstallationSection titled Manual Installation
Astro integrations are always added through the
integrations property in your
There are three common ways to import an integration into your Astro project:
Import your own integration from a local file inside your project.
Write your integration inline, directly in your config file.
Check out the Integration API reference to learn all of the different ways that you can write an integration.
Installing an NPM packageSection titled Installing an NPM package
Install an NPM package integration using a package manager, and then update
For example, to install the
Install the integration to your project dependencies using your preferred package manager:
Import the integration to your
astro.config.mjsfile, and add it to your
integrationsarray, along with any configuration options:
Note that different integrations may have different configuration settings. Read each integration’s documentation, and apply any necessary config options to your chosen integration in
Custom OptionsSection titled Custom Options
Integrations are almost always authored as factory functions that return the actual integration object. This lets you pass arguments and options to the factory function that customize the integration for your project.
Toggle an IntegrationSection titled Toggle an Integration
Falsy integrations are ignored, so you can toggle integrations on & off without worrying about left-behind
undefined and boolean values.
Upgrading IntegrationsSection titled Upgrading Integrations
To upgrade all official integrations at once, run the
@astrojs/upgrade command. This will upgrade both Astro and all official integrations to their latest versions.
Automatic UpgradingSection titled Automatic Upgrading
Manual UpgradingSection titled Manual Upgrading
To upgrade one or more integrations manually, use the appropriate command for your package manager.
Removing an IntegrationSection titled Removing an Integration
To remove an integration, first uninstall the integration from your project
Next, remove the integration from your
Finding More IntegrationsSection titled Finding More Integrations
You can find many integrations developed by the community in the Astro Integrations Directory. Follow links there for detailed usage and configuration instructions.
Building Your Own IntegrationSection titled Building Your Own Integration
Astro’s Integration API is inspired by Rollup and Vite, and designed to feel familiar to anyone who has ever written a Rollup or Vite plugin before.
Check out the Integration API reference to learn what integrations can do and how to write one yourself.Recipes