Integrations
Astro
Use the package exports in an Astro site.
This website is an Astro site that uses the Clean CSS and ESM exports, with examples rendered as ordinary HTML in the page.
Load the library
Import the stylesheet in your layout and start the components from a client script.
---
import '@pelatform/ui/css';
---
<div data-plf-root>
<slot />
</div>
<script>
import {init} from '@pelatform/ui';
init();
</script>If the site also uses Tailwind CSS or other shared styles, import @pelatform/ui/css/prefixed and use plf: classes; see Choose a CSS mode. Import extension CSS after the base stylesheet and register each extension with use() before init(). Never load both CSS modes in one document.
Navigation and lifecycle
With ordinary navigation, nothing more is needed: a page restored from the back/forward cache keeps its components. Astro’s client router swaps the page without loading it; add observe(document) to the script, and each swap destroys the departing page’s components and starts the new page’s, while an element with data-astro-transition-persist keeps its components:
<script>
import {init, observe} from '@pelatform/ui';
init();
observe(document);
</script>For smooth page changes without a client router, see Page transitions.