Material Design Lite for React JS

Material Design Lite for React JS lets you add a Material Design look and feel to your websites using the React framework.

You can find documentation and examples here

Usage

To install run

npm install mdl-reactjs

How to include in project

var MDL = require('mdl-reactjs');
var Button = MDL.Button;
var Card = MDL.Card;

Include the MDL css and js in your project

<!-- Material design lite stylesheet, icons and javascript -->
<link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<script defer src="https://code.getmdl.io/1.2.1/material.min.js"></script>

How to run the demo / documentation

npm install
npm run dev-server
// Open http://localhost:8080/

Project status

The project is still under development and will be adding features and functions

Components list / Todo

• [x] Badge [Docs] [getmdl.io]
• [x] Buttons [Docs] [getmdl.io]
• Loading [Docs] [getmdl.io]
  • [x] Progress
  • [x] Spinner
• [x] Sliders [Docs] [getmdl.io]
• [x] Icon [Docs]
• [x] Textfields [Docs] [getmdl.io]
• [x] Cards [Docs] [getmdl.io]
• Layout [Docs] [getmdl.io]
  • [x] Header + Rows
  • [x] Drawer
  • [x] Title
  • [x] Content
  • [x] Navigation + Links
  • [x] Grid
  • [x] Layout Tabs
  • [x] Tabs
  • [ ] Footer
• [x] Menus [Docs] [getmdl.io]