kradio3 / React Mdc Web
Licence: mit
Material Design Components for React
Stars: ✭ 175
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to React Mdc Web
Materialdesign2
A beautiful app designed with Material Design 2 using Android X.
Stars: ✭ 170 (-2.86%)
Mutual labels: material, design
Materialdesigndemo
A beautiful app designed with Material Design.
Stars: ✭ 1,391 (+694.86%)
Mutual labels: material, design
Fiftyshadesof
An elegant context-care loading placeholder for Android
Stars: ✭ 1,110 (+534.29%)
Mutual labels: material, design
Material Bottom Nav
A bottom navigation bar adhering to the Material Design specification.
Stars: ✭ 41 (-76.57%)
Mutual labels: material, design
Arclayout
With Arc Layout explore new styles and approaches on material design
Stars: ✭ 1,662 (+849.71%)
Mutual labels: material, design
Material Design Theme
🎨 A ex-theme for Discord according to Google's Material design Guidelines. Now moved to https://github.com/rauenzi/Nox
Stars: ✭ 50 (-71.43%)
Mutual labels: material, design
Material Design For Bootstrap
Important! A new UI Kit version for Bootstrap 5 is available. Access the latest free version via the link below.
Stars: ✭ 9,463 (+5307.43%)
Mutual labels: material, design
Aiflatswitch
Nicely animated flat design switch alternative to UISwitch
Stars: ✭ 904 (+416.57%)
Mutual labels: material, design
Material Discord
Material design theme for Discord
Stars: ✭ 127 (-27.43%)
Mutual labels: material, design
Materialdesigninxamltoolkit
Google's Material Design in XAML & WPF, for C# & VB.Net.
Stars: ✭ 11,603 (+6530.29%)
Mutual labels: material, design
Flutter Neumorphic
A complete, ready to use, Neumorphic ui kit for Flutter, 🕶️ dark mode compatible
Stars: ✭ 988 (+464.57%)
Mutual labels: material, design
Material
A UI/UX framework for creating beautiful applications.
Stars: ✭ 11,870 (+6682.86%)
Mutual labels: material, design
Materialdesigncolor
This project shows the color in material design
Stars: ✭ 55 (-68.57%)
Mutual labels: material, design
Singledateandtimepicker
You can now select a date and a time with only one widget !
Stars: ✭ 921 (+426.29%)
Mutual labels: material, design
Steppers
Steppers view library for Android, based on Google Material design guidelines
Stars: ✭ 786 (+349.14%)
Mutual labels: material, design
Materialize
Materialize, a CSS Framework based on Material Design
Stars: ✭ 38,630 (+21974.29%)
Mutual labels: material, design
Motion
A library used to create beautiful animations and transitions for iOS.
Stars: ✭ 1,726 (+886.29%)
Mutual labels: material, design
Material components for React
React components based on styles from Material Design Components Web project. Components are written in React.js. Doesn't use MDC foundation classes.
Installation
From CDN
<script src="https://unpkg.com/react-mdc-web/out/react-mdc-web.js"></script>
From package manager
npm i --save react-mdc-web
Theming
Default theme
- Include CSS with default theme into HTML page
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/material-components-web.min.css">
- Or import it into JS/JSX file
// MyApp/index.js import 'material-components-web/dist/material-components-web.min.css';
Custom theme
Override default theme colors with Sass or with CSS Custom Properties, just follow these guides:
Usage
import React, { Component } from 'react'
import {Card, CardHeader, CardTitle, CardText, CardActions, Button} from 'react-mdc-web/lib';
class MyComponent extends Component {
render() {
return (
<Card>
<CardHeader>
<CardTitle>
Title goes here
</CardTitle>
</CardHeader>
<CardText>
Lorem ipsum dolor sit amet, sint adipiscing ius eu
</CardText>
<CardActions>
<Button compact>Save</Button>
<Button compact accent>Remove</Button>
</CardActions>
</Card>
);
}
}
More samples could be found on the Documentation Site
Contribution & Local Development Guide
- create parent folder react-mdc-web-dev
- clone/fork react-mdc-web inside the react-mdc-web-dev folder
- create app for testing (for example: git clone https://github.com/kradio3/react-mdc-web-showcase)
- should now have folder with react-mdc-web-showcase and react-mdc-web folders inside of it.
- cd react-mdc-web-showcase
- npm rm --save-dev react-mdc-web
- npm i --save-dev ../react-mdc-web
- npm i --save-dev material-components-web
- npm start
- cd ../react-mdc-web
- npm run watch
License
MIT, see LICENSE for details
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].