Material Design React component libraries
Comprehensive React component library implementing Google's Material Design for web apps.
Same problem, same approach. Swapping one for another is a config change, not a rewrite.
Choose when your React project already uses Tailwind and you want Material Design components without MUI's CSS-in-JS runtime.
@material-tailwind is an easy-to-use components library for Tailwind CSS and Material Design.
Choose when you want an actively maintained React Material Design library built on Sass instead of CSS-in-JS.
React material design - An accessible React component library built from the Material Design guidelines in Sass
Solves the same problem with a different architecture or at a different layer. Expect to rewrite the integration.
Choose when building with Vue instead of React; actively maintained Material Design component framework.
🐉 Vue Component Framework
Choose when you want a framework-agnostic CSS/JS Material Design framework rather than React components.
Materialize, a CSS Framework based on Material Design
Choose when building Vue apps that need Material Design plus cross-platform utilities and scaffolding.
Quasar Framework - Build high-performance VueJS user interfaces in record time
Choose when the application is Angular, not React; official Angular Material implementation.
Component infrastructure and Material Design components for Angular
Choose when you want standards-based Web Components for Material Design that work outside React.
Material Design Web Components
Choose when building Vue 3 apps, including mobile, with Material Design components.
A Vue3 component library based on Material Design 2 and 3, supporting mobile and desktop.
Choose when you want Material You/Web Components rather than a React-specific component API.
Material Design 3(Material You) UI components using Web Components.
Choose when building Vue-based applications that need modular Material Design components.
:diamonds: A modular and customizable UI library based on Material Design and Vue
Choose when you want Material 3 expressive Web Components that are framework-independent.
Material 3 Expressive Web Components
Choose when building Material Design UIs for React Native instead of the web.
Material Design for React Native (Android & iOS)
Choose when you want a feature-rich React component library with Arco's design language rather than Material Design.
A comprehensive React UI components library based on Arco Design
An earlier or more limited way to do the job. Still the right call when you need something small, proven, or CPU-only.
Legacy React Material Design library; choose only for old React apps built with CSS Modules and no active maintenance.
A set of React components implementing Google's Material Design specification with the power of CSS Modules
Legacy Vue 2 Material Design components; only relevant to unmaintained Vue codebases.
Vue.js Framework - ready-to-use Vue components with Material Design, free forever.
Deprecated predecessor to Material Web; only for legacy sites already using its CSS/JS architecture.
Modular and customizable Material Design UI components for the web
Legacy React Native Material Design kit; only for old RN projects needing an unmaintained API.
Bringing Material Design to React Native
These projects were analysed and named material-ui among their alternatives. The relationship is not symmetric — how material-ui rates them is a separate judgement, made when material-ui is analysed in its own right.
calls material-ui “choose when building a React application and want the largest Material Design React component ecosystem rather than Bootstrap markup.”
Important! A new UI Kit version for Bootstrap 5 is available. Access the latest free version via the link below.
calls material-ui “Choose it for a larger, actively maintained React Material library with CSS-in-JS theming instead of CSS Modules.”
A set of React components implementing Google's Material Design specification with the power of CSS Modules