Framework-Agnostic UI Components with Web Awesome

Modern frontend development forces an uncomfortable choice. Either commit to a framework-specific component library like Material UI (React) or Vuetify (Vue), accepting vendor lock-in and migration headaches—or build custom components from scratch, sacrificing development speed and consistency.

This article explores Web Awesome, a framework-agnostic UI library built on native Web Components that eliminates this false dichotomy. As the successor to Shoelace, it provides production-ready components that work everywhere HTML does, with a powerful theming API that rivals framework-specific solutions.

What Makes Web Awesome Different

Native Web Components at the Core

Web Awesome leverages browser-native custom elements, Shadow DOM, and CSS custom properties. Unlike React or Vue components, these work directly in the browser without transpilation:

<!-- Works in any HTML file, no build step required -->
<link rel="stylesheet" href="https://early.webawesome.com/webawesome@3.0.0-beta.6/dist/styles/themes/default.css">
<script type="module" src="https://early.webawesome.com/webawesome@3.0.0-beta.6/dist/components/button/button.js"></script>

<wa-button variant="brand">Click me</wa-button>

This isn’t just another abstraction layer—it’s using the platform itself. Your <wa-button> is as native as <button>, with full encapsulation and browser optimization.

True Framework Agnosticism

While other libraries claim framework compatibility through adapters, Web Awesome components are genuinely framework-agnostic. They work identically in React, Vue, Angular, Svelte, or vanilla JavaScript:

// React 19+
import '@awesome.me/webawesome/dist/components/input/input.js';

function Form() {
  return <wa-input label="Email" type="email" required />;
}

<!-- Vue 3 -->
<template>
  <wa-input label="Email" type="email" required />
</template>

<script setup>
import '@awesome.me/webawesome/dist/components/input/input.js';
</script>

No wrappers. No adapters. Just HTML elements that happen to be custom.

The Evolution from Shoelace

Web Awesome builds on Shoelace’s foundation with significant improvements:

• Complete CSS framework: Beyond components, Web Awesome includes typography, layouts, and utility classes
• Enhanced theming API: Three-layer customization system (global properties, component properties, CSS parts)
• Larger component library: Expanded from Shoelace’s base with additional form controls, layouts, and patterns
• Font Awesome integration: Optional premium icon packs through kit codes

The migration path from Shoelace is straightforward—most components share similar APIs with the sl- prefix becoming wa-.

Theming Without Build Tools

Three Layers of Customization

Web Awesome’s theming system operates at three levels, all using standard CSS:

/* 1. Global design tokens */
:root {
  --wa-color-primary-500: #0ea5e9;
  --wa-border-radius-medium: 0.5rem;
  --wa-font-size-base: 16px;
}

/* 2. Component-scoped properties */
wa-button {
  --wa-button-height-medium: 3rem;
  --wa-button-font-weight: 600;
}

/* 3. CSS parts for deep customization */
wa-button::part(label) {
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

This approach provides Bootstrap-like theming flexibility without preprocessors or build steps. Changes cascade naturally through the component tree.

Performance and Accessibility Benefits

Lazy Loading by Default

Web Components enable true lazy loading at the component level. Using Web Awesome’s autoloader, components load only when used:

<script type="module" src="https://early.webawesome.com/webawesome@3.0.0-beta.6/dist/webawesome.loader.js"></script>

<!-- Component loads only when <wa-dialog> appears in DOM -->
<wa-dialog label="Settings">...</wa-dialog>

Built-in Accessibility

Every Web Awesome component includes proper ARIA attributes, keyboard navigation, and focus management. The Shadow DOM ensures these implementations can’t be accidentally overridden:

<!-- Automatically includes role="button", tabindex, keyboard handlers -->
<wa-button disabled>
  Screen readers announce this correctly
</wa-button>

Getting Started

For most projects, the CDN approach requires just two lines:

<link rel="stylesheet" href="https://early.webawesome.com/webawesome@3.0.0-beta.6/dist/styles/themes/default.css">
<script type="module" src="https://early.webawesome.com/webawesome@3.0.0-beta.6/dist/webawesome.loader.js"></script>

For production applications using npm:

npm install @awesome.me/webawesome

Then import only what you need:

import '@awesome.me/webawesome/dist/styles/themes/default.css';
import '@awesome.me/webawesome/dist/components/card/card.js';
import '@awesome.me/webawesome/dist/components/button/button.js';

Why Standards-Based UI Matters

Framework-agnostic components built on web standards provide unique long-term advantages. Your UI components remain portable across technology stacks, reducing rewrite costs when frameworks change. Teams can choose different frameworks for different parts of an application without sacrificing UI consistency.

Most importantly, you’re betting on the web platform itself rather than any single company or community. Web Components are now supported in all modern browsers, with a specification unlikely to break backward compatibility.

Conclusion

For teams tired of rewriting UI with each framework migration, Web Awesome offers a sustainable alternative—components that work everywhere, customizable with just CSS, and built on standards that will outlast any framework trend. By choosing Web Components over framework-specific solutions, you invest in code that remains valuable regardless of which framework dominates tomorrow’s landscape.

FAQs

Gain Debugging Superpowers

Unleash the power of session replay to reproduce bugs, track slowdowns and uncover frustrations in your app. Get complete visibility into your frontend with OpenReplay — the most advanced open-source session replay tool for developers. Check our GitHub repo and join the thousands of developers in our community.