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/agnostic-astro

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 '@astrojs/agnostic-astro';
export default defineConfig({
  integrations: [agnosticAstro()]
});

Then you can import Astro Drawer component:

import AgDrawer from 'agnostic-astro/Drawer.astro';

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

<AgButton class="mbs40" mode="primary" data-a11y-dialog-show="TopDrawerId">
  Open Top Drawer
</AgButton>
<AgDrawer
  uniqueId="TopDrawerId"
  titleId="drawertop"
  <!-- May be one of 'top' | 'bottom' | 'start' (left if ltr writing mode) | 'end'
  placement="top"
  <!-- May be one of 'dialog' | 'alertdialog' (to not close on ESC or Overlay click)
  role="dialog"
>
  <!-- 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 you see here -->
  <AgClose
    data-a11y-dialog-hide
    class="dialog-close"
    aria-label="Close this dialog window"
  />
  <div class="h3" id="drawertop">Drawer Top</div>
  <p class="mbs16 mbe24">
  This is a drawer that was opened from the top of the viewport. Drawers are good
  for timely information that relates to the main content when you do not wish to
  fully navigate away and maintain the user's position in the application.
  </p>
</AgDrawer>