Search…
Supported MUI Components & How-to Make Edits
Just like customizing the design kit’s look and feel, there are specific things you can and cannot edit in the MUI kit. Below is the full list & instructions for each component we support.

Button

How To Use:

Copy & Paste any of the Default buttons into your custom components. When it comes into Quest they will be working, interactive Material UI components.

Can Change:

  • Auto layout padding (Adjust button size)
  • You can remove, edit or add drop-shadow to each button
  • You can change icons by swapping icon instance
  • You can adjust corner radius
  • Even though there are different size buttons, you can also adjust the size to be larger or smaller with fixed width and height when you use the instance in your custom components

Can NOT Change:

  • Don’t change the button components’ constraints (Hug contents). You can ONLY change this on the instance you copy & pasted.
  • Don’t change individual button colors. Change the design system colors to make those changes.
  • Don’t change individual button fonts. Change the design system’s typography instead.
  • Don’t change the button's text label here. Change it on the pasted instance in your custom component.
  • Don’t add additional icons or elements aside from the text and icons that are there now. Material UI will not honor them. You can add more icons in the icons and swap the instance only (as shown above) but don’t directly add images or vector icons into the button.

Icon

How To Use:

Copy & Paste the size you need into your custom components. Then in the custom component, you can choose the actual icon variant & color. To change the icon, swap the instance for another one. You can add as many icons as you want to the MUI design system / kit but just be sure to sync the library whenever you add a new one to be able to swap for it in your custom component design later.

Can Change:

  • Nothing. Simply copy & paste these.

Can NOT Change:

  • Don’t touch constraints
  • Don’t touch colors
  • Don’t touch size 
(You can resize once in your custom component)

Link

How to Use:

Copy & Paste these into your custom components anywhere you wish to use a URL link on text.

Can Change:

  • Typography via Text Styles
  • Color via the Color Styles

Can NOT Change:

  • Anything else

Autocomplete

How to Use:

Copy & Paste the version of the autocomplete you prefer into your custom components.

Can Change:

  • Typography via Text Styles
  • Color via the Color Styles

Can NOT Change:

  • Don’t change the colors to custom colors in different cases. Can only change the colors via from the Color Styles.
  • Don’t change the fonts to be custom. Must use the same Text Styles across all variants.

Text Field

How to Use:

Copy & Paste the “Enabled” version of the text field you prefer into your custom components.

Can Change:

  • Typography via Text Styles
  • Color via the Color Styles

Can NOT Change:

  • Don’t change the colors to custom colors in different cases. Can only change the colors via from the Color Styles.
  • Don’t change the fonts to be custom. Must use the same Text Styles across all variants.

Alert

How to Use:

Copy & Paste these into your custom components anywhere you wish to use an Alert. Currently we only support the “Alert/Filled” version.

Can Change:

  • Border radius
  • Color via the Color Styles
  • Drop shadow
  • Customize & change icons to any other by swapping their instance

Can NOT Change:

  • Auto-layout padding. Left & Right padding comes from Material UI.
  • Don’t remove the icon at the beginning of the alert, it is required by MUI to have one.

Avatar

How to Use:

Copy & Paste into your custom components where you want to have an avatar. Currently, Quest does not support Avatar Group.

Can Change:

  • Colors
  • Images
  • Font Font size
  • Icon via variant
  • Icon color via variant
  • Corner radius
  • Size

Can NOT Change:

  • Can’t use shapes other than circle, square or rounded square
  • Can’t add or change layer order

Checkbox

How to Use:

Copy & Paste into your custom components where you want to have a checkbox. Copy and paste the default non-hovered states only.

Can Change:

  • Typography via Text Styles
  • Color via the Color Styles
  • Icon via variant
  • Hover corner radius
  • Sizes

Can NOT Change:

  • Can’t copy and paste the hover states, only use default non-hover states
  • Can’t add or change layer order

Switch

How to Use:

Copy & Paste into your custom components where you want to have a switch. Copy and paste the default non-hovered states only.

Can Change:

  • Typography via Text Styles
  • Color via the Color Styles
  • Hover corner radius
  • Sizes

Can NOT Change:

  • Can’t copy and paste the hover states, only use default non-hover states
  • Can’t add or change layer order

Dialog

How to Use:

Unlike most other MUI components, you do not copy & paste Dialog into your custom designs. Instead, this is a feature you can choose inside of Quest. You can choose to include different things inside a dialogue which will be a full screen pop-over that darkens the area behind it. Inside the design system, you are simply styling how that will look when used.

Can Change:

  • Auto layout padding
  • Border radius
  • Color
  • Drop shadow

Can NOT Change:

  • Anything else

Tooltip

How to Use:

Similar to Dialog, you do not copy and paste this component into your custom designs but rather choose it as a feature inside of Quest. You can choose which component in Quest will have this applied, where the anchor point is, and what goes inside of it. Inside the design system, you are simply styling how that will look when used.

Can Change:

  • Typography via Text Styles
  • Color via the Color Styles
  • Corner radius
  • Size
  • Adjust or remove drop-shadow

Can NOT Change:

  • Don’t use a gradient, only solid color

Data Grid

How to Use:

Copy & Paste into a new custom component with nothing else in it. Then copy and paste that custom component into your custom designs where you want to use it as a placeholder.
For full instructions, please refer to this page in the docs: Using the MUI Data Grid & Table

Can Change:

  • Color via the Color Styles
  • Typography via Text Styles
  • Size
  • Add rows or columns (but final layout is controlled by the code)

Can NOT Change:

  • Can’t add non-standard shapes, images or design elements abstract to a traditional table like design structure.

Table

How to Use:

Copy & Paste into a new custom component with nothing else in it. Then copy and paste that custom component into your custom designs where you want to use it as a placeholder.
For full instructions, please refer to this page in the docs: Using the MUI Data Grid & Table

Can Change:

  • Color via the Color Styles
  • Typography via Text Styles
  • Size
  • Add rows or columns (but final layout is controlled by the code)

Can NOT Change:

  • Can’t add non-standard shapes, images or design elements abstract to a traditional table like design structure.

Don't see a component you need?

We're constantly adding new components to the list. If can't find one you need, we want to know. Reach out to us on our Discord channel or contact us at [email protected] and tell us so we can prioritize.