Google Promotes Material Components Out of Preview Phase

• 3 minutes READ

For the past month, there’s been quite a lot of activity on Google’s Material Components GitHub page. In addition, Google updated the section on Material Components with demos and documentation. Finally, Material Components are out of the preview phase.

Material Components

Material Components are Google’s take on promoting a unified approach to Material Design. Also, known as MDC-Web, Material Components will allow developers to build, develop and design apps and web experiences that follow Google’s Material Design guidelines.

Material Components for Android

Material Componenets for Android OS

Android developers familiar with Design Support Library for Android or Material Design Lite for the web, will benefit from the improved codebase and modularity of the associated components without having to significantly alter their development architecture or switch tools.

Material Components for iOS

Material Components iOS

No-Code Email Template Builder

With Postcards you can create and edit email templates online without any coding skills! Includes more than 100 components to help you create custom emails templates faster than ever before.

Try FreeOther Products

With Material Components, Google also targets iOS developers, by allowing them to use official Material Design Components, written in native code. They’ll just have to find a way to incorporate Material Design metaphors into Apple’s rigid guidelines.

  • Google: “In the world of material design, motion describes spatial relationships, functionality, and intention with beauty and fluidity…”
  • Apple’s: “Don’t use animation for the sake of using animation…”

Material Components for the Web

Material Components for Web

For web developers, Material Components bring seamless integrations with libraries such as react, AngularJS, VueJS, etc., production-ready components and great performance. Evolved from Polymer, and subsequently, from Material Design Lite, MDC-Web provides components that are agnostic, lightweight and easy to use.

Test-Drive MDC-Web

Material Design Components are designed with modularity in mind. With 19 available components such as Animation, Buttons, Drawers, Layout Grids, Ripples, developers can install the complete library by running:

npm install --save material-components-web

Or install specific components:

npm install --save @material/button @material/card @material/textfield @material/typography

There is a quick start guide for web developers here.

To run the demos, one can setup a repo by cloning the GitHub repository and run the development server from demos/.

Are the Components of the Future Material?

While at its core, MDC-Web is a centralized repository, curated by a select team of engineers and UX engineers, Google invites anyone to contribute or fork the project on GitHub.

Low-Code Website Builders

With Startup App and Slides App you can build unlimited websites using the online website editor which includes ready-made designed and coded elements, templates and themes.

Try Startup App Try Slides AppOther Products

Pictogram of Google's Material Components

Google promises to keep components in line with the latest updates to Material Design, including aspects such as internationalization or accessibility support.

MDC-Web is officially supported on Chrome/Chrome on Android, Safari, Firefox, Edge, Opera, Mobile Safari, with Google promising to keep support going for the last two iterations of each browser.

Google’s quest to unify motion with spatial location just got more exciting. However, will Material Components live up to expectations? It’s up to developers to decide.

Doru Ciobanu

Doru is an old BMW lover with a big heart.

Posts by Doru Ciobanu
Impressive animated websites
Learn more All Products

We use cookies to ensure that we give you the best experience on our website. Privacy Statement.

  • I disagree
  • I agree