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 and setup the AgnosticUI Astro integration which will import the required common.min.css onto your page:

npm i astro-agnosticui

Then add the integration to your astro.config.mjs (you may need to run Astro with experimental integrations flag astro dev --experimental-integrations):

import { defineConfig } from 'astro/config';
import agnosticAstro from 'astro-agnosticui';;
export default defineConfig({
  integrations: [agnosticAstro()]
});

Then you can import Astro Dialog component (agnostic-astro ships with the astro-agnosticui integration):

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>