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:

``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(, document.getElementById('example'));
`

API Documentation

$3

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';


* {Boolean} inline=false|true
`

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';

<br /> * {String} defaultValue<br /> * {Boolean} floatingLabel<br /> * {String} placeholder<br /> * {Boolean} invalid<br /> * {String} label<br /> * {String} name<br /> * {Boolean} required<br /> * {Number} rows<br /> * {String} value<br /> * {Function} onChange<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">Read more: https://www.muicss.com/docs/v1/react/forms</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">CSS Helpers</h2></p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">html<br /><!-- animation --><br /><div className="mui--no-transition"></div></p><p class="my-3"><!-- alignment --><br /><div className="mui--text-left"></div><br /><div className="mui--text-right"></div><br /><div className="mui--text-center"></div><br /><div className="mui--text-justify"></div><br /><div className="mui--text-nowrap"></div><br /><div className="mui--align-baseline"></div><br /><div className="mui--align-top"></div><br /><div className="mui--align-middle"></div><br /><div className="mui--align-bottom"></div></p><p class="my-3"><!-- depth helpers --><br /><div className="mui--z1"></div><br /><div className="mui--z2"></div><br /><div className="mui--z3"></div><br /><div className="mui--z4"></div><br /><div className="mui--z5"></div></p><p class="my-3"><!-- float helpers --><br /><div className="mui--clearfix"></div><br /><div className="mui--pull-right"></div><br /><div className="mui--pull-left"></div></p><p class="my-3"><!-- toggle helpers --><br /><div className="mui--hide"></div><br /><div className="mui--show"></div><br /><div className="mui--invisible"></div><br /><div className="mui--overflow-hidden"></div></p><p class="my-3"><!-- responsive utilities --><br /><div className="mui--visible-xs-block"></div><br /><div className="mui--visible-xs-inline"></div><br /><div className="mui--visible-xs-inline-block"></div><br /><div className="mui--visible-sm-block"></div><br /><div className="mui--visible-sm-inline"></div><br /><div className="mui--visible-sm-inline-block"></div><br /><div className="mui--visible-md-block"></div><br /><div className="mui--visible-md-inline"></div><br /><div className="mui--visible-md-inline-block"></div><br /><div className="mui--visible-lg-block"></div><br /><div className="mui--visible-lg-inline"></div><br /><div className="mui--visible-lg-inline-block"></div><br /><div className="mui--hidden-xs"></div><br /><div className="mui--hidden-sm"></div><br /><div className="mui--hidden-md"></div><br /><div className="mui--hidden-lg"></div></p><p class="my-3"><!-- typograpy --><br /><div className="mui--text-display4"></div><br /><div className="mui--text-display3"></div><br /><div className="mui--text-display2"></div><br /><div className="mui--text-display1"></div><br /><div className="mui--text-headline"></div><br /><div className="mui--text-title"></div><br /><div className="mui--text-subhead"></div><br /><div className="mui--text-body2">Body2</div><br /><div className="mui--text-body1">Body1</div><br /><div className="mui--text-caption">Caption</div><br /><div className="mui--text-menu">Menu</div><br /><div className="mui--text-button">Button</div></p><p class="my-3"><!-- text color --><br /><div className="mui--text-dark"></div><br /><div className="mui--text-dark-secondary"></div><br /><div className="mui--text-dark-hint"></div><br /><div className="mui--text-light"></div><br /><div className="mui--text-light-secondary"></div><br /><div className="mui--text-light-hint"></div><br /><div className="mui--text-accent"></div><br /><div className="mui--text-accent-secondary"></div><br /><div className="mui--text-accent-hint"></div><br /><div className="mui--text-danger"></div><br /><div className="mui--text-black"></div><br /><div className="mui--text-white"></div></p><p class="my-3"><!-- background color --><br /><div className="mui--bg-primary"></div><br /><div className="mui--bg-primary-dark"></div><br /><div className="mui--bg-primary-light"></div><br /><div className="mui--bg-accent"></div><br /><div className="mui--bg-accent-dark"></div><br /><div className="mui--bg-accent-light"></div><br /><div className="mui--bg-danger"></div></p><p class="my-3"><!-- user select --><br /><div className="mui--no-user-select"></div></p><p class="my-3"><!-- appbar dimension helpers --><br /><div className="mui--appbar-height"></div><br /><div className="mui--appbar-min-height"></div><br /><div className="mui--appbar-line-height"></div></p><p class="my-3"><!-- list helpers --><br /><ul className="mui-list--unstyled"></ul><br /><ul className="mui-list--inline"></ul><br /></code>``</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Directory Tree</h2></p><p class="my-3"><pre><br />muicss<br />├── angular.js<br />├── dist<br />│   ├── angular<br />│   │   ├── mui-angular.js<br />│   │   └── mui-angular.min.js<br />│   ├── css<br />│   │   ├── mui.css<br />│   │   ├── mui.min.css<br />│   │   ├── mui-noglobals.css<br />│   │   ├── mui-noglobals.min.css<br />│   │   ├── mui-noglobals-rtl.css<br />│   │   ├── mui-noglobals-rtl.min.css<br />│   │   ├── mui-rtl.css<br />│   │   └── mui-rtl.min.css<br />│   ├── email<br />│   │   ├── mui-email-inline.css<br />│   │   ├── mui-email-inline-rtl.css<br />│   │   ├── mui-email-styletag.css<br />│   │   └── mui-email-styletag-rtl.css<br />│   ├── extra<br />│   │   ├── mui-angular-combined.js<br />│   │   ├── mui-angular-combined.min.js<br />│   │   ├── mui-colors.css<br />│   │   ├── mui-colors.min.css<br />│   │   ├── mui-combined.js<br />│   │   ├── mui-combined.min.js<br />│   │   ├── mui-noglobals.css<br />│   │   ├── mui-noglobals.min.css<br />│   │   ├── mui-noglobals-rtl.css<br />│   │   ├── mui-noglobals-rtl.min.css<br />│   │   ├── mui-react-combined.js<br />│   │   └── mui-react-combined.min.js<br />│   ├── js<br />│   │   ├── mui.js<br />│   │   └── mui.min.js<br />│   ├── react<br />│   │   ├── mui-react.js<br />│   │   └── mui-react.min.js<br />│   └── webcomponents<br />│   ├── mui-webcomponents.js<br />│   └── mui-webcomponents.min.js<br />├── index.js<br />├── lib<br />│   ├── angular<br />│   │   ├── appbar.js<br />│   │   ├── babel-helpers.js<br />│   │   ├── button.js<br />│   │   ├── caret.js<br />│   │   ├── checkbox.js<br />│   │   ├── col.js<br />│   │   ├── container.js<br />│   │   ├── divider.js<br />│   │   ├── dropdown-item.js<br />│   │   ├── dropdown.js<br />│   │   ├── form.js<br />│   │   ├── input.js<br />│   │   ├── panel.js<br />│   │   ├── radio.js<br />│   │   ├── row.js<br />│   │   ├── select.js<br />│   │   └── tabs.js<br />│   ├── js<br />│   │   ├── config.js<br />│   │   ├── lib<br />│   │   │   ├── forms.js<br />│   │   │   ├── jqLite.js<br />│   │   │   └── util.js<br />│   │   └── overlay.js<br />│   ├── react<br />│   │   ├── appbar.js<br />│   │   ├── babel-helpers.js<br />│   │   ├── button.js<br />│   │   ├── caret.js<br />│   │   ├── checkbox.js<br />│   │   ├── col.js<br />│   │   ├── container.js<br />│   │   ├── divider.js<br />│   │   ├── dropdown-item.js<br />│   │   ├── dropdown.js<br />│   │   ├── form.js<br />│   │   ├── _helpers.js<br />│   │   ├── input.js<br />│   │   ├── option.js<br />│   │   ├── panel.js<br />│   │   ├── radio.js<br />│   │   ├── row.js<br />│   │   ├── select.js<br />│   │   ├── tab.js<br />│   │   ├── tabs.js<br />│   │   ├── textarea.js<br />│   │   └── text-field.js<br />│   └── sass<br />│   ├── mui<br />│   │   ├── _appbar.scss<br />│   │   ├── _buttons.scss<br />│   │   ├── _checkbox-and-radio.scss<br />│   │   ├── _colors.scss<br />│   │   ├── _containers.scss<br />│   │   ├── _divider.scss<br />│   │   ├── _dropdown.scss<br />│   │   ├── _form.scss<br />│   │   ├── _globals.scss<br />│   │   ├── _grid.scss<br />│   │   ├── _helpers.scss<br />│   │   ├── mixins<br />│   │   │   ├── _buttons.scss<br />│   │   │   ├── _forms.scss<br />│   │   │   ├── _grid-framework.scss<br />│   │   │   ├── _typography.scss<br />│   │   │   └── _util.scss<br />│   │   ├── _mixins.scss<br />│   │   ├── _overlay.scss<br />│   │   ├── _panel.scss<br />│   │   ├── _ripple.scss<br />│   │   ├── _select.scss<br />│   │   ├── _table.scss<br />│   │   ├── _tabs.scss<br />│   │   ├── _textfield.scss<br />│   │   ├── _typography.scss<br />│   │   └── _variables.scss<br />│   ├── mui-colors.scss<br />│   ├── mui-noglobals.scss<br />│   └── mui.scss<br />├── LICENSE.txt<br />├── package.json<br />├── react.js<br />└── README.md<br /></pre><br /></p></div><div class="flex justify-center absolute inset-x-0 bottom-0 bg-gradient-to-t from-background via-background to-transparent pb-4 pt-16"><button data-slot="button" class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down mr-1 h-4 w-4"><path d="m6 9 6 6 6-6"></path></svg>Show more</button></div></div></div><template id="P:3"></template><template id="P:4"></template></div></div></div><script>self.__next_f.push([1,"26:[\"$\",\"div\",null,{\"data-slot\":\"card-content\",\"className\":\"px-6\",\"children\":[\"$\",\"div\",null,{\"className\":\"grid gap-1\",\"children\":[[\"$\",\"$L5\",\"react\",{\"href\":\"/package/react\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"react\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^0.14.0 || ^15.0.0 || ^16.0.0\"}]]}]]}]}]\n"])</script><div hidden id="S:3"><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_aav5ubrb_-trigger-dependencies" hidden="" id="radix-_R_aav5ubrb_-content-dependencies" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-6"></div></div><script>$RS=function(a,b){a=document.getElementById(a);b=document.getElementById(b);for(a.parentNode.removeChild(a);a.firstChild;)b.parentNode.insertBefore(a.firstChild,b);b.parentNode.removeChild(b)};$RS("S:3","P:3")</script><div hidden id="S:4"><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_aav5ubrb_-trigger-versions" hidden="" id="radix-_R_aav5ubrb_-content-versions" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-6"></div></div><script>$RS("S:4","P:4")</script><script>$RC("B:1","S:1")</script></body></html>