diff --git a/src/components/editor/ComponentPreview.tsx b/src/components/editor/ComponentPreview.tsx
index 09fe6f89b5..a8f211c3dd 100644
--- a/src/components/editor/ComponentPreview.tsx
+++ b/src/components/editor/ComponentPreview.tsx
@@ -58,6 +58,7 @@ const ComponentPreview: React.FC<{
     case 'Radio':
     case 'ListItem':
     case 'BreadcrumbLink':
+    case 'Kbd':
       return (
         <PreviewContainer
           component={component}
diff --git a/src/components/inspector/panels/Panels.tsx b/src/components/inspector/panels/Panels.tsx
index 381024f904..365e821d65 100644
--- a/src/components/inspector/panels/Panels.tsx
+++ b/src/components/inspector/panels/Panels.tsx
@@ -49,6 +49,7 @@ import AspectRatioPanel from '~components/inspector/panels/components/AspectRati
 import BreadcrumbPanel from '~components/inspector/panels/components/BreadcrumbPanel'
 import BreadcrumbItemPanel from '~components/inspector/panels/components/BreadcrumbItemPanel'
 import HighlightPanel from '~components/inspector/panels/components/HighlightPanel'
+import KbdPanel from './components/KbdPanel'
 
 const Panels: React.FC<{ component: IComponent; isRoot: boolean }> = ({
   component,
@@ -114,6 +115,7 @@ const Panels: React.FC<{ component: IComponent; isRoot: boolean }> = ({
       {type === 'Breadcrumb' && <BreadcrumbPanel />}
       {type === 'BreadcrumbItem' && <BreadcrumbItemPanel />}
       {type === 'BreadcrumbLink' && <LinkPanel />}
+      {type === 'Kbd' && <KbdPanel />}
     </>
   )
 }
diff --git a/src/components/inspector/panels/components/KbdPanel.tsx b/src/components/inspector/panels/components/KbdPanel.tsx
new file mode 100644
index 0000000000..6de5cde6e7
--- /dev/null
+++ b/src/components/inspector/panels/components/KbdPanel.tsx
@@ -0,0 +1,10 @@
+import { memo } from 'react'
+import ChildrenControl from '~components/inspector/controls/ChildrenControl'
+
+const KdbPanel = () => (
+  <>
+    <ChildrenControl />
+  </>
+)
+
+export default memo(KdbPanel)
diff --git a/src/componentsList.ts b/src/componentsList.ts
index 720f2493e9..ce171a743e 100644
--- a/src/componentsList.ts
+++ b/src/componentsList.ts
@@ -86,6 +86,7 @@ export const menuItems: MenuItems = {
       ListItem: {},
     },
   },
+  Kbd: {},
   NumberInput: {},
   Progress: {},
   Radio: {},
@@ -152,6 +153,7 @@ export const componentsList: ComponentType[] = [
   'InputLeftElement',
   'InputRightAddon',
   'InputRightElement',
+  'Kbd',
   'Link',
   'List',
   'ListIcon',
diff --git a/src/react-app-env.d.ts b/src/react-app-env.d.ts
index e30513d40c..765a695d4d 100644
--- a/src/react-app-env.d.ts
+++ b/src/react-app-env.d.ts
@@ -52,6 +52,7 @@ type ComponentType =
   | 'List'
   | 'ListItem'
   | 'ListIcon'
+  | 'Kbd'
   | 'Menu'
   | 'NumberInput'
   | 'Progress'
diff --git a/src/utils/defaultProps.tsx b/src/utils/defaultProps.tsx
index 91d5a8fade..15ba94585e 100644
--- a/src/utils/defaultProps.tsx
+++ b/src/utils/defaultProps.tsx
@@ -59,6 +59,7 @@ import {
   BreadcrumbLinkProps,
   ListProps,
   HighlightProps,
+  KbdProps,
 } from '@chakra-ui/react'
 
 import iconsList from '~iconsList'
@@ -132,6 +133,7 @@ type PreviewDefaultProps = {
   ListItem?: PropsWithForm<any>
   Center?: PropsWithForm<CenterProps>
   Container?: PropsWithForm<ContainerProps>
+  Kbd?: PropsWithForm<KbdProps>
 }
 
 export const DEFAULT_PROPS: PreviewDefaultProps = {
@@ -239,6 +241,7 @@ export const DEFAULT_PROPS: PreviewDefaultProps = {
     },
   },
   ListItem: { children: 'list' },
+  Kbd: { children: 'shift' },
   Progress: {
     value: 60,
     min: 0,
diff --git a/src/utils/editor.ts b/src/utils/editor.ts
index 50cdeba3e7..b27b85ff43 100644
--- a/src/utils/editor.ts
+++ b/src/utils/editor.ts
@@ -48,6 +48,7 @@ export const COMPONENTS: (ComponentType | MetaComponentType)[] = [
   'Switch',
   'Tag',
   'Text',
+  'Kbd',
   'Textarea',
   'Tab',
   'Accordion',