11 Ways to Material Design React Components
1. React Ripples
The ripple effect. Ripples everywhere.
Attraction
- Zero dependencies
- Tiny and blazing fast (Pure Component)
- Typescript and definition file supported
- SSR supported
2. React Floating Button Menu
A Material floating button menu.
Demo: https://ifndefdeadmau5.github.io/react-floating-button-menu/
3. Material Auto Rotating Carousel
Introduce new users to your app with this material style carousel.
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!
4. Material icons React
Google material icons implementation for React.
5. React Slack Chat
A 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.
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
6. 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.
7. React Ink
Add the Material Design ripple effect to React component.
Demo: https://react-ink.netlify.com/
8. 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
Demo: https://marmelab.com/admin-on-rest-demo/#/login
9. Material Components for the 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.
10. Material Tabs
A simple React package that provides the Material Design tab component.
11.Material Design CSS Framework
MUI is a lightweight CSS framework that follows Google’s Material Design guidelines
Features
MUI is designed from the ground up to be fast, small and developer friendly. By design it only includes the basic components you need to build a site that follows Google’s Material Design guidelines. Some of the key features of MUI are:
- Small footprint: mui.min.css - 6.6K, mui.min.js - 5.4K (gzipped)
- A responsive grid to make mobile-friendly sites
- No external dependencies
- CSS library that can be customized with your own colors
- JS library can be loaded asyncronously
- Email library for styling HTML emails
To get started using MUI, go to the MUI website to see examples and download boilerplate HTML.
12.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
Demos
13.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.
14.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/
15.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
GitHub: https://github.com/mlaursen/react-md
16.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/#/
17.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
18.React native dialogs
Material Design dialogs for React Native Android apps (wrapper over afollestad/material-dialogs)
GitHub: https://github.com/aakashns/react-native-dialogs
Thank for Read !!
#reactjs #javascript
