Introducing AWC UI: Material Design 3 for React, Angular, Vue and Svelte

JVM — Thu, 17 Sep 2026 13:54:55 +0000

I started building AWC UI because I couldn't find a Material Design 3 library that covered my needs for enterprise applications while remaining framework-agnostic.

I wanted one consistent set of components I could use across React, Angular, Vue and Svelte, with the practical features that larger applications need: accessible forms, theming, RTL support and server-side rendering.

AWC UI is the result: an open-source library of 56 Material Design 3 components built on standard Web Components. The core is free under the MIT license.

You can explore the components or try the application showcases directly in your browser.

One component system across different frameworks

When different teams use different frameworks, keeping a consistent interface can mean maintaining several implementations of the same design system.

AWC UI gives those applications a shared component foundation. It works with React, Angular, Vue, Svelte and plain HTML, with framework integrations and TypeScript support. Your teams can keep their application stack while sharing the same visual language and component behaviour.

More of the pieces an application needs

A business application needs forms, navigation, dialogs, tables and feedback states, as well as buttons.

AWC UI brings these together with date and time pickers, autocomplete, multi-select, an organization chart and essential charts. They share Material Design 3 styling and behaviour, which reduces the work of combining unrelated UI packages and making them feel consistent.

Form controls also integrate with native HTML forms, including submission, validation and reset. That means less custom plumbing around everyday form interactions.

Accessibility and internationalization from the start

Keyboard navigation, focus management, ARIA semantics and screen-reader support are part of the component work, with automated accessibility checks against WCAG 2.1 AA criteria.

The goal is to give developers a stronger starting point for accessible interfaces. The finished application's accessibility still depends on how its screens are designed and assembled.

Built-in RTL support and localizable component text help teams build for different languages without maintaining a separate set of controls for right-to-left layouts.

A shared design system that can match your product

Material Design 3 provides the foundation, and design tokens let you adapt it to your brand. AWC UI includes light and dark themes, a theme generator based on seed colours, and component-level styling options.

A density system lets you adjust spacing for information-heavy screens. A dashboard and a settings page can use the same components at a density that fits each workflow.

Practical features for development and maintenance

Zero third-party runtime dependencies in the core package: a smaller dependency surface to maintain.
Server-side rendering: documented integrations for Next.js, Nuxt, SvelteKit and Angular SSR, using Declarative Shadow DOM.
AI-ready documentation: component APIs and usage guidance ship with the package, so coding assistants can use documentation that matches the installed version.
Open source: inspect the implementation, report issues and contribute improvements on GitHub.

These are the kinds of needs I had in mind when building AWC UI for enterprise applications: consistent UI across stacks, configurable themes, internationalization and predictable form behaviour.

See what you can build

The Components page has interactive demos, API documentation and examples for each supported framework.

The Showcases bring those components together into demonstration applications for banking, healthcare, booking and other workflows. They're a way to explore complete screens and interactions before trying the library in your own project.

You can also inspect component variants in Storybook.

Start with the components and the showcases. If AWC UI fits your project, the documentation will take you through installation and integration.

The source is on GitHub, and the core package is on npm. If you'd like to follow the project, a GitHub star is appreciated.

What would you need from a component library before adopting it in your team?