Supported Chakra Components & How-to Make Edits in Figma
Just like customizing the design kit’s look and feel, there are specific things you can and cannot edit in the Chakra kit. Below is the full list & instructions for each component we support.
Please refer to the official Chakra links for supported bindings and how to use them once imported into Quest.
You can get the latest official Figma Chakra Kit here.
Here is the full list of supported Chakra Components below.
| Supported Chakra Component | Chakra doc link |
|---|---|
Alert
How To Use:
Copy & Paste any of the Alert instances into your custom components. When it comes into Quest they will be working, interactive Chakra UI components.
Can Change:
You can change the "Title" in the instance only.
You can change the "Description" in the instance only.
You can adjust width in the instance only to "Fixed" or "Fill".
You can customize & change icons to any other by swapping their instance.
You can change colors via the Color Styles of the Design System.
You can change font via the Text Styles of the Design System.
Can NOT Change:
You cannot change auto layout padding or space between.
You cannot add, remove or change order of layers.
You cannot remove or add drop-shadow if it does or doesn't already have it.
You cannot change individual colors or fonts. Change the design system styles to make those changes.
Avatar
How To Use:
Copy & Paste any of the Avatar instances into your custom components. When it comes into Quest they will be working, interactive Chakra UI components.
Can Change:
You can change the "Initials" in the design kit and in the component instance.
You can change the images in the design kit and in the component instance.
You can change colors via the Color Styles of the Design System.
You can change font via the Text Styles of the Design System.
Can NOT Change:
You cannot change auto layout padding or space between.
You cannot change size but you can use any of the sizes provided in the design kit.
You cannot add, remove or change order of layers.
You cannot remove or add drop-shadow if it does or doesn't already have it.
You cannot change individual colors or fonts. Change the design system styles to make those changes.
Badge
How To Use:
Copy & Paste any of the Badge instances into your custom components. When it comes into Quest they will be working, interactive Chakra UI components.
Can Change:
You can change the text in the design kit and in the component instance.
You can change colors via the Color Styles of the Design System.
You can change font via the Text Styles of the Design System.
Can NOT Change:
You cannot change auto layout padding or space between.
You cannot change size.
You cannot add, remove or change order of layers.
You cannot remove or add drop-shadow if it does or doesn't already have it.
You cannot change individual colors or fonts. Change the design system styles to make those changes.
Breadcrumbs
How To Use:
Copy & Paste any of the Breadcrumbs instances into your custom components. When it comes into Quest they will be working, interactive Chakra UI components.
Can Change:
You can change the text in the design kit and in the component instance.
You can change colors via the Color Styles of the Design System.
You can change font via the Text Styles of the Design System.
Can NOT Change:
You cannot change auto layout padding or space between.
You cannot change size.
You cannot change the icons or separators independently, you must choose one of the two variants you want to use only.
You cannot add, remove or change order of layers.
You cannot remove or add drop-shadow if it does or doesn't already have it.
You cannot change individual colors or fonts. Change the design system styles to make those changes.
Button
How To Use:
Copy & Paste any of the Buttons instances into your custom components. When it comes into Quest they will be working, interactive Chakra UI components.
Can Change:
You can change the "Title" in the instance only.
You can adjust width in the instance only to "Fixed" or "Fill".
You can turn on or off the icons on either side of the button text.
You can change colors via the Color Styles of the Design System.
You can change font via the Text Styles of the Design System.
Can NOT Change:
You cannot change auto layout padding or space between.
You cannot change size.
You cannot change the icons independently in the design kit and should only do this on the component instance you are using.
You cannot add, remove or change order of layers.
You cannot remove or add drop-shadow if it does or doesn't already have it.
You cannot change individual colors or fonts. Change the design system styles to make those changes.
Checkbox
How To Use:
Copy & Paste any of the Checkbox instances into your custom components. When it comes into Quest they will be working, interactive Chakra UI components.
Can Change:
You can change the "Title" in the instance only.
You can change colors via the Color Styles of the Design System.
You can change font via the Text Styles of the Design System.
Can NOT Change:
You cannot change auto layout padding or space between.
You cannot change size.
You cannot change the icons independently in the design kit and should only do this on the component instance you are using.
You cannot add, remove or change order of layers.
You cannot remove or add drop-shadow if it does or doesn't already have it.
You cannot change individual colors or fonts. Change the design system styles to make those changes.
Close Button
How To Use:
Copy & Paste any of the Close Button instances into your custom components. When it comes into Quest they will be working, interactive Chakra UI components.
Can Change:
You can change colors via the Color Styles of the Design System.
You can change font via the Text Styles of the Design System.
Can NOT Change:
You cannot change auto layout padding or space between.
You cannot change size.
You cannot add, remove or change order of layers.
You cannot remove or add drop-shadow if it does or doesn't already have it.
You cannot change individual colors. Change the design system styles to make those changes.
Image
How To Use:
Copy & Paste any of the Image instances into your custom components. When it comes into Quest they will be working, interactive Chakra UI components. Unlike a regular image exported out of Figma, this component has a loading state that helps improve page load speeds.
Can Change:
You can change the image in the instance only.
You can change the size in the instance only.
You can adjust width & height in the instance only to "Fixed" or "Fill".
Can NOT Change:
You cannot remove or add drop-shadow if it does or doesn't already have it.
Keyboard Key
How To Use:
Copy & Paste any of the Kbd instances into your custom components. When it comes into Quest they will be working, interactive Chakra UI components.
Can Change:
You can change colors via the Color Styles of the Design System.
You can change font via the Text Styles of the Design System.
Can NOT Change:
You cannot change auto layout padding or space between.
You cannot change size.
You cannot add, remove or change order of layers.
You cannot remove or add drop-shadow if it does or doesn't already have it.
You cannot change individual colors. Change the design system styles to make those changes.
Number Input
How To Use:
Copy & Paste any of the Number Input instances into your custom components. When it comes into Quest they will be working, interactive Chakra UI components.
Can Change:
You can adjust width in the instance only to "Fixed" or "Fill".
You can change the placeholder number in the instance only.
You can change colors via the Color Styles of the Design System.
You can change font via the Text Styles of the Design System.
Can NOT Change:
You cannot change auto layout padding or space between.
You cannot change size.
You cannot add, remove or change order of layers.
You cannot remove or add drop-shadow if it does or doesn't already have it.
You cannot change individual colors. Change the design system styles to make those changes.
Pin Input
How To Use:
Copy & Paste any of the Pin Input instances into your custom components. When it comes into Quest they will be working, interactive Chakra UI components.
Can Change:
You can change colors via the Color Styles of the Design System.
You can change font via the Text Styles of the Design System.
Can NOT Change:
You cannot change auto layout padding or space between.
You cannot add a placeholder number in the boxes. You must use bindings to do this, not Figma.
You cannot change size. You can only use the sizes provided in the kit.
You cannot add, remove or change order of layers.
You cannot remove or add drop-shadow if it does or doesn't already have it.
You cannot change individual colors or fonts. Change the design system styles to make those changes.
Progress
How To Use:
Copy & Paste any of the Progress instances into your custom components. When it comes into Quest they will be working, interactive Chakra UI components.
Can Change:
You can adjust width in the instance only to "Fixed" or "Fill".
You can change colors via the Color Styles of the Design System.
You can change font via the Text Styles of the Design System.
Can NOT Change:
You cannot change sizes. You must use the sizes provided. However, you can use the size binding to make fine tune adjusts after you export it.
You cannot add, remove or change order of layers.
You cannot remove or add drop-shadow if it does or doesn't already have it.
You cannot change individual colors. Change the design system styles to make those changes.
Radio
How To Use:
Copy & Paste any of the Radio instances into your custom components. When it comes into Quest they will be working, interactive Chakra UI components.
Can Change:
You can adjust text in the instance only.
You can change colors via the Color Styles of the Design System.
You can change font via the Text Styles of the Design System.
Can NOT Change:
You cannot change sizes. You must use the sizes provided.
You cannot add, remove or change order of layers.
You cannot remove or add drop-shadow if it does or doesn't already have it.
You cannot change individual colors. Change the design system styles to make those changes.
You can use the Radio Group feature with Radio instances in Quest. This will allow you to set up groups of Radio buttons easily. One big benefit of this is it can allow only 1 radio button to be checked at a time in the group. However, this will only be reflected when you download the code and can't be seen working in Preview mode.
Select
How To Use:
Copy & Paste any of the Select instances into your custom components. When it comes into Quest they will be working, interactive Chakra UI components.
Can Change:
You can adjust text in the instance only.
You can adjust width in the instance only to "Fixed" or "Fill".
You can change colors via the Color Styles of the Design System.
You can change font via the Text Styles of the Design System.
Can NOT Change:
You cannot change sizes. You must use the sizes provided.
You cannot add, remove or change order of layers.
You cannot remove or add drop-shadow if it does or doesn't already have it.
You cannot change individual colors. Change the design system styles to make those changes.
Skeleton
How To Use:
Copy & Paste any of the Skeleton instances into your custom components. When it comes into Quest they will be working, interactive Chakra UI components.
Can Change:
You can adjust width of the Rectangle in the instance only to "Fixed" or "Fill".
You can change colors via the Color Styles of the Design System.
You can change font via the Text Styles of the Design System.
Can NOT Change:
You cannot change sizes. You must use the sizes provided but you can adjust size via the bindings once exported to Quest.
You cannot adjust the circle's shape. For example, it can't be an oval.
You cannot add, remove or change order of layers.
You cannot remove or add drop-shadow if it does or doesn't already have it.
You cannot change individual colors. Change the design system styles to make those changes.
Slider
How To Use:
Copy & Paste any of the Slider instances into your custom components. When it comes into Quest they will be working, interactive Chakra UI components.
Can Change:
You can adjust width in the instance only to "Fixed" or "Fill".
You can change colors via the Color Styles of the Design System.
You can change font via the Text Styles of the Design System.
Can NOT Change:
You cannot change sizes. You must use the sizes provided but you can adjust size via the bindings once exported to Quest.
You cannot adjust the circle's shape or size.
You cannot add, remove or change order of layers.
You cannot remove or add drop-shadow if it does or doesn't already have it.
You cannot change individual colors. Change the design system styles to make those changes.
Switch
How To Use:
Copy & Paste any of the Switch instances into your custom components. When it comes into Quest they will be working, interactive Chakra UI components.
Can Change:
You can change colors via the Color Styles of the Design System.
You can change font via the Text Styles of the Design System.
Can NOT Change:
You cannot change sizes.
You cannot adjust the circle's shape or size.
You cannot add, remove or change order of layers.
You cannot remove or add drop-shadow if it does or doesn't already have it.
You cannot change individual colors. Change the design system styles to make those changes.
Tag
How To Use:
Copy & Paste any of the Tag instances into your custom components. When it comes into Quest they will be working, interactive Chakra UI components.
Can Change:
You can change colors via the Color Styles of the Design System.
You can change font via the Text Styles of the Design System.
Can NOT Change:
You cannot change sizes.
You cannot change the close button to something else.
You cannot add, remove or change order of layers.
You cannot remove or add drop-shadow if it does or doesn't already have it.
You cannot change individual colors. Change the design system styles to make those changes.
Text Area
How To Use:
Copy & Paste any of the Text Area instances into your custom components. When it comes into Quest they will be working, interactive Chakra UI components.
Can Change:
You can adjust width or height in the instance only to "Fixed" or "Fill".
You can change colors via the Color Styles of the Design System.
You can change font via the Text Styles of the Design System.
Can NOT Change:
You cannot add, remove or change order of layers.
You cannot remove or add drop-shadow if it does or doesn't already have it.
You cannot change individual colors. Change the design system styles to make those changes.
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 support@quest.ai and tell us so we can prioritize.
Last updated
