Links

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.

Alert

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

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

Charka - 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.
Charka - Breadcrumb

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Charka - 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 [email protected] and tell us so we can prioritize.