Sharing is caring!

Material Components for React (MDC React)

Build Status codecov Chat

MDC React is the official implementation of Google’s Material Design Components. It is a wrapper library for MDC Web. Please refer to our MDC Web Catalog to play and interact with the Components.



The following is a list of the components that are ready to be used, with corresponding links to the design spec and MDC Web code.

Component Spec MDC Web
Button Button Design Page MDC Button
Card Card Design Page MDC Card
Checkbox Checkbox Design Page MDC Checkbox
Chips Chips Design Page MDC Chips
Fab Fab Design Page MDC Fab
Floating Label Text Field Design Page MDC Floating Label
Line Ripple Text Field Design Page MDC Line Ripple
Material Icon Material Icon Design Page Material Icon Tool
Menu Surface Menu Surface Design Page MDC Menu Surface
Notched Outline Text Field Design Page MDC Notched Outline
Ripple Ripple Design Page MDC Ripple
Select Select Design Page MDC Select
Switch Switch Design Page MDC Switch
Tab Tabs Design Page MDC Tab
Tab Bar Tabs Design Page MDC Tab Bar
Tab Indicator Tabs Design Page MDC Tab Indicator
Text Field Text Field Design Page MDC Text Field
Top App Bar Top App Bar Design Page MDC Top App Bar

Getting Started

With create-react-app

create-react-app is a popular CLI tool to getting started with React. If you’re new to React or Webpack, you might be starting out here. This section will walk you through configuring create-react-app to install and use our components.

Recommended things to know

  1. node/npm
  2. JavaScript
  4. ES6

NOTE: If you haven’t used create-react-app before, you may want to read the Overview Guide.

Subscribe to the Newsletter

Get our latest news,tutorials,guides,tips & deals delivered to your inbox.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.