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
:
;
You can also optimize your builds by importing modules one-by-one from the lower level API:
;;;
Here's an example of how to use MUI in a React app:
;;; Component { console; } { return <div> <Appbar /> <Container> <Panel> <Button onClick=thisonClick>My Button</Button> </Panel> </Container> </div> ; } ReactDOM;
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 /> * String label * String value * Boolean checked * Boolean defaultChecked * Boolean disabled=false|true
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 * 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
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 * 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
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 initialSelectedIndex=0 * 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 * String hint * String value * Integer rows * Boolean autoFocus * Function onChange
Read more: https://www.muicss.com/docs/v1/react/forms
CSS Helpers
<!-- animation --> <!-- alignment --> <!-- depth helpers --> <!-- float helpers --> <!-- toggle helpers --> <!-- responsive utilities --> <!-- typograpy -->Body2Body1CaptionMenuButton <!-- text color --> <!-- background color --> <!-- user select --> <!-- appbar dimension helpers --> <!-- list helpers -->
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