muicss

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 />

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

Checkbox

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

Container

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

Divider

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

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

DropdownItem

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

Form

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

Grid Elements

Row

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

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

Input

import Input from 'muicss/lib/react/input';
 
<Input />
  * {String} defaultValue
  * {String} hint
  * {String} value
  * {String} type=text|email|url|tel|password
  * {Boolean} autoFocus
  * {Function} onChange

Panel

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

Radio

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

Select Component

Select

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

Option

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

Tabs Component

Tabs

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

Tab

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

Textarea

import Textarea from 'muicss/lib/react/textarea';
 
<Textarea />
  * {String} defaultValue
  * {String} hint
  * {String} value
  * {Integer} rows
  * {Boolean} autoFocus
  * {Function} onChange

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-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-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
│       │   ├── _grid.scss
│       │   ├── _helpers.scss
│       │   ├── mixins
│       │   │   ├── _buttons.scss
│       │   │   ├── _forms.scss
│       │   │   ├── _grid-framework.scss
│       │   │   ├── _typography.scss
│       │   │   └── _util.scss
│       │   ├── _mixins.scss
│       │   ├── _overlay.scss
│       │   ├── _panel.scss
│       │   ├── _reboot.scss
│       │   ├── _ripple.scss
│       │   ├── _select.scss
│       │   ├── _table.scss
│       │   ├── _tabs.scss
│       │   ├── _textfield.scss
│       │   ├── _typography.scss
│       │   └── _variables.scss
│       ├── mui-colors.scss
│       ├── mui.scss
│       └── normalize-3.0.3.scss
├── LICENSE.txt
├── package.json
├── react.js
└── README.md

Manage permissions for the whole team

Manage developer teams with varying permissions and multiple projects. Learn more about Private Packages and Organizations…

how? learn more

muicss published 2017-04-26T20:08:10.994Z
0.9.16 is the latest of 94 releases
github.com/muicss/mui
muicss.com
MIT ®

Collaborators list

Stats

85 downloads in the last day
1353 downloads in the last week
4927 downloads in the last month
Have an issue? File it. on GitHub
on GitHub

Try it out

Test muicss in your browser.

Keywords

MUI, CSS, CSS Framework, Material Design, React

Dependencies

None

Dependents (2)

pwc-retail-demo-sap, and more