Skip to content

Reactor Figma Plugin - MUI Components

MUI Components Recommendations

MUI components should be used as usual. Components props should be used to customize components. Styles changes of components allowed, but instances styles disallowed. You can’t modify properties names, add/delete new properties. Every MUI element will be converted to MUI React elements accordingly. Below there is a list of the MUI components and their allowed and disallowed properties. You should use only supported properties to customize your components. MUI component property marked by ✅ is supported. Property marked by 🚫 is not supported by Reactor, the alternative properties or components should be used instead.

NOTE: Please avoid changing the structure of the MUI components, as well as changing the property names, adding new or removing existing properties.

Alert

Available Properties:

  • Severity (choice of component type, the same property is responsible for the color) ✅
  • Variant (responsible for color opacity) ✅
  • Title? (responsible for adding the title) ✅
  • ↳ Title (title text) ✅
  • Description? (responsible for adding the description) ✅
  • ↳ Description (description text) ✅
  • Action? 🚫
  • ↳ Instance 🚫
  • On Close? 🚫

Avatar

Available Properties:

  • Size (you can change the size of the avatar) ✅
  • Variant (if you need square or rounded avatars) ✅
  • Content (responsible for what you want to use in this component: Icon, image or text) ✅
  • Badge 🚫
  • Initials (content text) ✅

AppBar

Available Properties:

  • Color (component color) ✅

You can use the properties of the component's children. But you can't change the children of a component. Use the properties of these components: Toolbar, IconButton

Autocomplete

Available Properties:

  • Multiple Value (component color) 🚫

To change the properties of a component, use the properties of the child element

Floating Action Button

Available Properties:

  • Variant (component variant) ✅
  • Size (component size) ✅
  • Color (component color) ✅
  • State (component state) ✅
  • Icon? (adding icon) ✅
  • ↳ Icon (your icon) ✅
  • Label (component text) ✅

Badge

Available Properties:

  • Variant (changes a badge into a small dot) ✅
  • Color (Use color prop to apply theme palette to component) ✅
  • Content (content text) ✅

Button

Available Properties:

  • Size (component size) ✅
  • Color (component color) ✅
  • State (component state) ✅
  • Variant (allows you to select a component variant) ✅
  • Start Icon ✅
  • End Icon ✅
  • Label (text button) ✅

Card

Card Elements:

  • CardHeader? adding child component CardHeader ✅
  • CardContent? adding child component CardComponent ✅
  • CardActions? adding child component CardActions ✅
  • CardMedia? adding child component CardMedia ✅
  • CardContent: Insert a custom component and give it a name “_Custom / Blog Post”

Use only ready-made component structure

Chip

Available Properties:

  • Size (component size) ✅
  • Color (component color) ✅
  • State (component state) ✅
  • Variant (allows you to select a component variant) ✅
  • Delete? 🚫
  • Thumbnail? 🚫
  • Label (component text) ✅

Checkbox

Available Properties:

  • Checked (used to turn an on or off components) ✅
  • Indeterminate 🚫
  • Size (component size) ✅
  • Color (component color) ✅
  • State (component state) ✅
  • Label (responsible for adding the text) ✅
  • ↳ Value (component text) ✅

Drawer

Available Properties:

  • Direction === row ✅
  • Spacing === 0 ✅
  • Slots (here you have to choose how many child elements you want to add) ✅
  • InstanceSlot === or ✅

Form Elements

Contain , and which are used in TextField, but you can use them to create your own input.

Switch

Available Properties:

  • Checked (used to turn an on or off components) ✅
  • Size (component size) ✅
  • Color (component color) ✅
  • State (component state) ✅
  • Label (responsible for adding the text) ✅
  • ↳ Label (component text) ✅

Radio Button

Available Properties:

  • Checked (used to turn an on or off components) ✅
  • Size (component size) ✅
  • Color (component color) ✅
  • State (component state) ✅
  • Label (responsible for adding the text) ✅
  • ↳ Label (component text) ✅

Available Properties:

  • Variant (select the style of the typography component) ✅
  • Gutter Bottom 🚫
  • Content (component text) ✅

Tooltip

Available Properties:

  • Direction (component placement) ✅

Button Group

Available Properties:

  • Orientation (the button group can be displayed vertically) ✅
  • Type (can also be used to create a split button) 🚫
  • Color (component color) ✅
  • Variant (standard button variants) ✅

If you want to change the size of the component then just change the size of the child components of the ButtonGroup. The child component is the Button

Available Properties:

  • Color (text color) ✅
  • Underline (can be used to set the underline behavior) ✅
  • State (state component) ✅
  • Link (component text) ✅

List

Available Properties:

  • Disable Padding (Disable top and bottom padding) ✅
  • Dense (Make children items much smaller) ✅

Pagination

Available Properties:

  • Size (component size) ✅
  • Color (component color) ✅
  • Variant (add component outline) ✅
  • Shape (adds rounding) ✅
  • Disabled (disabled component) ✅

Toggle Button

Available Properties:

  • Size (component size) ✅
  • State (component state) ✅
  • Icon (add component Icon) ✅

Rating

Available Properties: * Size (component size) ✅ * Disabled (turn off component) ✅

Text Field

Available Properties:

  • Variant (component variant) ✅
  • Size (component size) ✅
  • State (component state) ✅
  • Has Value (moves label to the top of the component) ✅
  • Label (text label) ✅
  • Adorn. Start? 🚫
  • Adorn. End? 🚫
  • Value? (adds main text) ✅
  • ↳ Value (text TextField) ✅
  • Placeholder (adds placeholder) ✅
  • ↳ Placeholder (text placeholder) ✅
  • Helper? 🚫

If you want to add custom styles(border) for TextField. Go inside the component, select the input and set border(stroke)

Paper

In the current Reactor version this component is not supported.

Available Properties:

  • Variant 🚫
  • Elevation 🚫
  • Square 🚫
  • Instance Slot 🚫
  • ↳ Instance 🚫

Progress

Available Properties:

  • Type (component type) ✅ — for LinearProgress
  • Size (component size) ✅— for CircularProgress
  • Color (component color) ✅
  • Label (adding component text)✅

Slider

Available Properties:

  • Size ✅
  • Variant ✅
  • Color ✅
  • State ✅
  • Orientation ✅
  • Values ✅
  • Label ✅

Skeleton

Available Properties:

  • Shape (component shape) ✅

Snackbar

There are two use cases:

  • Use with a child element SnackbarContent

Available Properties:

  • Action (added Button component with button props) ✅
  • Message (Text component) ✅

Use with a child element Alert

Available Properties:

  • All available props from component Alert ✅

Select

Available Properties:

  • Variant (component variant) ✅
  • Size (component size) ✅
  • State (component state) ✅
  • Active ✅
  • Has Value (moves label to the top of the component) ✅
  • Label (text label) ✅
  • Adorn. Start? ✅
  • Value? (adds main text) ✅
  • ↳ Value (text select) ✅
  • Placeholder (adds placeholder) ✅(does not work if you use Autocomplete)
  • ↳ Placeholder (text placeholder) ✅(does not work if you use Autocomplete)
  • Helper? ✅

Speed Dial

Available Properties:

  • Direction (component direction) ✅
  • Instance (component child) ✅

Stack

Available Properties:

  • Direction (direction of childrens. Can be Row or Column) ✅
  • Spacing (spacing between children slots.) ✅
  • Slots (Children slots count) ✅

Stepper

  • Small Screen (component size) ✅
  • Optional (description step) 🚫
  • Text (position text) ✅
  • Alignment (component position) ✅

Table

Available Properties:

  • Checkbox (adding checkbox) ✅
  • Rows (number of rows in table) ✅

TableCellRow properties:

  • Checkbox (adding checkbox) ✅
  • Columns (number of columns) ✅

TableCellRow properties:

  • Checkbox (adding checkbox) ✅

Tabs

Available Properties:

  • Orientation (component position) ✅
  • Small Screen (component size) ✅
  • Variant (component variant) ✅
  • Scroll Visible 🚫

Timeline

Available Properties:

  • Opposing 🚫
  • Variant (component variant) ✅
  • Position (component position) ✅

Child Properties TimelineItem:

  • Opposing 🚫
  • Variant (component variant) ✅
  • Position (component position) ✅