Create an accessible React application with the material design specifications and Scss.
- Installing packages - How to install related components and packages within react-md for building your application
- Creating a new app - How to create a new app with react-md
- Using a GitHub template - Create a new repo from a GitHub template including reasonable react-md defaults and Next.js.
- Examples with Build Tools - View and download examples of using ReactMD with build tools such as create-react-app, Next.js, and Gatsby
- Customizing your theme - How to implement a different theme for your React application
- Full documentation - All the remaining documentation along with every single guide, API Reference, and examples
- Library Size - The UMD bundle size for the entire
react-mdlibrary and sizes for some of the pre-built css files.
- Matches the accessibility guidelines from www.w3.org
- 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 https://unpkg.com (see more information here)
- Written and maintained in Typescript
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 startnpx comes with npm 5.2+ and higher, if you have an older version you will need to install
create-react-appglobally instead
Or with yarn:
yarn create react-app my-app
cd my-appNOTE: You can also add the
--typescriptflag to bootstrap a react-app with typescript support
Next, install react-md and sass:
npm install --save react-md sassNext, 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 https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,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>
</head>
- <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="https://reactjs.org"
- 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
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 kBPlease read the contributing guidelines if you would like to contribute.