LogoLogo
Quest HomeSign Up
  • 😀Welcome to Quest
  • Getting Started
    • Quest Overview
    • Helpful Resources
    • Quick Start - Build your first component from Figma
    • Quick Start - Build your first component from a Wireframe
    • AI Prompt
  • Fundamentals
    • Customizing & Using the UI Kit
    • Designing Custom Components in Figma
    • Easily Sync Designs without Losing Work
    • Setting Up Props & Bindings
    • Exporting Code
    • Push to your Repository
    • Creating Responsive Components
    • Nesting Components
    • Workspaces & Apps
    • Code & Preview Mode
    • Prototypes/Wireframes
    • Animations - build with React Spring
    • Quest plugin for Figma Dev Mode
    • Publish on Quest to a URL
  • Features
    • Working with Variants & States
    • Naming Conventions
    • Previewing with Custom Fonts
    • Light & Dark Mode
    • Creating a custom Tooltip
    • Creating a Floating Popover
    • Creating a Dialog pop-up
    • Radio Group
    • Using the MUI Data Grid & Table
    • Data & List Bindings
    • Dynamic Bindings
    • Grid
    • File Upload
    • Design System Tab and Theme Import
    • How-to use a Theme in your Application
    • Accessibility Support
    • Design Tips and Tricks
    • Video
    • Lazy Loading
    • Sticky Position
    • Link
    • Custom Breakpoints
    • Min / Max Width
    • Supported Quest UI Kit Components & How-to Make Edits in Figma
    • Supported Chakra Components & How-to Make Edits in Figma
  • Advanced Tutorials
    • Setting up Bindings and Features on the MUI Button
    • Display Repeating Components based on a Dynamic List
    • How-to Pass Values from Parent to Nested Components
    • How-to Invoke a modal Dialog Box from a Button Click
    • How to Setup a popover
  • 🔍Help
    • Product Updates
    • FAQs
    • Plugin Warnings / Alerts
  • 💡Support
    • Why does my design look different in Quest than Figma?
    • Can I keep making changes in Figma without affecting code?
    • What are some best practices?
    • Does Quest support more than Figma and React?
    • How do I manage users?
    • What is the refund process?
    • How do I get in touch with Quest?
    • Do I have to use MUI if I'm using Quest?
Powered by GitBook
On this page
  • Alert
  • Avatar
  • Badge
  • Breadcrumbs
  • Button
  • Checkbox
  • Close Button
  • Image
  • Keyboard Key
  • Number Input
  • Pin Input
  • Progress
  • Radio
  • Select
  • Skeleton
  • Slider
  • Switch
  • Tag
  • Text Area
  • Don't see a component you need?

Was this helpful?

  1. Features

Supported Chakra Components & How-to Make Edits in Figma

PreviousSupported Quest UI Kit Components & How-to Make Edits in FigmaNextSetting up Bindings and Features on the MUI Button

Last updated 2 years ago

Was this helpful?

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

https://chakra-ui.com/docs/components/alert/usage

Avatar

https://chakra-ui.com/docs/components/avatar/usage

Badge

https://chakra-ui.com/docs/components/badge/usage

Breadcrumbs

https://chakra-ui.com/docs/components/breadcrumb/usage

Button

https://chakra-ui.com/docs/components/button/usage

Checkbox

https://chakra-ui.com/docs/components/checkbox/usage

Close Button

https://chakra-ui.com/docs/components/close-button/usage

Image

https://chakra-ui.com/docs/components/image/usage

Kbd (Keyboard Key)

https://chakra-ui.com/docs/components/kbd/usage

Number Input

https://chakra-ui.com/docs/components/number-input/usage

Pin Input

https://chakra-ui.com/docs/components/pin-input/usage

Progress

https://chakra-ui.com/docs/components/progress/usage

Radio

https://chakra-ui.com/docs/components/radio/usage

Select

https://chakra-ui.com/docs/components/select/usage

Skeleton

https://chakra-ui.com/docs/components/skeleton/usage

Slider

https://chakra-ui.com/docs/components/slider/usage

Switch

https://chakra-ui.com/docs/components/switch/usage

Tag

https://chakra-ui.com/docs/components/tag/usage

Text Area

https://chakra-ui.com/docs/components/input

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.

Charka - Alert
Charka - Avatar
Charka - Badge
Charka - Breadcrumb
Charka - Button
Charka - Checkbox
Charka - Close Button
Charka - Image
Charka - Keyboard Key
Charka - Number Input
Charka - Pin Input
Charka - Progress
Charka - Radio
Charka - Select
Charka - Skeleton
Charka - Slider
Charka - Switch
Charka - Tag
Charka - Text Area