Material 3 Web Components
Build expressive UIs. Use any framework.
A production-ready component library built on web standards and the Material 3 Expressive design system. Use it with Angular, React, Vue, Svelte, or plain HTML.
Workspace settingsLater Continue
Make it yours
Configure your experience with accessible, expressive controls.
Smart suggestionsRecommended actions as you work
Framework agnostic
Standard web components — no lock-in, works everywhere.
Material Design 3 Expressive
Implements the latest Material 3 expressive update, themeable via CSS custom properties.
Accessible
ARIA support, keyboard navigation, screen reader friendly.
Production ready
Published to npm with TypeScript definitions and source maps.
Components
m3-button5 variants · sizes · icon support · loading statev1.xarrow_forward
m3-cardElevated, filled, outlined · media & action slotsv1.xarrow_forward
m3-navigation-railCollapsible vertical nav · badge supportv1.xarrow_forward
m3-navigation-barResponsive bottom nav · auto-layout switchingv1.xarrow_forward
m3-switchToggle · checked, unchecked & disabled statesv1.xarrow_forward
m3-radio-buttonRadio group management · accessibility supportv1.xarrow_forward
m3-checkboxChecked, unchecked & indeterminate statesv1.xarrow_forward
m3-chipFilter, input, suggestion & assist variantsv1.xarrow_forward
m3-text-fieldFilled & outlined · validation · icon slotsv1.xarrow_forward
m3-sliderContinuous & discrete · range supportv1.xarrow_forward
m3-tabsPrimary & secondary tabs · icon supportv1.xarrow_forward
m3-dialogModal dialogs · backdrop · action slotsv1.xarrow_forward
m3-search-barLeading & trailing slots · keyboard navigationv1.xarrow_forward
m3-badgeNotification badges · dot & count variantsv1.xarrow_forward
m3-tooltipPlain & rich tooltips · placement controlv1.xarrow_forward
m3-progressLinear & circular · determinate & indeterminatev1.xarrow_forward
m3-menuContextual menus · keyboard navigation · accessiblev0.1arrow_forward
m3-split-buttonMain action + dropdown menu in one controlv0.1arrow_forward
m3-fab-menuFloating action button with animated menuv0.1arrow_forward
m3-loading-indicatorShape-morphing loading animationv0.1arrow_forward
m3-dividerFull-width, inset, middle · vertical · pulsing animationv1.0arrow_forward
m3-listOne, two, three lines · leading/trailing · staggered animationv1.0arrow_forward
m3-icon-buttonStandard, filled, tonal, outlined · toggle · sizesv1.0arrow_forward
m3-top-app-barSmall, center-aligned, medium, large · scroll behaviorsv1.0arrow_forward
m3-snackbarAuto-dismiss · action slot · entrance/exit animationsv1.0arrow_forward
Install
Works with
AngularReactVueSvelteVanilla JS