React material design


React Material Design - React components built with sass

Build Status Join the chat at Slack Join the chat at Donate

react-md is a set of React components and sass files for implementing Google’s Material Design. The Documentation Website can be used for viewing live examples, code samples, and general prop documentation.


$ npm i -S react \
           react-dom \
           react-addons-transition-group \
           react-addons-css-transition-group \


Using create-react-app

create-react-app does not support Sass, so here are some steps to get it working:

$ create-react-app my-app --scripts-version --custom-react-scripts
$ npm i -S react-md

Customize the .env to include SASS. See custom-react-scripts for more information.

If this is not a solution for you, you can always run yarn run eject (or npm run eject) from your app and add Sass yourself.

$ create-react-app my-app
$ yarn run eject
$ yarn add react-md
$ yarn add --dev sass-loader node-sass
$ vim -O config/ config/

Add an scss/sass exclusion on line 109 ( and line 115 (

        exclude: [

In the dev config, add a new loader after the CSS loader:

        test: /\.s(a|c)ss$/,
        loader: 'style!css?importLoaders=2!postcss!sass?sourceMap&outputStyle=expanded'

In the prod config:

        test: /\.s(a|c)ss$/,
        loader: ExtractTextPlugin.extract('style', 'css?importLoaders=2!postcss!sass?outputStyle=compressed')

Using one of the Boilerplates

If create-react-app is not your thing, you can try using one of the available boilerplates.

Basic Webpack Usage

/* App.jsx */

import React from 'react';
import { render } from 'react-dom';
import WebFont from 'webfontloader';

  google: {
		families: ['Roboto:300,400,500,700', 'Material Icons'],

import './_styles.scss';
import MyAwesomeComponent from './MyAwesomeComponent';

const App = () => (
	<MyAwesomeComponent />

render(<App />, document.getElementById('app'));
/* MyAwesomeComponent.jsx */

import React, { Component }  from 'react';
import Button from 'react-md/lib/Buttons';

export default class MyAwesomeComponent extends Component {
  render() {
		return <Button raised label="Hello, World!" />;
/* _styles.scss */

@import '~react-md/scss/react-md';

You can also use the UMD build from unpkg:

<!-- Production Version -->
<link rel="stylesheet" href="[email protected]/dist/react-md.deep_purple-pink.min.css">
<script src="[email protected]/dist/react-md.min.js"></script>

<!-- Development Version -->
<!-- development version of CSS unavailable -->
<script src="[email protected]/dist/react-md.js"></script>

UMD Usage

<!DOCTYPE html>
    <link rel="stylesheet" href="[email protected]/dist/react-md.deep_purple-pink.min.css">
    <link rel="stylesheet" href="|Roboto:400,500,700">
    <div id="app"></div>
    <script src=""></script>
    <script src=""></script>
    <script src="[email protected]/dist/react-md.min.js"></script>
    var MyAwesomeComponent = React.createClass({
      render: function()  {
        return React.createElement(ReactMD.Button, { label: 'Hello, World!', flat: true });

    ReactDOM.render(React.createElement(MyAwesomeComponent), document.getElementById('app'));

Customizing the theme

The application should define a primary and secondary color. The primary color should be chosen from one of the '-500' colors and the secondary should be one of the 'a-' colors.

The default color palette is defined as:

$md-primary-color: $md-indigo-500 !default;
$md-secondary-color: $md-pink-a-200 !default;

If you change these variables before the react-md-everything mixin is included, your entire application will be styled with your new theme.

@import '~react-md/src/scss/react-md';

$md-primary-color: $md-teal-500;
$md-secondary-color: $md-lime-a-400;

@include react-md-everything;

See the themes page on the documentation website. There is also a theme builder available to try mix and matching different colors.

Known Bugs/Works in Progress/Future Changes

  • Bottom sheets
  • Steppers
  • Eventually add Floating button transitions/morphing abilities. Ex: Speed Dial, Morph into toolbar/material/paper

Related Repositories



React material design ...



React.js Markdown Editor Component ...



Material Design React Components ...



React Native TextInput styled with Material Design. ...



Material Design spinner components for React.js. ...