The agnostic-astro package utilizes XElement under-the-hood in order to provide build-time Astro components. These build-time components will help your project get closer to realizing a mostly no client-side runtime…if you do it right, this should mean an all-green 100% Lighthouse performance score! Leverage the benefits of Islands architecture by sending mostly server built agnostic-astro components. Then, sprinkle client-hydrated ones only as needed.

Ensure you've installed the agnostic-astro npm package (note this installs depedency agnostic-css as well):

npm i agnostic-astro

and then import common.min.css from your “base layout” (you should only need to do this in once place as this is global CSS). This brings in the required CSS custom properties, reset, and properties:

import 'agnostic-css/public/css-dist/common.min.css';

Then you can import Astro Dialog component:

import AgDialog from 'agnostic-astro/Dialog.astro';

Here's the agnostic-astro Dialog component in use:

<AgButton class="mbs40" mode="primary" isBordered isRounded data-a11y-dialog-show="YourUniqueID">
  Open the dialog
</AgButton>
<!-- isAnimatedSlideUp defaults to false. isAnimatedFadeIn defaults to true. -->
<AgDialog dialogId="YourUnitID" isAnimatedSlideUp titleId="my-dialog-title">
  <!-- The rest of this can be any valid HTML; you're essentially "projecting" the slot content. But, you WILL want to provide a close button that has the data-a11y-dialog-hide attribute as seen here. -->
  <AgClose data-a11y-dialog-hide class="dialog-close" aria-label="Close this dialog window" />
  <div class="h3 text-center" id="my-dialog-title">Subscribe to our newsletter</div>
  <p class="text-center mbs16 mbe24">
  Subscribe to our newsletter to receive the latest news and
  exclusive offers every week. We promise to never spam you or sell your data.
  </p>
  <form>
    <!-- TODO -- Use an Input.astro component here (once built). Note .label and .input* classes are from the agnostic-css package -->
    <label class="label" for="email">Email (required)</label>
    <input type="email" name="email" class="input input-large input-rounded" id="email" placeholder="youremail@gmail.com" required />
    <div class="mbe16" />
    <AgButton type="submit" size="large" mode="primary" isRounded isBlock>
      Sign Up
    </AgButton>
  </form>
</AgDialog>