Material Design 3 · Open Source · 56+ components

Material Design 3 Web Components for every framework.

AWC UI — Advanced Web Components UI — is an open-source Material Design 3 component library built with Stencil.js on standard Web Components. Use the same components in React, Angular, Vue, Svelte, or plain HTML, with typed wrappers and SSR for Next.js, Nuxt, SvelteKit, and Angular.

rocket_launch Get started Explore components arrow_forward

$ npm i @awc-ui/core @awc-ui/tokens

npm v1.0.1 GitHub

package_2 0 third-party deps smart_toy AI ready

design_services Token-driven theming

style Tonal all_inclusive RTL

Material You

Rendered live on this page by the components themselves.

notifications_active Push notifications

dark_mode Dark mode

auto_awesome Smart suggestions

Suggestion intensity Daily Weekly

accessibility_new WCAG AA verified 93% coverage

widgets

56+

Components

verified

93%

Code coverage

package_2

0

Third-party deps

deployed_code

5

Technologies

accessibility_new

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.

deployed_code

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.

palette

200+ tokens

Deep theming

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

accessibility_new

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.

design_services

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.

format_textdirection_r_to_l

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.

smart_toy

LLM manifest

AI-ready

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

colorize

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.

inventory_2

0 dependencies

Zero dependencies

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

fact_check

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.

translate

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.

dns

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.

compress

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

manage_accounts

Profile preferences

Account settings

language arrow_drop_down

Appearance

Sync interval 30 min

notifications_active Email notifications

verified_user Two-factor authentication

Profile visibility

public Public group Friends lock Private

Interests

Design Web Mobile A11y

Active sessions

Profile completeness 75%

Cancel Save changes

monitoring

Canvas chart engine

Analytics overview

trending_up +18.4% YoY

Sessions 48.2k

Conversion 4.6%

CSAT 4.6 / 5

event

Pickers & fields

Plan a session

Clear Schedule

monitor_heart

Meters & progress

System status

Deploy rollout 64%

Ingesting events… Operational

verified_user

New in AWC UI

Two-step verification

Code expires in 0:42

Send the code via SMS App Email

devices Trust this device for 30 days

Resend code Verify

donut_small

Donut + centre slot

Traffic sources

48.2k sessions / week

Live shadow DOM Rendered in-page Lazy-loaded

Browse all 56 components arrow_forward

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

schedule 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 is planned as a family of commercial products for larger applications, starting with Data Grid.

star

Free · Open source

AWC UI Core

$0 forever · MIT licensed

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

terminal Install free

No sign-up required — start with npm i @awc-ui/core @awc-ui/tokens.

workspace_premium Coming soon

workspace_premium

AWC UI Pro

Data Grid

TBD pricing and launch details to come

• table_view Data Grid comes first Our first planned Pro product, focused on working with complex application data. Features, pricing, and launch timing are still being finalized.
• stacked_line_chart More Pro products are coming Charts, scheduling, and reporting will follow Data Grid. Launch dates are to be announced. These products are not included in the Data Grid launch offer.

Be first to hear about Data Grid

Join the waitlist for 20% off your first annual Data Grid purchase. Redeem within the first 30 days after its commercial launch. Renewals are at the standard price. Offer details.

Signup needs JavaScript and a security check. If the form does not appear, enable JavaScript and reload this page.

bolt Get started

Start building
with AWC UI today.

Start with Core and design tokens, then build with any of the five supported technologies: 56+ components, 3,985 unit tests, and WCAG 2.1 AA verification in CI.

terminal Quick start guide Star on GitHub

verified MIT licensed bolt Zero config accessibility_new WCAG 2.1 AA