diff --git a/src/renderer/components/hotbar/hotbar-cell.tsx b/src/renderer/components/hotbar/hotbar-cell.tsx
new file mode 100644
index 0000000000..f4fb3d9ac7
--- /dev/null
+++ b/src/renderer/components/hotbar/hotbar-cell.tsx
@@ -0,0 +1,36 @@
+import "./hotbar-menu.scss";
+import "./hotbar.commands";
+
+import React, { HTMLAttributes, ReactNode, useState } from "react";
+
+import { cssNames } from "../../utils";
+
+interface Props extends HTMLAttributes<HTMLDivElement> {
+  children?: ReactNode;
+  index: number;
+  innerRef?: React.LegacyRef<HTMLDivElement>;
+}
+
+export function HotbarCell({ innerRef, children, className, ...rest }: Props) {
+  const [animating, setAnimating] = useState(false);
+  const onAnimationEnd = () => { setAnimating(false); };
+  const onClick = () => {
+    if (className.includes("isDraggingOver")) {
+      return;
+    }
+
+    setAnimating(true);
+  };
+
+  return (
+    <div
+      className={cssNames("HotbarCell", { animating }, className)}
+      onAnimationEnd={onAnimationEnd}
+      onClick={onClick}
+      ref={innerRef}
+      {...rest}
+    >
+      {children}
+    </div>
+  );
+}