Get started

New to Material Design? Get an overview as well as resources for setting up your environment, implementing Material Components, and theming them to match your brand.


Design

Guidelines

The Design section of the site covers our philosophy and principles for key topics including Layout, Color, and Typography. The Components section offers detailed guidance and specifications for using our components

Material Theming covers how the components can be customized for different brands and product needs.

Design files

Download components and adjust theming styles for color, typography, and elevation. Files available: Figma: Material baseline*,  Figma: Material dark theme*, and Adobe XD (maintained by Adobe).

*These files are available under Apache 2.0. By downloading these files, you agree to the Google Terms of Service. The Google Privacy Policy describes how data is handled in this service.

Examples

Material studies are example apps created by the Material Design team to demonstrate how components and theming can be used to create beautiful, usable products.


Android

Setup

Our Android getting started page explains how to set up your environment, what repositories are required, how to inherit from our theme, and how to add components.

Tutorials

Examples

The Material Android examples Github repository contains source code for demo applications built using the MDC-Android library and showcases customizations of color, typography, and shape made with Material Theming.

To preview all components available in the MDC-Android library, run the catalog module in Android Studio or by running the following Gradle command:


iOS

Setup

Material Components for iOS use the standard iOS toolchain: Xcode and CocoaPods, the open-source dependency system. Use the build environment page to find Xcode settings and supported library versions to maximize compatibility with our source.

Tutorials

Examples

To preview all components available in the MDC-iOS library, build and run the catalog.


Web

Setup

The Web getting started page explains how to quickly setup using a CDN or install components locally using npm. It also includes information on bundling the Sass and JavaScript from MDC Node modules using a bundler such as webpack.

To start exploring Material Components and Theming without setting up an environment, remix one of the Material Starter Kits on Glitch.

Framework support: MDC Web is adaptable to major web frameworks such as Angular, Vue, and React. Take a look at our framework wrappers page for a list of available wrapper libraries.

Tutorials

Examples

Take a look at the Material Design page on Glitch, featuring projects and examples of Material Components and Theming in use.


Flutter

Setup

Flutter comes bundled with Material Design widgets that work on mobile, web, and desktop. All available Material Components can be found in Flutter's Material Components catalog.

To start using them in your app, add:

Tutorials

Examples

The Flutter Gallery includes example apps, widget demos, and a Material Design template, all of which can be used in your own Flutter apps. The source code is available on Github and includes more examples.

Up next