Material Design CSS Framework

MUI is a lightweight CSS framework that follows Google's Material Design guidelines.

Introduction

The MUI NPM package makes it easy to import MUI into a project and create a custom build that only includes the components you need.

The simplest way to use MUI is via the top level imports muicss and muicss/react:

import { Appbar, Button, Panel } from 'muicss/react';

You can also optimize your builds by importing modules one-by-one from the lower level API:

import Appbar from 'muicss/lib/react/appbar';
import Button from 'muicss/lib/react/button';
import Container from 'muicss/lib/react/container';

Here's an example of how to use MUI in a React app:

import React from 'react';
import ReactDOM from 'react-dom';
import { Appbar, Button, Panel } from 'muicss/react';
 
class Example extends React.Component {
  onClick() {
    console.log('clicked on button');
  }
  
  render() {
    return (
      <div>
        <Appbar />
        <Container>
          <Panel>
            <Button onClick={this.onClick}>My Button</Button>
          </Panel>
        </Container>
      </div>
    );
  }
}
 
ReactDOM.render(<Example />, document.getElementById('example'));

API Documentation

React Library

All of the MUI React components can be accessed as top-level attributes of the muicss/react package. In addition, they can be accessed individually at muicss/lib/react/{component}.

Appbar

import Appbar from 'muicss/lib/react/appbar';
 
<Appbar />

Read more: https://www.muicss.com/docs/v1/react/appbar

Button

import Button from 'muicss/lib/react/button';
 
<Button />
  * {String} color=default|primary|danger|accent
  * {String} size=default|small|large
  * {String} type=submit|button
  * {String} variant=default|flat|raised|fab
  * {Boolean} disabled=false|true

Read more: https://www.muicss.com/docs/v1/react/buttons

Checkbox

import Checkbox from 'muicss/lib/react/checkbox';
 
<Checkbox />
  * {Boolean} checked
  * {Boolean} defaultChecked
  * {String} defaultValue
  * {Boolean} disabled=false|true
  * {String} label
  * {String} name
  * {String} value

Read more: https://www.muicss.com/docs/v1/react/forms

Container

import Container from 'muicss/lib/react/container';
 
<Container />
  * {Boolean} fluid=false|true

Read more: https://www.muicss.com/docs/v1/react/container

Divider

import Divider from 'muicss/lib/react/divider';
 
<Divider />

Read more: https://www.muicss.com/docs/v1/react/dividers

Dropdown Component

Dropdown

import Dropdown from 'muicss/lib/react/dropdown';
 
<Dropdown />
  * {String or ReactElement} label
  * {String} alignMenu=left|right
  * {String} color=default|primary|danger|accent
  * {String} size=default|small|large
  * {String} variant=default|flat|raised|fab
  * {Boolean} disabled
  * {Function} onClick
  * {Function} onSelect
 

Read more: https://www.muicss.com/docs/v1/react/dropdowns

DropdownItem

import DropdownItem 'muicss/lib/react/dropdown-item';
 
<DropdownItem />
  * {String} link
  * {String} target
  * {String} value
  * {Function} onClick

Read more: https://www.muicss.com/docs/v1/react/dropdowns

Form

import Form from 'muicss/lib/react/form';
 
<Form />
  * {Boolean} inline=false|true

Read more: https://www.muicss.com/docs/v1/react/forms

Grid Elements

Row

import Row from 'muicss/lib/react/row';
 
<Row />

Read more: https://www.muicss.com/docs/v1/react/grid

Col

import Col from 'muicss/lib/react/col';
 
<Col />
  * {Integer} xs
  * {Integer} xs-offset
  * {Integer} sm
  * {Integer} sm-offset
  * {Integer} md
  * {Integer} md-offset
  * {Integer} lg
  * {Integer} lg-offset
  * {Integer} xl
  * {Integer} xl-offset

Read more: https://www.muicss.com/docs/v1/react/grid

Input

import Input from 'muicss/lib/react/input';
 
<Input />
  * {String} defaultValue
  * {Boolean} floatingLabel
  * {String} placeholder
  * {Boolean} invalid
  * {String} label
  * {String} name
  * {Boolean} required
  * {String} type=text|email|url|tel|password
  * {String} value
  * {Function} onChange

Read more: https://www.muicss.com/docs/v1/react/forms

Panel

import Panel from 'muicss/lib/react/panel';
 
<Panel />

Read more: https://www.muicss.com/docs/v1/react/panels

Radio

import Radio from 'muicss/lib/react/panel';
 
<Radio />
  * {String} name
  * {String} value
  * {Boolean} checked
  * {Boolean} defaultChecked
  * {Boolean} disabled=false|true

Read more: https://www.muicss.com/docs/v1/react/forms

Select Component

Select

import Select from 'muicss/lib/react/select';
 
<Select />
  * {String} defaultValue
  * {Boolean} disabled=false|true
  * {String} name
  * {String} label
  * {String} placeholder
  * {Boolean} readOnly=false|true
  * {Boolean} required=false|true
  * {Boolean} useDefault=false|true
  * {String} value
  * {Function} onChange

Read more: https://www.muicss.com/docs/v1/react/forms

Option

import Option from 'muicss/lib/react/option';
 
<Option />
  * {String} value
  * {String} label

Read more: https://www.muicss.com/docs/v1/react/forms

Tabs Component

Tabs

import Tabs from 'muicss/lib/react/tabs';
 
<Tabs />
  * {Integer} defaultSelectedIndex=0
  * {Integer} selectedIndex
  * {Boolean} justified=false|true
  * {Function} onChange

Read more: https://www.muicss.com/docs/v1/react/tabs

Tab

import Tab from 'muicss/lib/react/tab';
 
<Tab />
  * {String} label
  * {String} value
  * {Function} onActive

Read more: https://www.muicss.com/docs/v1/react/tabs

Textarea

import Textarea from 'muicss/lib/react/textarea';
 
<Textarea />
  * {String} defaultValue
  * {Boolean} floatingLabel
  * {String} placeholder
  * {Boolean} invalid
  * {String} label
  * {String} name
  * {Boolean} required
  * {Number} rows
  * {String} value
  * {Function} onChange

Read more: https://www.muicss.com/docs/v1/react/forms

CSS Helpers

<!-- animation -->
<div className="mui--no-transition"></div>
 
<!-- alignment -->
<div className="mui--text-left"></div>
<div className="mui--text-right"></div>
<div className="mui--text-center"></div>
<div className="mui--text-justify"></div>
<div className="mui--text-nowrap"></div>
<div className="mui--align-baseline"></div>
<div className="mui--align-top"></div>
<div className="mui--align-middle"></div>
<div className="mui--align-bottom"></div>
 
<!-- depth helpers -->
<div className="mui--z1"></div>
<div className="mui--z2"></div>
<div className="mui--z3"></div>
<div className="mui--z4"></div>
<div className="mui--z5"></div>
 
<!-- float helpers -->
<div className="mui--clearfix"></div>
<div className="mui--pull-right"></div>
<div className="mui--pull-left"></div>
 
<!-- toggle helpers -->
<div className="mui--hide"></div>
<div className="mui--show"></div>
<div className="mui--invisible"></div>
<div className="mui--overflow-hidden"></div>
 
<!-- responsive utilities -->
<div className="mui--visible-xs-block"></div>
<div className="mui--visible-xs-inline"></div>
<div className="mui--visible-xs-inline-block"></div>
<div className="mui--visible-sm-block"></div>
<div className="mui--visible-sm-inline"></div>
<div className="mui--visible-sm-inline-block"></div>
<div className="mui--visible-md-block"></div>
<div className="mui--visible-md-inline"></div>
<div className="mui--visible-md-inline-block"></div>
<div className="mui--visible-lg-block"></div>
<div className="mui--visible-lg-inline"></div>
<div className="mui--visible-lg-inline-block"></div>
<div className="mui--hidden-xs"></div>
<div className="mui--hidden-sm"></div>
<div className="mui--hidden-md"></div>
<div className="mui--hidden-lg"></div>
 
<!-- typograpy -->
<div className="mui--text-display4"></div>
<div className="mui--text-display3"></div>
<div className="mui--text-display2"></div>
<div className="mui--text-display1"></div>
<div className="mui--text-headline"></div>
<div className="mui--text-title"></div>
<div className="mui--text-subhead"></div>
<div className="mui--text-body2">Body2</div>
<div className="mui--text-body1">Body1</div>
<div className="mui--text-caption">Caption</div>
<div className="mui--text-menu">Menu</div>
<div className="mui--text-button">Button</div>
 
<!-- text color -->
<div className="mui--text-dark"></div>
<div className="mui--text-dark-secondary"></div>
<div className="mui--text-dark-hint"></div>
<div className="mui--text-light"></div>
<div className="mui--text-light-secondary"></div>
<div className="mui--text-light-hint"></div>
<div className="mui--text-accent"></div>
<div className="mui--text-accent-secondary"></div>
<div className="mui--text-accent-hint"></div>
<div className="mui--text-danger"></div>
<div className="mui--text-black"></div>
<div className="mui--text-white"></div>
 
<!-- background color -->
<div className="mui--bg-primary"></div>
<div className="mui--bg-primary-dark"></div>
<div className="mui--bg-primary-light"></div>
<div className="mui--bg-accent"></div>
<div className="mui--bg-accent-dark"></div>
<div className="mui--bg-accent-light"></div>
<div className="mui--bg-danger"></div>
 
<!-- user select -->
<div className="mui--no-user-select"></div>
 
<!-- appbar dimension helpers -->
<div className="mui--appbar-height"></div>
<div className="mui--appbar-min-height"></div>
<div className="mui--appbar-line-height"></div>
 
<!-- list helpers -->
<ul className="mui-list--unstyled"></ul>
<ul className="mui-list--inline"></ul>

Directory Tree

muicss
├── angular.js
├── dist
│   ├── angular
│   │   ├── mui-angular.js
│   │   └── mui-angular.min.js
│   ├── css
│   │   ├── mui.css
│   │   ├── mui.min.css
│   │   ├── mui-noglobals.css
│   │   ├── mui-noglobals.min.css
│   │   ├── mui-noglobals-rtl.css
│   │   ├── mui-noglobals-rtl.min.css
│   │   ├── mui-rtl.css
│   │   └── mui-rtl.min.css
│   ├── email
│   │   ├── mui-email-inline.css
│   │   ├── mui-email-inline-rtl.css
│   │   ├── mui-email-styletag.css
│   │   └── mui-email-styletag-rtl.css
│   ├── extra
│   │   ├── mui-angular-combined.js
│   │   ├── mui-angular-combined.min.js
│   │   ├── mui-colors.css
│   │   ├── mui-colors.min.css
│   │   ├── mui-combined.js
│   │   ├── mui-combined.min.js
│   │   ├── mui-noglobals.css
│   │   ├── mui-noglobals.min.css
│   │   ├── mui-noglobals-rtl.css
│   │   ├── mui-noglobals-rtl.min.css
│   │   ├── mui-react-combined.js
│   │   └── mui-react-combined.min.js
│   ├── js
│   │   ├── mui.js
│   │   └── mui.min.js
│   ├── react
│   │   ├── mui-react.js
│   │   └── mui-react.min.js
│   └── webcomponents
│       ├── mui-webcomponents.js
│       └── mui-webcomponents.min.js
├── index.js
├── lib
│   ├── angular
│   │   ├── appbar.js
│   │   ├── babel-helpers.js
│   │   ├── button.js
│   │   ├── caret.js
│   │   ├── checkbox.js
│   │   ├── col.js
│   │   ├── container.js
│   │   ├── divider.js
│   │   ├── dropdown-item.js
│   │   ├── dropdown.js
│   │   ├── form.js
│   │   ├── input.js
│   │   ├── panel.js
│   │   ├── radio.js
│   │   ├── row.js
│   │   ├── select.js
│   │   └── tabs.js
│   ├── js
│   │   ├── config.js
│   │   ├── lib
│   │   │   ├── forms.js
│   │   │   ├── jqLite.js
│   │   │   └── util.js
│   │   └── overlay.js
│   ├── react
│   │   ├── appbar.js
│   │   ├── babel-helpers.js
│   │   ├── button.js
│   │   ├── caret.js
│   │   ├── checkbox.js
│   │   ├── col.js
│   │   ├── container.js
│   │   ├── divider.js
│   │   ├── dropdown-item.js
│   │   ├── dropdown.js
│   │   ├── form.js
│   │   ├── _helpers.js
│   │   ├── input.js
│   │   ├── option.js
│   │   ├── panel.js
│   │   ├── radio.js
│   │   ├── row.js
│   │   ├── select.js
│   │   ├── tab.js
│   │   ├── tabs.js
│   │   ├── textarea.js
│   │   └── text-field.js
│   └── sass
│       ├── mui
│       │   ├── _appbar.scss
│       │   ├── _buttons.scss
│       │   ├── _checkbox-and-radio.scss
│       │   ├── _colors.scss
│       │   ├── _containers.scss
│       │   ├── _divider.scss
│       │   ├── _dropdown.scss
│       │   ├── _form.scss
│       │   ├── _globals.scss
│       │   ├── _grid.scss
│       │   ├── _helpers.scss
│       │   ├── mixins
│       │   │   ├── _buttons.scss
│       │   │   ├── _forms.scss
│       │   │   ├── _grid-framework.scss
│       │   │   ├── _typography.scss
│       │   │   └── _util.scss
│       │   ├── _mixins.scss
│       │   ├── _overlay.scss
│       │   ├── _panel.scss
│       │   ├── _ripple.scss
│       │   ├── _select.scss
│       │   ├── _table.scss
│       │   ├── _tabs.scss
│       │   ├── _textfield.scss
│       │   ├── _typography.scss
│       │   └── _variables.scss
│       ├── mui-colors.scss
│       ├── mui-noglobals.scss
│       └── mui.scss
├── LICENSE.txt
├── package.json
├── react.js
└── README.md