Material Design

Material Design is a design system built and supported by Google designers and developers.

In this page

Intro

Material is a design system created by Google to help teams build high-quality digital experiences for Android, iOS, Flutter, and the web.

Principles

Material is the Metaphor

Material Design is inspired by the physical world and its textures, including how they reflect light and cast shadows. Material surfaces reimagine the mediums of paper and ink.

Components

Material Components are interactive building blocks for creating a user interface, and include a built‐in states system to communicate focus, selection, activation, error, hover, press, drag, and disabled states. Component libraries are available for Android, iOS, Flutter, and the web.

Theming

Material Components are interactive building blocks for creating a user interface, and include a built-in states system to communicate focus, selection, activation, error, hover, press, drag, and disabled states. Component libraries are available for Android, iOS, Flutter, and the web.

React

Material UI

Behavior and consistency are the main benefits.

Material UI is an open‐source React component library that implements Google's Material Design. It's comprehensive and can be used in production out of the box.