Documentation

AWC UI — short for Advanced Web Components UI — is a Material Design 3 component library built with Stencil.js, currently in beta. Every component ships as a standard web component with full shadow-DOM encapsulation, so it drops into React, Angular, Vue, Svelte, or plain HTML with zero configuration, and follows the MD3 specification for tokens, states and motion.

Beta

The API is stable enough to build with, but it is not frozen — expect occasional breaking changes before 1.0, and check each component’s page for what is covered.

This page is your map. If you’re brand new, start with Installation and Quick Start; everything else is one click away below.

Install in seconds

npm install @awc-ui/core @awc-ui/tokens

// Register every component + load the design tokens
import '@awc-ui/core/define';

<md-button variant="filled" icon="add">Add item</md-button>

That’s a real, accessible, themeable MD3 button — no build step, no wrapper required.

Start here

download Installation Add the packages, register components, and load the fonts. Covers HTML, React, Angular, Vue, and Svelte. arrow_forward rocket_launch Quick Start Render your first component, build a form, lay out cards, and flip on dark mode — in under five minutes. arrow_forward

Go deeper

widgets Components Browse all 56 components by category, each with live demos and per-framework code. arrow_forward palette Theming Recolor and reshape everything with 200+ MD3 design tokens and CSS parts. arrow_forward format_paint Theme Generator New Generate a complete MD3 palette from a single seed color and export the tokens. arrow_forward accessibility_new Accessibility WAI-ARIA roles, keyboard navigation, and focus management built into every component. arrow_forward format_textdirection_r_to_l RTL & i18n CSS logical properties throughout. Drop components into any dir="rtl" context. arrow_forward smart_toy For AI Agents LLM An LLM manifest any coding assistant can consume to generate correct MD3 component code. arrow_forward

Why AWC UI

• Technology agnostic — standard custom elements that work everywhere, plus typed wrappers for the four big frameworks.
• Built to the MD3 spec — variants, sizes, states and motion follow Material Design 3, with the deviations called out on each component’s page.
• Themeable to the core — 200+ --md-sys-* design tokens, per-component CSS custom properties, and ::part() hooks.
• Accessible by default — WAI-ARIA roles, keyboard support, and focus management with zero WCAG 2.1 AA violations.
• RTL-ready — logical properties and auto-mirroring directional icons.
• AI-ready — a machine-readable manifest so assistants generate correct code on the first try.

Need the source?

AWC UI is open source under the MIT license. Star it, file issues, or contribute new components on GitHub, or read the contributing guide to ship your first component.