Lightweight CSS framework based on Google's Material Design guidelines
npm install muicss
MUI is a lightweight CSS framework that follows Google's Material Design guidelines.




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:
``javascript`
import { Appbar, Button, Panel } from 'muicss/react';
You can also optimize your builds by importing modules one-by-one from the lower level API:
`javascript`
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:
`javascript
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 (
ReactDOM.render(
`
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
`jsx
import Appbar from 'muicss/lib/react/appbar';
`
Read more: https://www.muicss.com/docs/v1/react/appbar
#### Button
`jsx
import Button from 'muicss/lib/react/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
`jsx
import Checkbox from 'muicss/lib/react/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
`jsx
import Container from 'muicss/lib/react/container';
* {Boolean} fluid=false|true
`
Read more: https://www.muicss.com/docs/v1/react/container
#### Divider
`jsx
import Divider from 'muicss/lib/react/divider';
`
Read more: https://www.muicss.com/docs/v1/react/dividers
#### Dropdown Component
##### Dropdown
`jsx
import Dropdown from 'muicss/lib/react/dropdown';
* {String or ReactElement} label
* {String} alignment=default|right|bottom
* {String} color=default|primary|danger|accent
* {String} placement=default|up|right|left
* {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
`jsx
import DropdownItem 'muicss/lib/react/dropdown-item';
* {String} link
* {String} target
* {String} value
* {Function} onClick
`
Read more: https://www.muicss.com/docs/v1/react/dropdowns
#### Form
`jsx
import Form from 'muicss/lib/react/form';
Read more: https://www.muicss.com/docs/v1/react/forms
#### Grid Elements
##### Row
`jsx
import Row from 'muicss/lib/react/row';|
`Read more: https://www.muicss.com/docs/v1/react/grid
##### Col
`jsx
import Col from 'muicss/lib/react/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
`jsx
import Input from 'muicss/lib/react/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
`jsx
import Panel from 'muicss/lib/react/panel';
`Read more: https://www.muicss.com/docs/v1/react/panels
#### Radio
`jsx
import Radio from 'muicss/lib/react/panel';
* {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
`jsx
import Select from 'muicss/lib/react/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
`jsx
import Option from 'muicss/lib/react/option';
* {String} value
* {String} label
`Read more: https://www.muicss.com/docs/v1/react/forms
#### Tabs Component
##### Tabs
`jsx
import Tabs from 'muicss/lib/react/tabs';
* {Integer} defaultSelectedIndex=0
* {Integer} selectedIndex
* {Boolean} justified=false|true
* {Function} onChange
`Read more: https://www.muicss.com/docs/v1/react/tabs
##### Tab
`jsx
import Tab from 'muicss/lib/react/tab';
* {String} label
* {String} value
* {Function} onActive
`Read more: https://www.muicss.com/docs/v1/react/tabs
#### Textarea
`jsx
import Textarea from 'muicss/lib/react/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
`html
Body2
Body1
Caption
Menu
Button
``
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
│ │ ├── 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