React Reference

Elements and Components

Appbar

import Appbar from 'muicss/lib/react/appbar';

<Appbar />

Button

import Button from 'muicss/lib/react/button';

<Button />
  * {String} color=default|primary|danger|accent
  * {String} variant=default|flat|raised|fab
  * {String} size=default|small|large
  * {Boolean} disabled=false|true

Checkbox

import Checkbox from 'muicss/lib/react/checkbox';

<Checkbox />
  * {String} label
  * {String} name
  * {String} value
  * {Boolean} checked=false|true
  * {Boolean} disabled=false|true

Container

import Container from 'muicss/lib/react/container';

<Container />
  * {Boolean} fluid=false|true

Divider

import Divider from 'muicss/lib/react/divider';

<Divider />

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

DropdownItem

import DropdownItem 'muicss/lib/react/dropdown-item';

<DropdownItem />
  * {String} link
  * {String} target
  * {String} value
  * {Function} onClick

Form

import Form from 'muicss/lib/react/form';

<Form />
  * {Boolean} inline=false|true

Grid Elements

Row

import Row from 'muicss/lib/react/row';

<Row />

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

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

Panel

import Panel from 'muicss/lib/react/panel';

<Panel />

Radio

import Radio from 'muicss/lib/react/radio';

<Radio />
  * {String} name
  * {String} value
  * {Boolean} checked=false|true
  * {Boolean} disabled=false|true

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} required=false|true
  * {Boolean} useDefault=false|true
  * {Function} onChange

SelectItem

import SelectItem from 'muicss/lib/react/select-item';

<SelectItem />
  * {String} label
  * {String} value

Tabs Component

Tabs

import Tabs from 'muicss/lib/react/tabs';

<Tabs />
  * {Integer} initialSelectedIndex=0
  * {Boolean} justified=false|true
  * {Function} onChange

Tab

import Tab from 'muicss/lib/react/tab';

<Tab />
  * {String} label
  * {String} value
  * {Function} onActive

Textarea

import Textarea from 'muicss/lib/react/textarea';

<Textarea />
  * {String} defaultValue
  * {String} hint
  * {String} value
  * {Integer} rows
  * {Boolean} autoFocus
  * {Function} onChange

CSS Helpers

<!-- 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>

<!-- 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>
« Previous Next »