diff --git a/examples/web/react/components/index.ts b/examples/web/react/components/index.ts
index 34aa90a0cb858bd19cd0e9156b56e22e658ca03e..f15a18d8c2174a5b57c0244d92fb2f4df6055e07 100644
--- a/examples/web/react/components/index.ts
+++ b/examples/web/react/components/index.ts
@@ -1 +1,2 @@
 export * from "./button/button";
+export * from "./tuple/tuple";
diff --git a/examples/web/react/components/tuple/tuple.css b/examples/web/react/components/tuple/tuple.css
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/examples/web/react/components/tuple/tuple.tsx b/examples/web/react/components/tuple/tuple.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..518fa9334dec3ccc395d720f896573f83331885d
--- /dev/null
+++ b/examples/web/react/components/tuple/tuple.tsx
@@ -0,0 +1,35 @@
+import React, { FC } from "react";
+
+import "./tuple.css";
+
+type TupleProps = {
+    key: string;
+    value?: string;
+    style?: string[];
+    onKeyClick?: () => void;
+    onValueClick?: () => void;
+};
+
+export const Tuple: FC<TupleProps> = ({
+    key,
+    value,
+    style = [],
+    onKeyClick,
+    onValueClick
+}) => {
+    const classes = () => ["table-entry", ...style].join(" ");
+    const _onKeyClick = () => (onKeyClick ? onKeyClick() : undefined);
+    const _onValueClick = () => (onValueClick ? onValueClick() : undefined);
+    return (
+        <>
+            <dt className={classes()} onClick={_onKeyClick}>
+                {key}
+            </dt>
+            <dd className={classes()} onClick={_onValueClick}>
+                {value ?? ""}
+            </dd>
+        </>
+    );
+};
+
+export default Tuple;