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.

AgnosticUI requires the import of the common.min.css from your Astro base layout:

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

Then you can import Astro Tags component:

import AgTags from 'agnostic-astro/Tags.astro';

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

...
<AgTag class="mbs24 mie8" copy="unknown" />
<AgTag class="mie8" copy="uppercase" isUppercase />
<AgTag class="mie8" shape="round" copy="round" />
<AgTag class="mie8" shape="pill" copy="pill shape with type info" type="info" />
<div class="mbs24 flex-inline align-center mie8">
<small class="mie6">errors: </small>
  <AgTag shape="circle" copy="9" type="error" />
</div>
<AgTag class="mie8" copy="success" type="success" />
<AgTag class="mie8" copy="info" type="info" />
<AgTag class="mie8" copy="warn" type="warning" />
<AgTag class="mie8" copy="saved" shape="pill" type="info" isUppercase />
<AgTag class="mie8" copy="error" type="error" shape="round" isUppercase />
<AgTag class="mie8" copy="sure?" type="warning" isUppercase />
...and so on