Supported Quest UI Kit Components & How-to Make Edits in Figma
In this section, we'll cover the list of Supported Components from Quest UI Kit. The below applies for the MUI Design kit as well.
Last updated
Was this helpful?
In this section, we'll cover the list of Supported Components from Quest UI Kit. The below applies for the MUI Design kit as well.
Last updated
Was this helpful?
Just like customizing the design kit’s look and feel, there are specific things you can and cannot edit in the Quest UI kit. Below is the full list & instructions for each component we support. This information is easily accessible within the Quest UI Kit as well. For example, if you select Accordion in the Quest UI Kit, you'll see Instructions that go with the Component on what you Can and Can't change:
If you are using the MUI Design Kit, we currently support the MUI Kit for Figma versions 5.9 and 5.11 You can get the latest official MUI Kit here: https://mui.com/store/items/figma-react/
Here is the full list of supported Quest UI Kit Components below along with their MUI counterpart components. You can refer to the MUI API docs as they apply to both Quest Kit and MUI Kit components.
Breadcrumbs (coming soon)
Date Picker (coming soon)
Menu (coming soon)
Multiline (coming soon)
Slider (coming soon)
Tabs (coming soon)
Toggle Buttons (coming soon)
Copy & Paste any of the Accordion instances into your custom components. Stack them to create accordion groups which will move each other around depending on which is open. When it comes into Quest they will be working, interactive React UI components.
Using the Accordion is about updating and swapping the "replace component" component with one of your own. Do this by making a custom component to show in your own design file (don't make it in the Kit file). Then once the instance is in your own custom component, click on the component drop-down to choose your custom component from the "Local components".
You can swap the "replace component" in the instance only not on the main component.
You can adjust horizontal size of the instance only and can be fixed or fill parent.
You can change the "Heading" of the instance only.
You can change colors via the Color Styles.
You cannot change auto layout padding or space between.
You cannot change order of layers or remove Heading.
You cannot adjust corner radius.
You cannot remove or add drop-shadow if it doesn't or does already have it.
Don’t change the accordion components’ constraints (Hug contents). You can ONLY change this on the instance you copy & pasted where it will act as an override.
Don’t change individual accordion colors. Change the design system colors to make those changes.
Copy & Paste any of the Alert instances into your custom components. When it comes into Quest they will be working, interactive React UI components.
You can adjust horizontal size of the instance only and can be fixed or fill parent.
You can change the "Heading" of the instance only.
You can customize & change icons to any other by swapping their instance
You can change colors via the Color Styles.
You can change corner radius.
You cannot change auto layout padding or space between.
You cannot change order of layers or remove Title or Description.
You cannot remove or add drop-shadow if it doesn't or does already have it.
You cannot change the alert components’ constraints (Hug contents). You can ONLY change this on the instance you copy & pasted where it will act as an override.
You cannot change individual alert colors. Change the design system colors to make those changes.
Copy & Paste any of the App Bar instances into your custom components. When it comes into Quest it will be a working, interactive React UI component.
You can adjust horizontal size of the instance only and can be fixed or fill parent.
You can change the "Title" of the instance only.
You can customize & change button & icons to any other by swapping their instance.
You can change colors via the Color Styles.
You cannot change auto layout padding or space between.
You cannot change order of layers or remove anything.
You cannot remove or add drop-shadow.
You cannot add corner radius.
You cannot change the components’ constraints on the main component.
You cannot change individual colors. Change the design system colors to make those changes.
Copy & Paste the version of the autocomplete you prefer into your custom components.
You can change typography via Text Styles.
You can change colors via the Color Styles.
You cannot change the colors to custom colors in different cases. Can only change the colors via from the Color Styles.
You cannot change the fonts to be custom. Must use the same Text Styles across all variants.
You cannot use the drop-down menu from the Figma kit (specifically in you are using the MUI Kit) at all in your designs. This will be added in code and can be modified via the bindings to control what is inside the drop-down.
Copy & Paste any of the Avatar instances into your custom components. When they come into Quest they will be working, interactive React UI components.
You can change the "Initials" of the instance only. You can also change this with bindings in Quest.
You can change the Profile Pic of the instance only. You can also change this with bindings in Quest.
You can customize & change icons to any other by swapping their instance.
You can change colors via the Color Styles.
You can turn the badge on or off with the props on the instance.
You cannot change auto layout padding or space between.
You cannot change size of Avatars and must choose one of the variant sizes and stick with it.
You cannot change order of layers or remove anything.
You cannot remove or add drop-shadow.
You cannot add or change corner radius.
You cannot change the components’ constraints on the main component.
You cannot change individual colors. Change the design system colors to make those changes.
You cannot use shapes other than circle, square or rounded square.
Quest also has a "Badge" feature that you can apply to any single layer or group of layers. This allows you to wrap a badge around anything so you aren't required to use this Badge component only from Figma.
Copy & Paste any of the Badge instances into your custom components. When it comes into Quest it will be a working, interactive React UI component.
You can change the position of the badge on the instance by modifying the absolute position.
You can customize & change the icons to any other by swapping their instance.
You can change colors via the Color Styles.
You can change the color of the icon on the instance.
You can only modify the badge text via the bindings in Quest.
You cannot change auto layout padding or space between.
You cannot change order of layers or remove anything.
You cannot remove or add drop-shadow.
You cannot add corner radius.
You cannot change the components’ constraints on the main component.
You cannot change individual colors. Change the design system colors to make those changes.
Copy & Paste any of the Bottom Navigation instances into your custom components. When it comes into Quest it will be a working, interactive React UI component. To modify the actual navigation items, modify their instances in the kit and not on the main component that contains the list.
You can customize & change the icons to any other by swapping their instance.
You can change colors via the Color Styles.
You cannot change auto layout padding or space between.
You cannot change order of layers or remove anything.
You cannot remove or add drop-shadow.
You cannot add corner radius.
You cannot change the components’ constraints on the main component.
You cannot change individual colors. Change the design system colors to make those changes.
Copy & Paste any of the Default buttons into your custom components. When it comes into Quest they will be working, interactive React UI components.
You 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.
You can change colors via the Color Styles.
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.
You cannot change the button components’ constraints (Hug contents). You can ONLY change this on the instance you copy & pasted where it will act as an override. So you can set the instance to fill parent but not the main component.
You cannot change individual button colors. Change the design system colors to make those changes.
You cannot change individual button fonts. Change the design system’s typography instead.
You cannot change the button's text label here. Change it on the pasted instance in your custom component.
You cannot add additional icons or elements aside from the text and icons that are there now. Quest will not honor such changes to the Design Kit. 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.
NOTE: If you are using MUI Kit, Button with Loading state and Loading bindings is not currently supported in the Quest Editor or Preview. You will not see it working inside of Quest as it is part of MUI Labs. You can use it and see it in your production App. Read more here.
Copy & Paste any of the Button Group instances into your custom components. When it comes into Quest it will be a working, interactive React UI component.
You can change the auto layout constraints on the instance only.
You can modify how the buttons look by modifying the Button component.
You cannot change auto layout padding or space between.
You cannot change order of layers or remove anything.
You cannot remove or add drop-shadow.
You cannot add corner radius.
You cannot change the components’ constraints on the main component.
You cannot change individual colors. Change the design system colors to make those changes.
Copy & Paste into your custom components where you want to have a checkbox. Copy and paste the default checked or un-checked, non-hovered states only.
Changing the styling for the hover states and colors of the checkboxes should be done so on the "Checked=True" row and not the first row in the design. This serve as the main style and will apply the hover colors to the default state.
You can change typography via Text Styles
You can change colors via the Color Styles.
You can change icon via variant.
You can change hover corner radius.
You can change sizes.
You cannot copy and paste the hover states, only use default non-hover states.
You cannot add or change layer order.
Copy & Paste any of the Chip instances into your custom components. When it comes into Quest they will be working, interactive React UI components.
You can change the text inside of the Chip on the instance only.
You can customize & change icons to any other by swapping their instance.
You can change colors via the Color Styles.
You cannot change auto layout padding or space between.
You cannot change corner radius.
You cannot change order of layers.
You cannot remove or add drop-shadow.
You cannot change individual chip colors. Change the design system colors to make those changes.
Copy & Paste any of the Drawer instances into your custom components. When it comes into Quest they will be working, interactive React UI components.
You can modify the items in the Drawer by modifying the List Item component.
You can add or delete List Items to the list.
You can change colors via the Color Styles.
You cannot change auto layout padding or space between.
You cannot change corner radius.
You cannot change order of layers.
You cannot remove or add drop-shadow.
Copy & Paste any of the FAB instances in the Enabled state into your custom components. When it comes into Quest they will be working, interactive React UI components.
You can change the text inside of the FAB on the instance only.
You can customize & change icons to any other by swapping their instance.
You can change colors via the Color Styles.
You cannot change auto layout padding or space between.
You cannot change corner radius.
You cannot change order of layers.
You cannot remove or add drop-shadow.
You cannot change individual FAB colors. Change the design system colors to make those changes.
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. The icons coming from the Quest UI Kit or MUI kits will contain the standard icon library that we import into your component if you're using one in your designs.
Nothing on main component. Simply copy & paste these.
Don’t touch constraints
Don’t touch colors
Don’t touch size (You can resize once in your custom component)
Copy & Paste any of the Icon Button instances in the Enabled state into your custom components. When it comes into Quest they will be working, interactive React UI components.
You can swap the icon of the Icon Button on the instance.
You can also customize & change icons to any other by swapping their instance.
You can change colors via the Color Styles.
You cannot change auto layout padding or space between.
You cannot change corner radius.
You cannot change order of layers.
You cannot remove or add drop-shadow.
You cannot change individual Icon Button colors. Change the design system colors to make those changes.
Copy & Paste these into your custom components anywhere you wish to use a URL link on text.
Quest also has a "Link" feature that you can apply to any single layer or group of layers to create internal routes or external URL links so you are not strictly required to use this Link component.
You can change typography via Text Styles
You can change colors via the Color Styles.
Anything else
Copy & Paste any of the Pagination instances into your custom components. When it comes into Quest they will be working, interactive React UI components.
You can change the left and right chevrons by swapping the icon instances.
You can change colors via the Color Styles for the individual Pagination Items.
You modify most of the controls via the bindings once you export it into Quest.
You cannot change auto layout padding or space between.
You cannot change the text for the numbers in the main component or the instance.
You cannot change corner radius.
You cannot change order of layers.
You cannot remove or add drop-shadow.
You cannot change individual colors. Change the design system colors to make those changes.
Copy & Paste any of the Pagination instances in the Enabled state into your custom components. When it comes into Quest they will be working, interactive React UI components.
You can change width with auto layout on the instance only.
You can change colors via the Color Styles.
You cannot change auto layout padding or space between on the main component.
You cannot change corner radius.
You cannot change order of layers.
You cannot remove or add drop-shadow.
You cannot change individual Progress instance colors. Change the design system colors to make those changes.
Copy & Paste any of the Rating instances into your custom components. When it comes into Quest they will be working, interactive React UI components.
You can change colors via the Color Styles.
You cannot change auto layout padding or space between on the main component.
You cannot change corner radius.
You cannot swap the icons.
You cannot change order of layers.
You cannot remove or add drop-shadow.
You cannot change individual Rating instance colors. Change the design system colors to make those changes.
Copy & Paste any of the Select instances in the Enabled state into your custom components. When it comes into Quest they will be working, interactive React UI components.
You can change colors via the Color Styles.
You can change width with auto layout on the instance only.
You cannot change auto layout padding or space between on the main component.
You cannot change corner radius.
You cannot swap the icons.
You cannot change order of layers.
You cannot remove or add drop-shadow.
You cannot change individual Select instance colors. Change the design system colors to make those changes.
Copy & Paste any of the Skeleton instances into your custom components. When it comes into Quest they will be working, interactive React UI components.
You can change colors via the Color Styles.
You can change width with auto layout on the instance only.
You cannot change auto layout padding or space between on the main component.
You cannot change corner radius.
You cannot swap the icons.
You cannot change order of layers.
You cannot remove or add drop-shadow.
You cannot change individual Skeleton instance colors. Change the design system colors to make those changes.
Copy & Paste the “Enabled” version of the text field you prefer into your custom components.
You can change typography via Text Styles.
You can change colors via the Color Styles.
You can change the autolayout size on the instance to change the width.
You can change the options of the props on the instance.
You cannot change the colors to custom colors in different cases. Can only change the colors via from the Color Styles.
You cannot change the fonts to be custom. Must use the same Text Styles across all variants.
You cannot change auto layout padding or space between on the main component.
You cannot change corner radius.
You cannot remove or add drop-shadow.
You cannot change order of layers.
Copy & Paste into your custom components where you want to have a checkbox. Copy and paste the default toggled or non-toggled, non-hovered states only.
Changing the styling for the hover states and colors of the checkboxes should be done so on the "Checked=True" row and not the first row in the design. This serve as the main style and will apply the hover colors to the default state.
When copying and pasting Radio Button components into your custom design, be sure to add them all into a frame. Once you import this into Quest, you will add the Radio Group feature to set them up.
You can change colors via the Color Styles.
You can change typography via Text Styles.
You can change icon via variant.
You can change hover corner radius.
You can change sizes.
You cannot copy and paste the hover states, only use default non-hover states
You cannot add or change layer order
Copy & Paste into your custom components where you want to have a switch. Copy and paste the default non-hovered states only.
You can change sizes.
You can change hover corner radius.
You can change typography via Text Styles.
You can change colors via the Color Styles.
You cannot copy and paste the hover states, only use default non-hover states
You cannot add or change layer order
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.
Learn more about the Dialog feature here.
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.
You can change colors via the Color Styles.
You can change typography via Text Styles.
You can change corner radius.
You can adjust or remove drop-shadow.
You cannot use a gradient, only solid color.
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
You can change typography via Text Styles.
You can change colors via the Color Styles.
You can change the size.
You can add rows or columns (but final layout is controlled by the code).
You cannot add non-standard shapes, images or design elements abstract to a traditional table like design structure.
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
You can change the size.
You can change colors via the Color Styles.
You can change typography via Text Styles.
You can add rows or columns (but final layout is controlled by the code)
You cannot add non-standard shapes, images or design elements abstract to a traditional table like design structure.
In the and MUI kit, there's a page for the Typography component. This is simply meant to be a place to see what your typography styles look like. You do not need to copy and paste these components into your own custom designs/components.
Please refer to the Customizing & Using the Design Kit doc for styling your typography and using it.
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 support@quest.ai and tell us so we can prioritize.
