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

import AgAlert from 'agnostic-astro/Alert.astro';

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

<AgAlert><p>{copy}</p></AgAlert>
<AgAlert isBorderAll><p>{copy}</p></AgAlert>
<AgAlert isBorderLeft><p>{copy}</p></AgAlert>
<AgAlert isBorderTop><p>{copy}</p></AgAlert>
<AgAlert isBorderBottom><p>{copy}</p></AgAlert>
<AgAlert isBorderRight><p>{copy}</p></AgAlert>
<AgAlert type="dark"><p>{copy}</p></AgAlert>
<AgAlert type="success"><p>{copy}</p></AgAlert>
<AgAlert type="info"><p>{copy}</p></AgAlert>
<AgAlert type="warning"><p>{copy}</p></AgAlert>
<AgAlert type="error"><p>{copy}</p></AgAlert>
<AgAlert isIcon type="dark"><p>{copy}</p></AgAlert>
<AgAlert isIcon type="success"><p>{copy}</p></AgAlert>
<AgAlert isIcon type="info"><p>{copy}</p></AgAlert>
<AgAlert isIcon type="warning"><p>{copy}</p></AgAlert>
<AgAlert isIcon type="error"><p>{copy}</p></AgAlert>