Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mlaursen/react-md
React material design - An accessible React component library built from the Material Design guidelines in Sass
https://github.com/mlaursen/react-md
accessibility component-library components material material-components material-design react react-md scss typescript
Last synced: about 1 month ago
JSON representation
React material design - An accessible React component library built from the Material Design guidelines in Sass
- Host: GitHub
- URL: https://github.com/mlaursen/react-md
- Owner: mlaursen
- License: mit
- Created: 2015-11-23T19:39:04.000Z (almost 9 years ago)
- Default Branch: main
- Last Pushed: 2024-04-14T15:10:53.000Z (5 months ago)
- Last Synced: 2024-04-14T16:22:36.674Z (5 months ago)
- Topics: accessibility, component-library, components, material, material-components, material-design, react, react-md, scss, typescript
- Language: TypeScript
- Homepage: https://react-md.dev
- Size: 83.7 MB
- Stars: 2,349
- Watchers: 57
- Forks: 303
- Open Issues: 48
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: .github/CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
- awesome-material-design - React MD - Material React Components built with sass (React / Frameworks)
- awesome-fe-resources - react-md
README
# react-md [](https://github.com/mlaursen/react-md/blob/main/LICENSE) [](https://codecov.io/gh/mlaursen/react-md) [](https://github.com/mlaursen/react-md/actions)
[](https://www.npmjs.com/package/react-md)
[](https://www.npmjs.com/package/react-md)
[](https://react-md.herokuapp.com)
[](https://paypal.me/mlaursen03)
Create an accessible React application with the
[material design specifications](https://material.io/design/) and Scss.
- [Installing packages](https://react-md.dev/guides/installation) - How to
install related components and packages within react-md for building your
application
- [Creating a new app](https://react-md.dev/guides/creating-a-new-app) - How to
create a new app with react-md
- [Using a GitHub template](https://github.com/mlaursen/template-rmd) - Create a
new repo from a GitHub template including reasonable react-md defaults and
Next.js.
- [Examples with Build Tools](./examples) - View and download examples of using
ReactMD with build tools such as [create-react-app], [Next.js], and [Gatsby]
- [Customizing your theme](https://react-md.dev/guides/customizing-your-theme) -
How to implement a different theme for your React application
- [Full documentation](https://react-md.dev) - All the remaining documentation
along with every single guide, API Reference, and examples
- [Library Size](#library-size) - The UMD bundle size for the entire `react-md`
library and sizes for some of the pre-built css files.
### Highlights/Features
- Matches the accessibility guidelines from
[www.w3.org](https://www.w3.org/TR/wai-aria-practices)
- 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](https://react-md.dev/guides/cdn-links))
- Written and maintained in [Typescript]
## Creating a new project
> Check out the [examples folder](./examples) 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:
```sh
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`:
```sh
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`:
```sh
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`:
```scss
@use "react-md" as *;
// this will include all the styles from react-md
@include react-md-utils;
```
```diff
+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:
```diff
+
React App
-
+
```
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:
```diff
import './App.scss';
-import logo from './logo.svg';
-import './App.css';
-
-function App() {
- return (
-
- );
-}
+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 (
+
+
+ Hello, world!
+ Example button
+
+
+ );
+}
export default App;
```
More information can be found on the documentation site's page
[about creating projects](https://react-md.dev/guides/installation)
## 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:
```sh
yarn dev-utils libsize
The gzipped UMD bundle sizes are:
- dist/umd/react-md.production.min.js 92.51 kB
- dist/umd/react-md-with-font-icons.production.min.js 211.46 kB
- dist/umd/react-md-with-svg-icons.production.min.js 211.5 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
```
## Contributing
Please read the [contributing guidelines](./.github/CONTRIBUTING.md) if you
would like to contribute.
[typescript]: https://www.typescriptlang.org/
[next.js]: https://nextjs.org/
[gatsby]: https://www.gatsbyjs.org
[create-react-app]: https://facebook.github.io/create-react-app