The Best Material Design React Framework
1.React Ripples
The ripple effect. Ripples everywhere.
Demo: https://rwu823.github.io/react-ripples
2.React Floating Button Menu
A Material floating button menu.
Demo
See the project page
3.Material AutoRotatingCarousel
So you wrote a great app and deployed it and everything. But how do you introduce new users to your app? Well, the Material design guidelines have a solution: Displaying the top benefits in a beautiful auto-rotating carousel!
This project implements such a carousel for Material-UI. Visit the styleguide for an interactive demo.
4.Material UI Image
Images are ugly until they’re loaded. Materialize it with material image! It will fade in like the material image loading pattern suggests.
Demo: https://mui.wertarbyte.com/#material-ui-image
5.Material icons react
Google material icons implementation for React.
Features
- Follows Material design guidelines
- Highly customizable
- Supports Material UI color palette off the shelf.
6.React Slack Chat
A Server-less Beautiful Gooey / Material Design Slack Chat Web Integrating Widget. This widget can be integrated as a Live Chat / Help Desk / Discussions for Special Interest Sites in Solo Single Customer Mode (1:1) or Community Chat (Shoutbox) Mode.
Give your users the Perfect Support / Engagement experience, with the comfort of Slack.
Throw your website visitors into a Slack Channel Community, where they can search for answers or get replies from online Slack Users.
Features
- Multiple channel support
- Attachments
- No Server needed!
- Custom Hooks
- Responsive Mobile support
- Special message UI if user is mentioned
- Auto generated user icons if userImage is not supplied
- Material UI with Animations
- Remembers selected channel
- Emoji support
- Auto scroll on new messages
DEMO: https://5punk.github.io/react-slack-chat/
7.Storybook Addon Material-UI
Addon for storybook wich wrap material-ui components into MuiThemeProvider.
This helps and simplifies development of material-ui based components.
Provides development environment which helps creating Material-UI Components. This is addon for React Storybook wich wraps your components into MuiThemeProvider. This accelerates and simplifies the development process for Material-UI based applications.
You can use this project’s demo page to discover Material-UI Theme Settings for any component and create your own new themes right online. But to take full advantage of this project run it locally in your work environment.
DEMO: https://github.com/sm-react/storybook-addon-material-ui
8.React Ink
Add the Material Design ripple effect to React component.
Demo: https://react-ink.netlify.com/
9.Admin on rest
A frontend Framework for building admin applications running in the browser on top of REST services, using ES6, React and Material Design. Open sourced and maintained by marmelab.
Features
- Adapts to any REST backend
- Complete documentation
- Optimistic rendering (renders before the server returns)
- Relationships (many to one, one to many)
- Internationalization (i18n)
- Conditional formatting
- Themeable
- Supports any authentication provider (REST API, OAuth, Basic Auth, …)
- Full-featured Datagrid (sort, pagination, filters)
- Filter-as-you-type
- Supports any form layout (simple, tabbed, etc.)
- Data Validation
- Custom actions
- Large library of components for various data types: boolean, number, rich text, etc.
- WYSIWYG editor
- Customize dashboard, menu, layout
- Super easy to extend and override (it’s just React components)
- Highly customizable interface
- Can connect to multiple backends
- Leverages the best libraries in the React ecosystem (Redux, redux-form, redux-saga, material-ui, recompose)
- Can be included in another React app
- Inspired by the popular ng-admin library (also by marmelab)
Demo: https://marmelab.com/admin-on-rest
10.React Material Design Icons
Built with Pixo, Styled Components, and Styled System
11.Material Components for the web
Modular and customizable Material Design UI components for the web https://material.io/develop/web
Material Components for the web (MDC Web) helps developers execute Material Design. Developed by a core team of engineers and UX designers at Google, these components enable a reliable development workflow to build beautiful and functional web projects.
MDC Web strives to seamlessly incorporate into a wider range of usage contexts, from simple static websites to complex, JavaScript-heavy applications to hybrid client/server rendering systems. In short, whether you’re already heavily invested in another framework or not, it should be easy to incorporate Material Components into your site in a lightweight, idiomatic fashion.
Material Components for the web is the successor to Material Design Lite. In addition to implementing the Material Design guidelines, it provides more flexible theming customization, not only in terms of color, but also typography, shape, states, and more. It is also specifically architected for adaptability to various major web frameworks.
12.Material tabs
A simple React package that provides the Material Design tab component.
This is what they look like:
13.Material Design CSS Framework
Lightweight CSS framework https://www.muicss.com
MUI is a lightweight CSS framework that follows Google’s Material Design guidelines.
14.Polythene
Material Design component library for Mithril and React.
Can be used as general-purpose component library that includes dialogs, cards, notifications, lists, buttons, form elements, and more.
Main features
- Allows creating dynamic and interactive interfaces with ease
- Closely follows the Material Design specification
- Versatile theming options
- Supports touch, mouse and keyboard
- Extensive documentation with example code
15.Material Components
Stateless UI components for react that follow material design.
material-components is a library of React (15.0.0) user interface components based on material design.
material-components are completely stateless making them an ideal companion to libraries such as Cerebral or Redux. But they can also be used with other flux based frameworks or even without a framework at all.
The development of material-components has been sponsored by Elastic Time.
Demo: http://garth.github.io/material-components/
16.React materialize
Material design components for react, powered by materializecss.Go ahead and play around with the components and see what you can do.
Live demo
https://react-materialize.github.io/
17.React Material Design
This project’s goal is to be able to create a fully accessible material design styled website using React Components and Sass. With the separation of styles in Sass instead of inline styles, it should hopefully be easy to create custom components with the existing styles.
Ambitious Material Design implementation with SASS styles, extensive component library.
Highlights/Features
- 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
18.Material-UI
Material-UI is a set of React components that implement Google’s Material Design specification.
Check out our documentation site for live examples. It’s still a work in progress, but hopefully you can see where we’re headed.
Recently Updated? Please read the changelog, this README and the documentation before posting an issue.
Live demo http://www.material-ui.com/#/
19.React Toolbox
React Toolbox is a UI library that follows the concepts of Google’s Material Design and is built on top of some of the trendiest proposals like CSS Modules (written in SASS), Webpack and ES6. The library harmoniously integrates with your Webpack workflow and it’s easily customizable and very flexible.
A set of React components implementing Google’s Material Design specification with the power of CSS Modules
live demo http://react-toolbox.com/#/components
20.React native dialogs
An Android only module for Material Design dialogs. This is a wrapper over afollestad/material-dialogs. This module is designed for Android only with no plans to support iOS.
#reactjs #javascript
