diff --git a/server/static/ui_crafting.js b/server/static/ui_crafting.js
new file mode 100644
index 0000000..5e31d7c
--- /dev/null
+++ b/server/static/ui_crafting.js
@@ -0,0 +1,25 @@
+export function setupCrafting(root) {
+  root.innerHTML = `
+    <div class="panel hidden">
+      <h3>Crafting</h3>
+      <p style="font-size:12px;color:var(--muted);">
+        (Placeholder) Add recipes and crafting logic here.
+      </p>
+      <div style="margin-top:6px;text-align:right;">
+        <button id="craft-close">Close</button>
+      </div>
+    </div>
+  `;
+  const panel = root.firstElementChild;
+  panel.querySelector('#craft-close').onclick = () => toggle(false);
+
+  function toggle(force) {
+    if (typeof force === 'boolean') {
+      panel.classList.toggle('hidden', !force);
+    } else {
+      panel.classList.toggle('hidden');
+    }
+  }
+
+  window.CraftingUI = { toggle };
+}