diff --git a/src/runtime/components/overlays/Slideover.vue b/src/runtime/components/overlays/Slideover.vue
new file mode 100644
index 00000000..d59f117a
--- /dev/null
+++ b/src/runtime/components/overlays/Slideover.vue
@@ -0,0 +1,58 @@
+<template>
+  <TransitionRoot as="template" :show="isOpen">
+    <Dialog as="div" class="fixed inset-0 flex z-40 lg:hidden" @close="isOpen = false">
+      <TransitionChild
+        as="template"
+        enter="transition-opacity ease-linear duration-300"
+        enter-from="opacity-0"
+        enter-to="opacity-100"
+        leave="transition-opacity ease-linear duration-300"
+        leave-from="opacity-100"
+        leave-to="opacity-0"
+      >
+        <DialogOverlay class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
+      </TransitionChild>
+      <TransitionChild
+        as="template"
+        enter="transition ease-in-out duration-300 transform"
+        enter-from="-translate-x-full"
+        enter-to="translate-x-0"
+        leave="transition ease-in-out duration-300 transform"
+        leave-from="translate-x-0"
+        leave-to="-translate-x-full"
+      >
+        <div class="relative flex-1 flex flex-col w-full max-w-md u-bg-white focus:outline-none">
+          <div class="pb-4">
+            <div class="flex-shrink-0 flex items-center justify-between px-4 h-16 border-b u-border-gray-200">
+              <slot name="header" />
+            </div>
+
+            <slot />
+          </div>
+        </div>
+      </TransitionChild>
+    </Dialog>
+  </TransitionRoot>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { Dialog, DialogOverlay, TransitionChild, TransitionRoot } from '@headlessui/vue'
+
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: false
+  }
+})
+const emit = defineEmits(['update:modelValue'])
+
+const isOpen = computed({
+  get () {
+    return props.modelValue
+  },
+  set (value) {
+    emit('update:modelValue', value)
+  }
+})
+</script>