diff --git a/README.md b/README.md
index 8e7fe01..4bef356 100644
--- a/README.md
+++ b/README.md
@@ -90,7 +90,7 @@ The following special keys can be used for shortcuts: backspace, tab, clear, ent
 
 One global method is exposed, key which defines shortcuts when called directly.
 
-```
+```js
 hotkeys([keys:<String>], [option:[string|object|function]], [callback:<function>])
 ```
 
diff --git a/package-lock.json b/package-lock.json
index 048e7c6..0127946 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4297,6 +4297,15 @@
       "integrity": "sha512-bVID5RwZcUuplnhfKrDV5u9Em9w1PVBY75E8ibP1Ze4CP5kQ64IQc4vv41MchZqDJuCmpoafNBjiB9xrJXF4mw==",
       "dev": true
     },
+    "@uiw/react-mac-keyboard": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@uiw/react-mac-keyboard/-/react-mac-keyboard-1.0.4.tgz",
+      "integrity": "sha512-rIzij92eRb446i+iVfXWNno65fQZJw9g3T7yEkzI5asQlVqSNIbnZXNyMU2PfYvYBubJbAWFbIa6w1jZqKl9Eg==",
+      "dev": true,
+      "requires": {
+        "prop-types": "15.7.2"
+      }
+    },
     "@uiw/react-markdown-preview": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/@uiw/react-markdown-preview/-/react-markdown-preview-1.0.3.tgz",
diff --git a/package.json b/package.json
index 7478b49..6e29060 100644
--- a/package.json
+++ b/package.json
@@ -52,6 +52,7 @@
     "@kkt/loader-less": "5.8.0",
     "@kkt/loader-raw": "5.8.0",
     "@uiw/react-github-corners": "1.1.3",
+    "@uiw/react-mac-keyboard": "^1.0.4",
     "@uiw/react-markdown-preview": "1.0.3",
     "@uiw/react-shields": "1.1.0",
     "@uiw/reset.css": "1.0.3",
diff --git a/website/App.js b/website/App.js
index a3084c6..268eb61 100644
--- a/website/App.js
+++ b/website/App.js
@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import GithubCorner from '@uiw/react-github-corners';
 import { Github } from '@uiw/react-shields';
 import MarkdownPreview from '@uiw/react-markdown-preview';
-import KeyBoard from './components/KeyBoard';
+import KeyBoard from '@uiw/react-mac-keyboard';
 import Footer from './components/Footer';
 import styles from './styles/index.module.less';
 import DocumentStr from '../README.md';
@@ -124,6 +124,7 @@ export default class App extends Component {
           <div className={styles.info}>A robust Javascript library for capturing keyboard input and key combinations entered. It has no dependencies. Try to press your keyboard, The following button will highlight.</div>
         </div>
         <KeyBoard
+          style={{ top: -40 }}
           onMouseDown={this.onKeyBoardMouseDown.bind(this)}
           onMouseUp={this.onKeyBoardMouseUp.bind(this)}
           keyCode={keyCode}
diff --git a/website/components/KeyBoard.js b/website/components/KeyBoard.js
deleted file mode 100644
index 1f4f597..0000000
--- a/website/components/KeyBoard.js
+++ /dev/null
@@ -1,108 +0,0 @@
-import React from 'react';
-import classNames from 'classnames';
-
-import styles from './KeyBoard.module.less';
-
-const keyCode = [
-  { keycode: 27, name: ['esc'] },
-  { keycode: 112, name: ['F1'] },
-  { keycode: 113, name: ['F2'] },
-  { keycode: 114, name: ['F3'] },
-  { keycode: 115, name: ['F4'] },
-  { keycode: 116, name: ['F5'] },
-  { keycode: 117, name: ['F6'] },
-  { keycode: 118, name: ['F7'] },
-  { keycode: 119, name: ['F8'] },
-  { keycode: 120, name: ['F9'] },
-  { keycode: 121, name: ['F10'] },
-  { keycode: 122, name: ['F11'] },
-  { keycode: 123, name: ['F12'] },
-  { keycode: -1, name: ['〇'] },
-  { keycode: 192, name: ['~', '`'] },
-  { keycode: 49, name: ['!', '1'] },
-  { keycode: 50, name: ['@', '2'] },
-  { keycode: 51, name: ['#', '3'] },
-  { keycode: 52, name: ['$', '4'] },
-  { keycode: 53, name: ['%', '5'] },
-  { keycode: 54, name: ['^', '6'] },
-  { keycode: 55, name: ['&', '7'] },
-  { keycode: 56, name: ['*', '8'] },
-  { keycode: 57, name: ['(', '9'] },
-  { keycode: 48, name: [')', '0'] },
-  { keycode: 189, name: ['＿', '-'] },
-  { keycode: 187, name: ['＋', ': '] },
-  { keycode: 8, name: ['delete'] },
-  { keycode: 9, name: ['tab'] },
-  { keycode: 81, name: ['Q'] },
-  { keycode: 87, name: ['W'] },
-  { keycode: 69, name: ['E'] },
-  { keycode: 82, name: ['R'] },
-  { keycode: 84, name: ['T'] },
-  { keycode: 89, name: ['Y'] },
-  { keycode: 85, name: ['U'] },
-  { keycode: 73, name: ['I'] },
-  { keycode: 79, name: ['O'] },
-  { keycode: 80, name: ['P'] },
-  { keycode: 219, name: ['{', '['] },
-  { keycode: 221, name: ['}', ']'] },
-  { keycode: 220, name: ['|', '\\'] },
-  { keycode: 20, name: ['', 'CapsLock'] },
-  { keycode: 65, name: ['A'] },
-  { keycode: 83, name: ['S'] },
-  { keycode: 68, name: ['D'] },
-  { keycode: 70, name: ['F'] },
-  { keycode: 71, name: ['G'] },
-  { keycode: 72, name: ['H'] },
-  { keycode: 74, name: ['J'] },
-  { keycode: 75, name: ['K'] },
-  { keycode: 76, name: ['L'] },
-  { keycode: 186, name: [':', ';'] },
-  { keycode: 222, name: ['"', '\''] },
-  { keycode: 13, name: ['enter', 'return'] },
-  { keycode: 16, name: ['⇧'] },
-  { keycode: 90, name: ['Z'] },
-  { keycode: 88, name: ['X'] },
-  { keycode: 67, name: ['C'] },
-  { keycode: 86, name: ['V'] },
-  { keycode: 66, name: ['B'] },
-  { keycode: 78, name: ['N'] },
-  { keycode: 77, name: ['M'] },
-  { keycode: 188, name: ['<', ','] },
-  { keycode: 190, name: ['>', '.'] },
-  { keycode: 191, name: ['?', '/'] },
-  { keycode: 16, name: ['⇧'] },
-  { keycode: -1, name: ['fn'] },
-  { keycode: 17, name: ['control'] },
-  { keycode: 18, name: ['alt', 'option'] },
-  { keycode: 91, name: ['command'] },
-  { keycode: 32, name: [''] },
-  { keycode: 91, name: ['command'] },
-  { keycode: 18, name: ['alt', 'option'] },
-  { keycode: 37, name: ['◀'] },
-  { keycode: 38, name: ['▲'] },
-  { keycode: 39, name: ['▶'] },
-  { keycode: 40, name: ['▼'] },
-];
-
-export default function KeyBoard({ keyCode: keyCodeNum, onMouseDown, onMouseUp }) {
-  return (
-    <div className={styles.keyboard}>
-      <ul>
-        {keyCode.map((item, idx) => {
-          const name = item.name.map((_item, _idx) => <span key={`${_idx}`}>{_item}</span>);
-          return (
-            <li
-              key={idx}
-              onMouseDown={() => onMouseDown(item)}
-              onMouseUp={() => onMouseUp(item)}
-              className={classNames({ pressed: keyCodeNum.indexOf(item.keycode) > -1 })}
-              data-key={item.keycode}
-            >
-              {name}
-            </li>
-          );
-        })}
-      </ul>
-    </div>
-  );
-}
diff --git a/website/components/KeyBoard.module.less b/website/components/KeyBoard.module.less
deleted file mode 100644
index 5d91321..0000000
--- a/website/components/KeyBoard.module.less
+++ /dev/null
@@ -1,250 +0,0 @@
-
-.keyboard {
-  height: 394px;
-  border-radius: 10px;
-  border: 1px solid #C9C9C9;
-  background: #F2F2F2;
-  box-shadow: 2px 0px 2px #E2E2E2 inset,-2px 2px 3px #E2E2E2 inset,1px -0px 0px #C1C1C1 inset,0px -2px 3px #C1C1C1 inset;
-  user-select: none;
-  position: relative;
-  top: -40px;
-  width: 995px;
-  margin: 0 auto;
-  ul {
-    width: 992px;
-    margin-top: 9px;
-    padding-left: 11px;
-    position: relative;
-    float: left;
-  }
-  li {
-    width: 62px;
-    height: 62px;
-    float: left;
-    margin-right: 5px;
-    margin-bottom: 5px;
-    background: #151515;
-    color: rgb(200,200,200);
-    text-align: center;
-    line-height: 62px;
-    font-size: 12px;
-    border-radius: 8px;
-    border: 1px solid #3A3A3A;
-    box-shadow: 1px 0px 0px rgb(0,0,0),0px 1px 0px rgb(0,0,0),-1px 0px 0px rgb(0,0,0),0px -1px 0px rgb(0,0,0);
-    transition: all .4s ease-in;
-    user-select: none;
-    cursor: pointer;
-    position: relative;
-    &:active, &:global(.pressed) {
-      color:#52F800;
-      background-color: #100068;
-      border: 1px solid #332376;
-      transition: 1ms linear;
-    }
-    &:nth-child(1) {
-      width: 99px;
-      height: 28px;
-      line-height: 28px;
-      text-indent: 1em;
-      text-align: left;
-    }
-    &:nth-child(2),
-    &:nth-child(3),
-    &:nth-child(4),
-    &:nth-child(5),
-    &:nth-child(6),
-    &:nth-child(7),
-    &:nth-child(8),
-    &:nth-child(9),
-    &:nth-child(10),
-    &:nth-child(11),
-    &:nth-child(12),
-    &:nth-child(13),
-    &:nth-child(14) {
-      width: 60px;
-      height: 28px;
-      line-height: 28px;
-    }
-    &:nth-child(15),
-    &:nth-child(16),
-    &:nth-child(17),
-    &:nth-child(18),
-    &:nth-child(19),
-    &:nth-child(20),
-    &:nth-child(21),
-    &:nth-child(22),
-    &:nth-child(23),
-    &:nth-child(24),
-    &:nth-child(25),
-    &:nth-child(26),
-    &:nth-child(27),
-    &:nth-child(40),
-    &:nth-child(41),
-    &:nth-child(42),
-    &:nth-child(53),
-    &:nth-child(54),
-    &:nth-child(64),
-    &:nth-child(65),
-    &:nth-child(66) {
-      padding: 7px 0;
-      height: 48px;
-    } 
-  }
-}
-
-
-.keyboard li:nth-child(15) span,
-.keyboard li:nth-child(16) span,
-.keyboard li:nth-child(17) span,
-.keyboard li:nth-child(18) span,
-.keyboard li:nth-child(19) span,
-.keyboard li:nth-child(20) span,
-.keyboard li:nth-child(21) span,
-.keyboard li:nth-child(22) span,
-.keyboard li:nth-child(23) span,
-.keyboard li:nth-child(24) span,
-.keyboard li:nth-child(25) span,
-.keyboard li:nth-child(26) span,
-.keyboard li:nth-child(27) span,
-.keyboard li:nth-child(40) span,
-.keyboard li:nth-child(41) span,
-.keyboard li:nth-child(42) span,
-.keyboard li:nth-child(53) span,
-.keyboard li:nth-child(54) span,
-.keyboard li:nth-child(64) span,
-.keyboard li:nth-child(65) span,
-.keyboard li:nth-child(66) span {
-  line-height: 23px;
-  height: 23px;
-  width: 100%;
-  float: left;
-  font-size:14px;
-}
-.keyboard li:nth-child(28) span,
-.keyboard li:nth-child(55) span,
-.keyboard li:nth-child(67) span {
-  line-height: 14px;
-  margin-top: 43px;
-  float: right;
-  margin-right: 8px;
-}
-//字母键
-.keyboard li:nth-child(30),
-.keyboard li:nth-child(31),
-.keyboard li:nth-child(32),
-.keyboard li:nth-child(33),
-.keyboard li:nth-child(34),
-.keyboard li:nth-child(35),
-.keyboard li:nth-child(36),
-.keyboard li:nth-child(37),
-.keyboard li:nth-child(38),
-.keyboard li:nth-child(39),
-.keyboard li:nth-child(44),
-.keyboard li:nth-child(45),
-.keyboard li:nth-child(46),
-.keyboard li:nth-child(47),
-.keyboard li:nth-child(48),
-.keyboard li:nth-child(49),
-.keyboard li:nth-child(50),
-.keyboard li:nth-child(51),
-.keyboard li:nth-child(52),
-.keyboard li:nth-child(57),
-.keyboard li:nth-child(58),
-.keyboard li:nth-child(59),
-.keyboard li:nth-child(60),
-.keyboard li:nth-child(61),
-.keyboard li:nth-child(62),
-.keyboard li:nth-child(63) {
-  font-size: 18px;
-  line-height: 64px;
-}
-
-.keyboard li:nth-child(29) span,
-.keyboard li:nth-child(43) span,
-.keyboard li:nth-child(56) span,
-.keyboard li:nth-child(68) span,
-.keyboard li:nth-child(69) span,
-.keyboard li:nth-child(70) span,
-.keyboard li:nth-child(71) span,
-.keyboard li:nth-child(73) span,
-.keyboard li:nth-child(74) span {
-  line-height: 14px;
-  margin-top: 43px;
-  text-indent: 5px;
-  float: left;
-}
-.keyboard li:nth-child(28),
-.keyboard li:nth-child(29) {
-  width: 73px;
-}
-.keyboard li:nth-child(43),
-.keyboard li:nth-child(55) {
-  width: 102px;
-}
-.keyboard {
-  li:nth-child(43) {
-    &:active {
-      span:first-child {
-        background:#52f800;
-      }
-    }
-    span:first-child {
-      position: absolute;
-      top: -36px;
-      left: 5px;
-      width: 6px;
-      height: 6px;
-      background: #fff;
-      border-radius: 3px;
-    }
-  }
-}
-.keyboard li:nth-child(55) span:first-child,
-.keyboard li:nth-child(70) span:first-child {
-  position: absolute;
-  right: 0px;
-  top: -37px;
-  font-size: 12px;
-  line-height: 12px;
-}
-.keyboard li:nth-child(70) span:first-child {
-  left: 0px;
-  text-align: left;
-}
-.keyboard li:nth-child(74) span:first-child {
-  position: absolute;
-  left: 0;
-  top: -37px;
-  font-size: 12px;
-  line-height: 12px;
-}
-.keyboard li:nth-child(56) {
-  width: 136px;
-}
-.keyboard li:nth-child(67) {
-  width: 137px;
-}
-.keyboard li:nth-child(71),
-.keyboard li:nth-child(73) {
-  width: 70px;
-}
-.keyboard li:nth-child(72) {
-  width: 333px;
-}
-  
-.keyboard li:nth-child(76),
-.keyboard li:nth-child(78) {
-  height: 29px;
-  line-height: 29px;
-}
-.keyboard li:nth-child(76) {
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-}
-.keyboard li:nth-child(78) {
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
-  position: absolute;
-  bottom: 0;
-  right: 84px;
-}