Web Awesome

Web Awesome is the successor to Shoelace, built by the same team at Font Awesome. Framework-agnostic web components using shadow DOM, working in vanilla JavaScript or inside React, Vue, Angular and Svelte without wrappers.

At a glance

Install	CDN, or npm install @awesome.me/webawesome
Standard	native custom elements with shadow DOM
Forms	form-associated elements, native validation applies
Icons	Font Awesome by default
Agent tooling	two Agent Skills ship with the package
License	MIT for the open library, commercial for Pro

Why it exists

Shoelace proved that serious component libraries could be built on web standards. Web Awesome is that project continued with resources behind it, and Shoelace's own documentation now points here for new work.

Form controls are the technical standout

The form components are form-associated custom elements, which means they participate in native form submission and the Constraint Validation API. required, :invalid and form.checkValidity() work on them exactly as they do on a native input.

Most component libraries reimplement validation in JavaScript and diverge from browser behaviour. This does not.

<form>
  <wa-input name="email" type="email" label="Email" required></wa-input>
  <wa-button type="submit" variant="brand">
    <wa-icon name="paper-plane" slot="start"></wa-icon>
    Send invite
  </wa-button>
</form>

Free versus Pro

The open library is MIT and substantial. A Pro tier adds further components, loaded from CDN alongside the free ones. Check which tier the component you need sits in before you plan around it.

Choose it if

• You want components that outlive your framework choice.
• You need form controls that behave like native ones rather than approximating them.
• You are on Shoelace and looking at where to go next.

Look elsewhere if

• Shadow DOM styling is a problem for your setup. You style through CSS custom properties and ::part(), not by reaching in.
• You want a purely free library with no commercial tier above it.