Awesome Open Source
Awesome Open Source

react-md license codecov Actions Status

npm downloads Join the Chat at Slack Donate

Create an accessible React application with the material design specifications and Scss.


  • Matches the accessibility guidelines from
  • Low level customizable components
  • Easily themeable on a global and component level
  • Uses css variables for dynamic themes with fallbacks for older browsers
  • Out of the box dark theme mode support
  • Out of the box left-to-right and right-to-left language support
  • UMD Bundles and pre-compiled css available on (see more information here)
  • Written and maintained in Typescript

Creating a new project

Check out the examples folder to see completed examples with different build tools such as Next.js, Gatsby, and create-react-app.

First use create-react-app to create your project:

npx create-react-app my-app
cd my-app
npm start

npx comes with npm 5.2+ and higher, if you have an older version you will need to install create-react-app globally instead

Or with yarn:

yarn create react-app my-app
cd my-app

NOTE: You can also add the --typescript flag to bootstrap a react-app with typescript support

Next, install react-md and sass:

npm install --save react-md sass

Next, create a src/App.scss file to include all the react-md styles and import the App.scss file in the src/App.js:

@use "react-md" as *;

// this will include all the styles from react-md
@include react-md-utils;
+import './App.scss';
 import logo from './logo.svg';
 import './App.css';

Finally, update the public/index.html to include the Roboto font and the Material Icons font icons stylesheets from Google fonts:

     <meta charset="utf-8" />
     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link rel="stylesheet" href=",400,500,700|Material+Icons">
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
       Only files inside the `public` folder can be referenced from the HTML.

       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     <title>React App</title>
-  <body>
+  <body class="rmd-typography">

Once you have the styles, fonts, and font icons setup, you can start creating components from react-md. It is generally recommended to update your base src/App.js to include some default configuration components:

 import './App.scss';
-import logo from './logo.svg';
-import './App.css';
-function App() {
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href=""
-          target="_blank"
-          rel="noopener noreferrer">
-          Learn React
-        </a>
-      </header>
-    </div>
-  );
+import {
+  Configuration,
+  Layout,
+  useLayoutNavigation,
+  Typography,
+  Button,
+} from 'react-md';
+// see @react-md/layout package for info on the main navigation
+const routes = {};
+function App() {
+  return (
+    <Configuration>
+      <Layout
+        title="My Title"
+        navHeaderTitle="My Nav Title"
+        treeProps={...useLayoutNavigation(routes, pathname)}
+      >
+        <Typography type="headline-4">Hello, world!</Typography>
+        <Button theme="primary">Example button</Button>
+      </Layout>
+    </Configuration>
+  );

export default App;

More information can be found on the documentation site's page about creating projects

Library Size

The base react-md package (non-scoped) is the only package that also provides pre-built css themes and a UMD bundle. If you are interested in seeing what an estimated size for this library, check out the results below:

yarn dev-utils libsize

The gzipped UMD bundle sizes are:
 - dist/umd/react-md.production.min.js 91.56 kB
 - dist/umd/react-md-with-font-icons.production.min.js 203.98 kB
 - dist/umd/react-md-with-svg-icons.production.min.js 204.03 kB

The min and max gzipped CSS bundle sizes are:
 - themes/react-md.grey-red-700-light.min.css 18.08 kB
 - themes/react-md.lime-teal-200-dark.min.css 18.15 kB


Please read the contributing guidelines if you would like to contribute.

Alternatives To React Md
Select To Compare

Alternative Project Comparisons
Related Awesome Lists
Top Programming Languages
Top Projects

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Typescript (266,129
Reactjs (166,711
Scss (20,175
Material (15,926
Icons (15,064
Accessibility (5,425
Material Design (4,672
Component Library (1,324
Umd (1,060
Material Components (419
React Md (6