React material design

2 years after


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



Create React apps with no build configuration. ...



Catalog of React Components & Libraries ...



Curated tutorial and resource links I've collected on React, Redux, ES6, and mor ...



React specific linting rules for ESLint ...



Integrate Semantic-ui with react components. ...