description: This page explains how to integrate Shoelace with an Astro app.
---
# Integrating with Astro
This page explains how to integrate Shoelace with an Astro app.
:::tip
This is a community-maintained document. Please [ask the community](/resources/community) if you have questions about this integration. You can also [suggest improvements](https://github.com/shoelace-style/shoelace/blob/next/docs/tutorials/integrating-with-astro.md) to make it better.
In the following tutorial you will notice that Shoelace cannot be imported in the frontmatter of Astro files. This is because Shoelace relies on globals from the DOM to be present.
There is a [Lit + Astro integration for SSR](https://docs.astro.build/en/guides/integrations-guide/lit/) , however it will not work with Shoelace in its current state due to some reliance on DOM APIs that aren't shimmed. We are working to resolve this.
If you want to cherry pick components, replace the main Shoelace import with 'import "@shoelace-style/shoelace/dist/components/button/button.js";' for whichever component you would like.
:::
You only have to import in the main `index.astro` file. The components can be used anywhere throughout the project.
### Customizing animations
In `/src/pages/index.astro`, set custom animations after the Shoelace import.
```html
---
import { setBasePath } from "@shoelace-style/shoelace/dist/utilities/base-path.js";
setBasePath("dist/assets");
---
<html>
<body>
<sl-tooltipcontent="This is a tooltip">
<sl-button>Hover Me</sl-button>
</sl-tooltip>
</body>
</html>
<script>
// setBasePath to tell Shoelace where to load icons from.
You'll notice the above steps never added our icons into our `/public` directory. To solve this, we can install `rollup-plugin-copy` to copy Shoelace's assets into your public directory.
