diff --git a/examples/web/react/app.tsx b/examples/web/react/app.tsx
index d6fbe52db03643eb44a344c7e8b9b527af34c8e5..07c59556fa1f795454bc9a0fd537cc90d453610e 100644
--- a/examples/web/react/app.tsx
+++ b/examples/web/react/app.tsx
@@ -13,7 +13,7 @@ import {
     DrawHandler,
     Footer,
     Info,
-    KeyboardChip8,
+    KeyboardGB,
     Link,
     Modal,
     Pair,
@@ -348,6 +348,7 @@ export const App: FC<AppProps> = ({ emulator, backgrounds = ["264653"] }) => {
                             onClearHandler={onClearHandler}
                             onMinimize={onMinimize}
                         />
+                        <KeyboardGB />
                     </div>
                 }
             >
diff --git a/examples/web/react/components/index.ts b/examples/web/react/components/index.ts
index 0c9dac26034b2d937a95e12e79f02faa5a9f7902..992acf82b847ba04eb897eab045a9b536ffec65b 100644
--- a/examples/web/react/components/index.ts
+++ b/examples/web/react/components/index.ts
@@ -6,6 +6,7 @@ export * from "./display/display";
 export * from "./footer/footer";
 export * from "./info/info";
 export * from "./keyboard-chip8/keyboard-chip8";
+export * from "./keyboard-gb/keyboard-gb";
 export * from "./link/link";
 export * from "./modal/modal";
 export * from "./pair/pair";
diff --git a/examples/web/react/components/keyboard-gb/keyboard-gb.css b/examples/web/react/components/keyboard-gb/keyboard-gb.css
new file mode 100644
index 0000000000000000000000000000000000000000..a17545f61f6f4410e23b2e0abba1bda7c740b6e6
--- /dev/null
+++ b/examples/web/react/components/keyboard-gb/keyboard-gb.css
@@ -0,0 +1,55 @@
+
+.keyboard-gb {
+    font-size: 0px;
+    text-align: center;
+    touch-callout: none;
+    -o-touch-callout: none;
+    -ms-touch-callout: none;
+    -moz-touch-callout: none;
+    -khtml-touch-callout: none;
+    -webkit-touch-callout: none;
+    user-select: none;
+    -o-user-select: none;
+    -ms-user-select: none;
+    -moz-user-select: none;
+    -khtml-user-select: none;
+    -webkit-user-select: none;
+}
+
+.keyboard-gb > .keyboard-line {
+    margin-bottom: 12px;
+}
+
+.keyboard-gb > .keyboard-line:last-child {
+    margin-bottom: 0px;
+}
+
+.keyboard-gb .key {
+    border: 2px solid #ffffff;
+    border-radius: 5px 5px 5px 5px;
+    -o-border-radius: 5px 5px 5px 5px;
+    -ms-border-radius: 5px 5px 5px 5px;
+    -moz-border-radius: 5px 5px 5px 5px;
+    -khtml-border-radius: 5px 5px 5px 5px;
+    -webkit-border-radius: 5px 5px 5px 5px;
+    cursor: pointer;
+    display: inline-block;
+    font-size: 38px;
+    height: 48px;
+    line-height: 46px;
+    margin-right: 14px;
+    text-align: center;
+    width: 48px;
+}
+
+.keyboard-gb .key:last-child {
+    margin-right: 0px;
+}
+
+.keyboard-gb .key:hover {
+    background-color: #50cb93;
+}
+
+.keyboard-gb .key:active {
+    background-color: #2a9d8f;
+}
diff --git a/examples/web/react/components/keyboard-gb/keyboard-gb.tsx b/examples/web/react/components/keyboard-gb/keyboard-gb.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..e63f10186a58587ff8ce7be851597ce6d37de058
--- /dev/null
+++ b/examples/web/react/components/keyboard-gb/keyboard-gb.tsx
@@ -0,0 +1,41 @@
+import React, { FC } from "react";
+
+import "./keyboard-gb.css";
+
+type KeyboardGBProps = {
+    style?: string[];
+    onKeyDown?: (key: string) => void;
+};
+
+export const KeyboardGB: FC<KeyboardGBProps> = ({ style = [], onKeyDown }) => {
+    const classes = () => ["keyboard", "keyboard-gb", ...style].join(" ");
+    const renderKey = (key: string) => {
+        return (
+            <span
+                className="key"
+                key={key}
+                onKeyDown={() => onKeyDown && onKeyDown(key)}
+            >
+                {key}
+            </span>
+        );
+    };
+    return (
+        <div className={classes()}>
+            <div className="keyboard-line">
+                {["1", "2", "3", "4"].map((k) => renderKey(k))}
+            </div>
+            <div className="keyboard-line">
+                {["Q", "W", "E", "R"].map((k) => renderKey(k))}
+            </div>
+            <div className="keyboard-line">
+                {["A", "S", "D", "F"].map((k) => renderKey(k))}
+            </div>
+            <div className="keyboard-line">
+                {["Z", "X", "C", "V"].map((k) => renderKey(k))}
+            </div>
+        </div>
+    );
+};
+
+export default KeyboardGB;