Material 3 Web Components / UI component library
Material Web is a library of Web Components implementing Google's Material Design 3 (Material You) design system to help build accessible web applications.
Same problem, same approach. Swapping one for another is a config change, not a rewrite.
Actively maintained Material Design 3 Web Components; choose over seed for a currently developed drop-in community alternative.
Material Design 3(Material You) UI components using Web Components.
Material 3 Expressive Web Components; choose over seed when you want the newer expressive Material You visuals in a custom-elements package.
Material 3 Expressive Web Components
Solves the same problem with a different architecture or at a different layer. Expect to rewrite the integration.
Vue-based all-in-one UI framework with Material Design appearance; choose when building with Vue and wanting a full-featured framework rather than framework-agnostic web components.
Quasar Framework - Build high-performance VueJS user interfaces in record time
Vue 3 component library supporting Material 2 and 3; choose for Vue-native components on mobile and desktop instead of generic web components.
A Vue3 component library based on Material Design 2 and 3, supporting mobile and desktop.
Material Design components implemented with Tailwind CSS; choose when your project is already based on Tailwind and prefers utility CSS.
@material-tailwind is an easy-to-use components library for Tailwind CSS and Material Design.
Mature Material Design component framework for Vue; choose for Vue applications seeking a large, battle-tested component ecosystem.
🐉 Vue Component Framework
Classic CSS/JS framework for Material Design; choose for plain-HTML projects that don't need web components.
Materialize, a CSS Framework based on Material Design
React component library implementing Material Design in Sass; choose when working in React and wanting framework-native components.
React material design - An accessible React component library built from the Material Design guidelines in Sass
Vue-based Material Design UI library; choose for Vue projects wanting a smaller alternative to Vuetify.
:diamonds: A modular and customizable UI library based on Material Design and Vue
Bootstrap-based Material Design UI kit; choose when already committed to Bootstrap and not wanting web components.
Important! A new UI Kit version for Bootstrap 5 is available. Access the latest free version via the link below.
Angular's official Material Design components; choose for Angular apps where framework-native integration is preferred over generic web components.
Component infrastructure and Material Design components for Angular
An earlier or more limited way to do the job. Still the right call when you need something small, proven, or CPU-only.
Earlier Google CSS/JS implementation of Material Design, now effectively unmaintained; choose only for legacy pages needing lightweight no-dependency styling.
Material Design Components in HTML/CSS/JS
Previous generation of Google's Material components, archived and without recent pushes; choose only for legacy apps already using its class-based API.
Modular and customizable Material Design UI components for the web
Svelte Material UI component library now archived and unmaintained; useful only for legacy Svelte projects that need Material styling.
A Material UI Design Component library for Svelte heavily inspired by vuetify.
Pure CSS Material components, stale and unmaintained; choose only for zero-JS static sites that accept older Material styling.
Material Design Components in Pure CSS. Materializing HTML at just one class per component 🍰
These projects were analysed and named material-web among their alternatives. The relationship is not symmetric — how material-web rates them is a separate judgement, made when material-web is analysed in its own right.
calls material-web “Choose when you want standards-based Web Components for Material Design that work outside React.”
Material UI: Comprehensive React component library that implements Google's Material Design. Free forever.
calls material-web “Choose if you prefer standard web components from the Material team that can work with any framework, including Vue.”
🐉 Vue Component Framework
calls material-web “Choose it when you want Google's official Web Components instead of Materialize's global CSS classes.”
Materialize, a CSS Framework based on Material Design
calls material-web “When you want the actively maintained successor using Web Components instead of MDL's static CSS/JS.”
Material Design Components in HTML/CSS/JS
calls material-web “Choose if you want Google's latest Material 3 web components in an Angular app, with extra bridging effort.”
Component infrastructure and Material Design components for Angular
calls material-web “Web-component Material Design library; choose if you want framework-agnostic custom elements over Vue components.”
A Vue 3 Component Library. Fairly Complete. Theme Customizable. Uses TypeScript. Fast.
calls material-web “Material Design Web Components, framework-agnostic alternative to hand-rolled Vue components.”
Vue.js Framework - ready-to-use Vue components with Material Design, free forever.
calls material-web “choose when you prefer Google-official, framework-agnostic Material Design Web Components and can forgo Bootstrap utilities.”
Important! A new UI Kit version for Bootstrap 5 is available. Access the latest free version via the link below.
calls material-web “Choose it for framework-agnostic Material Design Web Components that can be wrapped in React instead of native React components.”
A set of React components implementing Google's Material Design specification with the power of CSS Modules