Skip to content
AWC UI

Material Design 3 · Open Source · 56+ components

The Material Design 3 library for the modern web.

AWC UI — Advanced Web Components UI — is an open-source Material Design 3 component library, currently in beta, built with Stencil.js on standard web components. Use the same components in React, Angular, Vue, Svelte, or plain HTML, with typed wrappers and server-side rendering support for each.

Get started Explore components
npm i @awc-ui/core @awc-ui/tokens

Material You

Rendered live on this page by the components themselves.

Push notifications
Dark mode
Smart suggestions
Suggestion intensity Daily Weekly
56+
Components
93%
Code coverage
0
Third-party deps
5
Technologies
AA
WCAG 2.1
Why AWC UI

Material Design 3,
end to end.

Every component follows the Material Design 3 specification — variants, states, motion, and accessibility included — and every release is verified by unit, end-to-end, and accessibility test suites.

5 technologies

Technology agnostic

Standard web components that work with any technology, or none at all. Typed wrappers are published for React, Angular, Vue, and Svelte.

200+ tokens

Deep theming

Over 200 MD3 design tokens, 950+ component-level CSS custom properties, and ::part() selectors, with light and dark themes included.

WCAG 2.1 AA

Accessible by default

WAI-ARIA roles, keyboard navigation, focus management, and screen-reader support, audited against WCAG 2.1 AA in continuous integration.

M3 spec

Built to the MD3 spec

Variants, sizes, states, and motion follow the Material Design 3 specification, including state layers, ripples, and shape morphing.

Full RTL

RTL & i18n ready

CSS logical properties throughout, with directional icons that mirror automatically. Layout, positioning, and keyboard navigation all follow the document's reading direction.

LLM manifest

AI-ready

Ships with an LLM manifest that gives AI coding assistants accurate component APIs and usage guidance for generating correct code.

Theme generator

Custom theme generator

Generate a complete MD3 theme from seed colors with the built-in theme generator — matching light and dark palettes, exported as CSS tokens.

0 dependencies

Zero dependencies

The core package has no runtime dependencies. Components load lazily and individually.

Form-associated

Native form validation

Inputs are form-associated custom elements built on ElementInternals: they submit real FormData, honor required and reset, and report validity to the surrounding form.

Any i18n stack

Translation ready

Every user-visible string is a component prop with an English default, so any i18n stack plugs in without adapters. The documentation demos ship in seven locales.

SSR + DSD

Server-side rendering

A hydrate module renders components to declarative shadow DOM on the server, with validated reference apps for Next.js, Nuxt, SvelteKit, Astro, and Angular SSR.

4 density steps

Density system

A global density scale condenses every component through four steps for data-heavy screens — set one attribute on any ancestor, or tune per component.

Live on this page

Every demo here
is the library itself.

Each component in the list below is an AWC UI custom element rendered live on this page — in the hero above, in the demo card below, or both. The demos run the same code you install from npm.

<md-card> Card <md-icon-button> Icon button <md-tooltip> Tooltip <md-text-field> Text field <md-segmented-button-set> Segmented set <md-segmented-button> Segmented <md-slider> Slider <md-divider> Divider <md-switch> Switch <md-checkbox> Checkbox <md-radio> Radio <md-chip> Chip <md-loading-indicator> Loading <md-progress-indicator> Progress <md-button> Button <md-button-group> Button group <md-menu> Menu <md-menu-item> Menu item <md-dialog> Dialog <md-date-picker> Date picker <md-time-picker> Time picker <md-number-field> Number field <md-otp-field> OTP field <md-list> List <md-list-item> List item <md-meter> Meter <md-rating> Rating <md-status-dot> Status dot <md-area-chart> Area chart <md-sparkline> Sparkline <md-pie-chart> Pie chart
Profile preferences

Account settings

Appearance
Sync interval 30 min
Email notifications
Two-factor authentication
Profile visibility
Interests
Design Web Mobile A11y
Active sessions
Profile completeness 75%
Cancel Save changes
Canvas chart engine

Analytics overview

+18.4% YoY
Sessions 48.2k
Conversion 4.6%
CSAT 4.6 / 5
Pickers & fields

Plan a session

Clear Schedule
Meters & progress

System status

Deploy rollout 64%
Ingesting events… Operational
New in AWC UI

Two-step verification

Code expires in 0:42
Send the code via SMS App Email
Trust this device for 30 days
Resend code Verify
Donut + centre slot

Traffic sources

48.2k sessions / week
Live shadow DOM Rendered in-page Lazy-loaded
Browse all 56 components
Your profile updates will be applied across every device where you're signed in. You can revert from Settings → Account history within 30 days.
Not now Save
You'll lose the edits you just made to your display name, email, theme, sync interval, and interests. This action can't be undone.
Keep editing Discard
Coming soon · AWC UI Pro

Core is free and open source.
Pro will extend it.

AWC UI Core covers the complete Material Design 3 component set under the MIT license. Pro will add the large application pieces — data grid, advanced charts, scheduling, and export — for teams that need them.

Free · Open source

AWC UI Core

$0 forever · MIT licensed

  • 56 Material Design 3 components
  • Technology wrappers for React, Angular, Vue, Svelte
  • 300+ design tokens, 958 CSS theming properties, light & dark, full RTL
  • WCAG 2.1 AA · 3,901 unit tests
  • Essential charts: line, bar, area, pie & sparkline
  • Self-host docs, theme generator, full source on GitHub
Install free

No sign-up required — npm i @awc-ui/core is the whole setup.

AWC UI Pro

Power components

TBD pricing details soon · npm Org delivery

  • Data Grid Virtualized rows, server-side sorting, cell editing, multi-column filters, row grouping.
  • Advanced charts Heatmap, treemap, candlestick, radar, multi-axis combo, and real-time streams. Brushing, zoom, drilldown, annotations — themed with the same MD3 tokens.
  • Export & Reporting Print stylesheets, PDF export, CSV/Excel for grids, and a print-preview shell component.
  • Calendar & Scheduling Month, week, and day views with event drag-and-drop and recurring events.
  • Priority support Direct maintainer support with prioritized issue handling.
Get started

Start building
with AWC UI today.

Install one package and build with any of the five supported technologies: 56+ components, 3,901 unit tests, and WCAG 2.1 AA verification in CI.

Quick start guide Star on GitHub
MIT licensed Zero config WCAG 2.1 AA