All Projects → kradio3 → React Mdc Web

kradio3 / React Mdc Web

Licence: mit
Material Design Components for React

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
Awesomebar
Just beautiful
Stars: ✭ 870 (+397.14%)
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
Vue Mdc
Material web components for Vue.js
Stars: ✭ 1,217 (+595.43%)
Mutual labels:  material, design
Steppers
Steppers view library for Android, based on Google Material design guidelines
Stars: ✭ 786 (+349.14%)
Mutual labels:  material, design
Depth
Add some Depth to your fragments
Stars: ✭ 789 (+350.86%)
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

Maintenance Status NPM version Travis build

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

  1. create parent folder react-mdc-web-dev
  2. clone/fork react-mdc-web inside the react-mdc-web-dev folder
  3. create app for testing (for example: git clone https://github.com/kradio3/react-mdc-web-showcase)
  4. should now have folder with react-mdc-web-showcase and react-mdc-web folders inside of it.
  5. cd react-mdc-web-showcase
  6. npm rm --save-dev react-mdc-web
  7. npm i --save-dev ../react-mdc-web
  8. npm i --save-dev material-components-web
  9. npm start
  10. cd ../react-mdc-web
  11. 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].