muicss
Advanced tools
Changelog
0.10.3 - June 2, 2020
Readme
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 />
* {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
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} 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
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
* {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
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
* {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
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
* {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
<!-- 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
FAQs
Lightweight CSS framework based on Google's Material Design guidelines
The npm package muicss receives a total of 1,582 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
NIST's new AI Risk Management Framework aims to enhance the security and reliability of generative AI systems and address the unique challenges of malicious AI exploits.
Security News
This episode of the Risky Biz podcast discusses how the rise of small open source packages and the shift towards individual maintainers makes the ecosystem more vulnerable to supply chain attacks.
Product
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.