diff --git a/packages/gi-assets-basic/src/components/ShortcutKeys/Component.tsx b/packages/gi-assets-basic/src/components/ShortcutKeys/Component.tsx
new file mode 100644
index 000000000..5e0f77405
--- /dev/null
+++ b/packages/gi-assets-basic/src/components/ShortcutKeys/Component.tsx
@@ -0,0 +1,36 @@
+import type { IGIAC } from '@antv/gi-sdk';
+import { extra, useContext } from '@antv/gi-sdk';
+import React, { useState } from 'react';
+
+import Desscription from './Description';
+const { GIAComponent } = extra;
+export interface IProps {
+  GIAC: IGIAC;
+}
+
+const ShortcutKeys: React.FunctionComponent<IProps> = props => {
+  const { GIAC } = props;
+  const { GISDK_ID } = useContext();
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  const showModal = () => {
+    setIsModalOpen(true);
+  };
+
+  const handleOk = () => {
+    setIsModalOpen(false);
+  };
+
+  const handleCancel = () => {
+    setIsModalOpen(false);
+  };
+
+  return (
+    <>
+      <GIAComponent GIAC={GIAC} onClick={showModal} />
+      <Desscription isModalOpen={isModalOpen} handleOk={handleOk} handleCancel={handleCancel} />
+    </>
+  );
+};
+
+export default ShortcutKeys;
diff --git a/packages/gi-assets-basic/src/components/ShortcutKeys/Description.tsx b/packages/gi-assets-basic/src/components/ShortcutKeys/Description.tsx
new file mode 100644
index 000000000..86ef2ed61
--- /dev/null
+++ b/packages/gi-assets-basic/src/components/ShortcutKeys/Description.tsx
@@ -0,0 +1,49 @@
+import { Icon } from '@antv/gi-sdk';
+import { Col, Modal, Row } from 'antd';
+import * as React from 'react';
+
+interface DesscriptionProps {
+  isModalOpen: boolean;
+  handleCancel: () => void;
+  handleOk: () => void;
+}
+
+const Desscription: React.FunctionComponent<DesscriptionProps> = props => {
+  const { isModalOpen, handleCancel, handleOk } = props;
+
+  return (
+    <Modal title="快捷键" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
+      <Row gutter={[12, 12]}>
+        <Col span={12}>
+          查询 <Icon type="icon-shortcut" /> F
+        </Col>
+        <Col span={12}>
+          查询 <Icon type="icon-shortcut" /> F
+        </Col>
+        <Col span={12}>
+          查询 <Icon type="icon-shortcut" /> F
+        </Col>
+        <Col span={12}>
+          查询 <Icon type="icon-shortcut" /> F
+        </Col>
+        <Col span={12}>
+          查询 <Icon type="icon-shortcut" /> F
+        </Col>
+        <Col span={12}>
+          查询 <Icon type="icon-shortcut" /> F
+        </Col>
+        <Col span={12}>
+          查询 <Icon type="icon-shortcut" /> F
+        </Col>
+        <Col span={12}>
+          查询 <Icon type="icon-shortcut" /> F
+        </Col>
+        <Col span={12}>
+          查询 <Icon type="icon-shortcut" /> F
+        </Col>
+      </Row>
+    </Modal>
+  );
+};
+
+export default Desscription;
diff --git a/packages/gi-assets-basic/src/components/ShortcutKeys/index.tsx b/packages/gi-assets-basic/src/components/ShortcutKeys/index.tsx
new file mode 100644
index 000000000..390cc7dca
--- /dev/null
+++ b/packages/gi-assets-basic/src/components/ShortcutKeys/index.tsx
@@ -0,0 +1,9 @@
+import Component from './Component';
+import info from './info';
+import registerMeta from './registerMeta';
+
+export default {
+  info,
+  component: Component,
+  registerMeta,
+};
diff --git a/packages/gi-assets-basic/src/components/ShortcutKeys/info.ts b/packages/gi-assets-basic/src/components/ShortcutKeys/info.ts
new file mode 100644
index 000000000..5d2438ef1
--- /dev/null
+++ b/packages/gi-assets-basic/src/components/ShortcutKeys/info.ts
@@ -0,0 +1,12 @@
+import { Info } from '@antv/gi-sdk';
+const info = {
+  id: 'ShortcutKeys',
+  name: '快捷键',
+  desc: '快捷键说明',
+  icon: 'icon-shortcut',
+  cover: 'http://xxxx.jpg',
+  category: 'canvas-interaction',
+  type: Info.type.COMPONENT_ACTION,
+  docs: 'https://www.yuque.com/antv/gi/wc317ftgwwk3fwny',
+};
+export default info;
diff --git a/packages/gi-assets-basic/src/components/ShortcutKeys/registerMeta.ts b/packages/gi-assets-basic/src/components/ShortcutKeys/registerMeta.ts
new file mode 100644
index 000000000..6ac2a8cb4
--- /dev/null
+++ b/packages/gi-assets-basic/src/components/ShortcutKeys/registerMeta.ts
@@ -0,0 +1,12 @@
+import { extra } from '@antv/gi-sdk';
+import info from './info';
+const { deepClone, GIAC_METAS } = extra;
+const metas = deepClone(GIAC_METAS);
+metas.GIAC.properties.GIAC.properties.title.default = info.name;
+metas.GIAC.properties.GIAC.properties.icon.default = info.icon;
+metas.GIAC.properties.GIAC.properties.isShowTitle.default = false;
+metas.GIAC.properties.GIAC.properties.tooltipPlacement.default = 'right';
+
+export default () => {
+  return metas;
+};