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 Avatar component:

import AgAvatar from 'agnostic-astro/Avatar.astro';

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

<Avatar text="AB" />
<AgAvatar text="ab" type="success" />
<AgAvatar text="ab" type="warning" />
<AgAvatar text="ab" type="error" />
<AgAvatar text="ab" type="info" />
<AgAvatar type="success" imgUrl="https://joeschmoe.io/api/v1/jess" />
<AgAvatar text="sm" size="small" />
<AgAvatar text="def" />
<AgAvatar text="lg" size="large" />
<AgAvatar text="xl" size="xlarge" />
<div class="avatar-group">
  <AgAvatar imgUrl="https://joeschmoe.io/api/v1/julie" />
  <AgAvatar imgUrl="https://joeschmoe.io/api/v1/jess" />
  <AgAvatar imgUrl="https://joeschmoe.io/api/v1/jon" />
  <AgAvatar imgUrl="https://joeschmoe.io/api/v1/jia" />
  <AgAvatar imgUrl="https://joeschmoe.io/api/v1/joe" />
</div>