diff --git a/src/components/Drawer.js b/src/components/Drawer.js
new file mode 100644
index 0000000..7892741
--- /dev/null
+++ b/src/components/Drawer.js
@@ -0,0 +1,18 @@
+import { $html } from "sigpro";
+import { joinClass } from "../core/utils.js";
+
+/** DRAWER */
+export const Drawer = (props) =>
+  $html("div", { class: joinClass("drawer", props.class) }, [
+    $html("input", {
+      id: props.id,
+      type: "checkbox",
+      class: "drawer-toggle",
+      checked: props.open,
+    }),
+    $html("div", { class: "drawer-content" }, props.content),
+    $html("div", { class: "drawer-side" }, [
+      $html("label", { for: props.id, class: "drawer-overlay", onclick: () => props.open?.(false) }),
+      $html("div", { class: "min-h-full bg-base-200 w-80" }, props.side),
+    ]),
+  ]);