All Projects → mlaursen → React Md

mlaursen / React Md

Licence: mit
React material design - An accessible React component library built from the Material Design guidelines in Sass

Programming Languages

32286 projects
7915 projects

Projects that are alternatives of or similar to React Md

Svelte Materialify
A Material UI Design Component library for Svelte heavily inspired by vuetify.
Stars: ✭ 351 (-84.63%)
Mutual labels:  material-design, material, material-components, component-library
A simple 'Slide to Unlock' Material widget for Android, written in Kotlin 📱🎨🦄
Stars: ✭ 783 (-65.72%)
Mutual labels:  material-design, material, material-components
A beautiful app designed with Material Design 2 using Android X.
Stars: ✭ 170 (-92.56%)
Mutual labels:  material-design, material, material-components
🐉 Material Component Framework for Vue
Stars: ✭ 33,085 (+1348.56%)
Mutual labels:  material-design, material, material-components
📖 Library for QtQuick apps with Material Design
Stars: ✭ 601 (-73.69%)
Mutual labels:  material-design, material, material-components
Clarity is a scalable, accessible, customizable, open source design system built with web components. Works with any JavaScript framework, built for enterprises, and designed to be inclusive.
Stars: ✭ 6,398 (+180.12%)
Mutual labels:  component-library, components, accessibility
Material Components
Documentation and policies for Material Components (all platforms)
Stars: ✭ 872 (-61.82%)
Mutual labels:  material-design, material, material-components
Material Components Ios
[In maintenance mode] Modular and customizable Material Design UI components for iOS
Stars: ✭ 4,484 (+96.32%)
Mutual labels:  material-design, material, material-components
A theme engine for Android
Stars: ✭ 1,319 (-42.25%)
Mutual labels:  material-design, material, material-components
Smart Webcomponents
Web Components & Custom Elements for Professional Web Applications
Stars: ✭ 110 (-95.18%)
Mutual labels:  material-design, material, material-components
Material Intro
A simple material design app intro with cool animations and a fluent API.
Stars: ✭ 1,718 (-24.78%)
Mutual labels:  material-design, material, material-components
An implementation of tap targets from the Material Design guidelines for feature discovery.
Stars: ✭ 5,114 (+123.91%)
Mutual labels:  material-design, material, material-components
Angular Mdc Web
Angular wrapper for Material Design (Web) Components
Stars: ✭ 542 (-76.27%)
Mutual labels:  material-design, material, material-components
Material Design text field that comes in a box, based on (OLD) Google Material Design guidelines.
Stars: ✭ 760 (-66.73%)
Mutual labels:  material-design, material, component-library
Android Iconics
Android-Iconics - Use any icon font, or vector (.svg) as drawable in your application.
Stars: ✭ 4,916 (+115.24%)
Mutual labels:  material-design, material, material-components
Material Design Components in Pure CSS. Materializing HTML at just one class per component 🍰
Stars: ✭ 888 (-61.12%)
Mutual labels:  material-design, material, material-components
Quasar Framework - Build high-performance VueJS user interfaces in record time
Stars: ✭ 20,090 (+779.6%)
Mutual labels:  material-design, material, material-components
Bootstrap Vue
BootstrapVue provides one of the most comprehensive implementations of Bootstrap v4 for Vue.js. With extensive and automated WAI-ARIA accessibility markup.
Stars: ✭ 13,603 (+495.58%)
Mutual labels:  components, accessibility, component-library
Material Design Lite
Material Design Components in HTML/CSS/JS
Stars: ✭ 31,931 (+1298.03%)
Mutual labels:  material-design, material, material-components
A library to simply use Backdrop in your project (make it easy). Read more ->
Stars: ✭ 137 (-94%)
Mutual labels:  material-design, material, material-components

react-md license codecov Actions Status Commitizen friendly

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 87.45 kB
 - dist/umd/react-md-with-font-icons.production.min.js 112.77 kB
 - dist/umd/react-md-with-svg-icons.production.min.js 180.16 kB

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


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

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].