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:
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'));
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}.
import Appbar from 'muicss/lib/react/appbar';
<Appbar />
Read more: https://www.muicss.com/docs/v1/react/appbar
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
import Checkbox from 'muicss/lib/react/checkbox';
<Checkbox />
* {String} label
* {String} value
* {Boolean} checked
* {Boolean} defaultChecked
* {Boolean} disabled=false|true
Read more: https://www.muicss.com/docs/v1/react/forms
import Container from 'muicss/lib/react/container';
<Container />
* {Boolean} fluid=false|true
Read more: https://www.muicss.com/docs/v1/react/container
import Divider from 'muicss/lib/react/divider';
<Divider />
Read more: https://www.muicss.com/docs/v1/react/dividers
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
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
import Form from 'muicss/lib/react/form';
<Form />
* {Boolean} inline=false|true
Read more: https://www.muicss.com/docs/v1/react/forms
import Row from 'muicss/lib/react/row';
<Row />
Read more: https://www.muicss.com/docs/v1/react/grid
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
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
Read more: https://www.muicss.com/docs/v1/react/forms
import Panel from 'muicss/lib/react/panel';
<Panel />
Read more: https://www.muicss.com/docs/v1/react/panels
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
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
Read more: https://www.muicss.com/docs/v1/react/forms
import Option from 'muicss/lib/react/option';
<Option />
* {String} value
* {String} label
Read more: https://www.muicss.com/docs/v1/react/forms
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
import Tab from 'muicss/lib/react/tab';
<Tab />
* {String} label
* {String} value
* {Function} onActive
Read more: https://www.muicss.com/docs/v1/react/tabs
import Textarea from 'muicss/lib/react/textarea';
<Textarea />
* {String} defaultValue
* {String} hint
* {String} value
* {Integer} rows
* {Boolean} autoFocus
* {Function} onChange
Read more: https://www.muicss.com/docs/v1/react/forms
<!-- 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>
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
0.9.22 - August 20, 2017
FAQs
Lightweight CSS framework based on Google's Material Design guidelines
The npm package muicss receives a total of 1,146 weekly downloads. As such, muicss popularity was classified as popular.
We found that muicss demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
A malicious npm package disguised as a WhatsApp client is exploiting authentication flows with a remote kill switch to exfiltrate data and destroy files.
Security News
PyPI now supports digital attestations, enhancing security and trust by allowing package maintainers to verify the authenticity of Python packages.
Security News
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.