diff --git a/docs/components/content/examples/SlideoverExample.vue b/docs/components/content/examples/SlideoverExample.vue
deleted file mode 100644
index 6d154e5c..00000000
--- a/docs/components/content/examples/SlideoverExample.vue
+++ /dev/null
@@ -1,30 +0,0 @@
-<script setup>
-const isOpen = ref(false)
-</script>
-
-<template>
-  <div>
-    <UButton label="Open" @click="isOpen = true" />
-
-    <USlideover v-model="isOpen">
-      <div class="p-4 sm:p-6 flex flex-col flex-1 gap-4 sm:gap-6">
-        <div class="flex items-center justify-between">
-          <h2 class="font-semibold text-gray-900 dark:text-white">
-            Title
-          </h2>
-
-          <UButton
-            icon="i-heroicons-x-mark-20-solid"
-            color="gray"
-            variant="link"
-            size="md"
-            :padded="false"
-            @click="isOpen = false"
-          />
-        </div>
-
-        <Placeholder class="flex-1 w-full" />
-      </div>
-    </USlideover>
-  </div>
-</template>
diff --git a/docs/components/content/examples/SlideoverExampleBasic.vue b/docs/components/content/examples/SlideoverExampleBasic.vue
new file mode 100644
index 00000000..14e0d6e1
--- /dev/null
+++ b/docs/components/content/examples/SlideoverExampleBasic.vue
@@ -0,0 +1,15 @@
+<script setup>
+const isOpen = ref(false)
+</script>
+
+<template>
+  <div>
+    <UButton label="Open" @click="isOpen = true" />
+
+    <USlideover v-model="isOpen">
+      <div class="p-4 flex-1">
+        <Placeholder class="h-full" />
+      </div>
+    </USlideover>
+  </div>
+</template>
diff --git a/docs/components/content/examples/SlideoverExampleCard.vue b/docs/components/content/examples/SlideoverExampleCard.vue
new file mode 100644
index 00000000..39081456
--- /dev/null
+++ b/docs/components/content/examples/SlideoverExampleCard.vue
@@ -0,0 +1,23 @@
+<script setup>
+const isOpen = ref(false)
+</script>
+
+<template>
+  <div>
+    <UButton label="Open" @click="isOpen = true" />
+
+    <USlideover v-model="isOpen">
+      <UCard class="flex flex-col flex-1" :ui="{ body: { base: 'flex-1' }, ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
+        <template #header>
+          <Placeholder class="h-8" />
+        </template>
+
+        <Placeholder class="h-full" />
+
+        <template #footer>
+          <Placeholder class="h-8" />
+        </template>
+      </UCard>
+    </USlideover>
+  </div>
+</template>
diff --git a/docs/components/content/examples/SlideoverExampleDisableOverlay.vue b/docs/components/content/examples/SlideoverExampleDisableOverlay.vue
new file mode 100644
index 00000000..c13de9b0
--- /dev/null
+++ b/docs/components/content/examples/SlideoverExampleDisableOverlay.vue
@@ -0,0 +1,15 @@
+<script setup>
+const isOpen = ref(false)
+</script>
+
+<template>
+  <div>
+    <UButton label="Open" @click="isOpen = true" />
+
+    <USlideover v-model="isOpen" :overlay="false">
+      <div class="p-4 flex-1">
+        <Placeholder class="h-full" />
+      </div>
+    </USlideover>
+  </div>
+</template>
diff --git a/docs/components/content/examples/SlideoverExampleDisableTransition.vue b/docs/components/content/examples/SlideoverExampleDisableTransition.vue
new file mode 100644
index 00000000..b3ca92d7
--- /dev/null
+++ b/docs/components/content/examples/SlideoverExampleDisableTransition.vue
@@ -0,0 +1,15 @@
+<script setup>
+const isOpen = ref(false)
+</script>
+
+<template>
+  <div>
+    <UButton label="Open" @click="isOpen = true" />
+
+    <USlideover v-model="isOpen" :transition="false">
+      <div class="p-4 flex-1">
+        <Placeholder class="h-full" />
+      </div>
+    </USlideover>
+  </div>
+</template>
diff --git a/docs/components/content/examples/SlideoverExamplePreventClose.vue b/docs/components/content/examples/SlideoverExamplePreventClose.vue
new file mode 100644
index 00000000..68fdf4f4
--- /dev/null
+++ b/docs/components/content/examples/SlideoverExamplePreventClose.vue
@@ -0,0 +1,24 @@
+<script setup>
+const isOpen = ref(false)
+</script>
+
+<template>
+  <div>
+    <UButton label="Open" @click="isOpen = true" />
+
+    <USlideover v-model="isOpen" prevent-close>
+      <UCard class="flex flex-col flex-1" :ui="{ body: { base: 'flex-1' }, ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
+        <template #header>
+          <div class="flex items-center justify-between">
+            <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
+              Slideover
+            </h3>
+            <UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="isOpen = false" />
+          </div>
+        </template>
+
+        <Placeholder class="h-full" />
+      </UCard>
+    </USlideover>
+  </div>
+</template>
diff --git a/docs/content/6.overlays/1.modal.md b/docs/content/6.overlays/1.modal.md
index ce55f398..1b6baca6 100644
--- a/docs/content/6.overlays/1.modal.md
+++ b/docs/content/6.overlays/1.modal.md
@@ -68,6 +68,8 @@ const isOpen = ref(false)
 
 ### Disable overlay
 
+Set the `overlay` prop to `false` to disable it.
+
 ::component-example
 #default
 :modal-example-disable-overlay
@@ -94,6 +96,8 @@ const isOpen = ref(false)
 
 ### Disable transition
 
+Set the `transition` prop to `false` to disable it.
+
 ::component-example
 #default
 :modal-example-disable-transition
@@ -120,6 +124,8 @@ const isOpen = ref(false)
 
 ### Prevent close
 
+Use the `prevent-close` prop to disable the outside click alongside the `esc` keyboard shortcut.
+
 ::component-example
 #default
 :modal-example-prevent-close
@@ -153,6 +159,22 @@ const isOpen = ref(false)
 ```
 ::
 
+You can still handle the `esc` shortcut yourself by using our [defineShortcuts](/getting-started/shortcuts#defineshortcuts) composable.
+
+```vue
+<script setup>
+const isOpen = ref(false)
+
+defineShortcuts({
+  escape: {
+    usingInput: true,
+    whenever: [isOpen],
+    handler: () => { isOpen.value = false }
+  }
+})
+</script>
+```
+
 ## Props
 
 :component-props
diff --git a/docs/content/6.overlays/2.slideover.md b/docs/content/6.overlays/2.slideover.md
index 99c970cf..d4ad0b5e 100644
--- a/docs/content/6.overlays/2.slideover.md
+++ b/docs/content/6.overlays/2.slideover.md
@@ -8,9 +8,11 @@ headlessui:
 
 ## Usage
 
+Use a `v-model` to control the Slideover state.
+
 ::component-example
 #default
-:slideover-example
+:slideover-example-basic
 #code
 ```vue
 <script setup>
@@ -29,6 +31,149 @@ const isOpen = ref(false)
 ```
 ::
 
+You can put a [Card](/layout/card) component inside your Slideover to handle forms and take advantage of `header` and `footer` slots:
+
+::component-example
+#default
+:slideover-example-card
+
+#code
+```vue
+<script setup>
+const isOpen = ref(false)
+</script>
+
+<template>
+  <div>
+    <UButton label="Open" @click="isOpen = true" />
+
+    <USlideover v-model="isOpen">
+      <UCard class="flex flex-col flex-1" :ui="{ body: { base: 'flex-1' }, ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
+        <template #header>
+          <!-- Content -->
+        </template>
+
+        <!-- Content -->
+
+        <template #footer>
+          <!-- Content -->
+        </template>
+      </UCard>
+    </USlideover>
+  </div>
+</template>
+```
+::
+
+### Disable overlay
+
+Set the `overlay` prop to `false` to disable it.
+
+::component-example
+#default
+:slideover-example-disable-overlay
+
+#code
+```vue
+<script setup>
+const isOpen = ref(false)
+</script>
+
+<template>
+  <div>
+    <UButton label="Open" @click="isOpen = true" />
+
+    <USlideover v-model="isOpen" :overlay="false">
+      <div class="p-4 flex-1">
+        <Placeholder class="h-full" />
+      </div>
+    </USlideover>
+  </div>
+</template>
+```
+::
+
+### Disable transition
+
+Set the `transition` prop to `false` to disable it.
+
+::component-example
+#default
+:slideover-example-disable-transition
+
+#code
+```vue
+<script setup>
+const isOpen = ref(false)
+</script>
+
+<template>
+  <div>
+    <UButton label="Open" @click="isOpen = true" />
+
+    <USlideover v-model="isOpen" :transition="false">
+      <div class="p-4 flex-1">
+        <Placeholder class="h-full" />
+      </div>
+    </USlideover>
+  </div>
+</template>
+```
+::
+
+### Prevent close
+
+Use the `prevent-close` prop to disable the outside click alongside the `esc` keyboard shortcut.
+
+::component-example
+#default
+:slideover-example-prevent-close
+
+#code
+```vue
+<script setup>
+const isOpen = ref(false)
+</script>
+
+<template>
+  <div>
+    <UButton label="Open" @click="isOpen = true" />
+
+    <USlideover v-model="isOpen" prevent-close>
+      <UCard class="flex flex-col flex-1" :ui="{ body: { base: 'flex-1' }, ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
+        <template #header>
+          <div class="flex items-center justify-between">
+            <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
+              Slideover
+            </h3>
+            <UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="isOpen = false" />
+          </div>
+        </template>
+
+        <Placeholder class="h-full" />
+      </UCard>
+    </USlideover>
+  </div>
+</template>
+```
+::
+
+You can still handle the `esc` shortcut yourself by using our [defineShortcuts](/getting-started/shortcuts#defineshortcuts) composable.
+
+```vue
+<script setup>
+const isOpen = ref(false)
+
+defineShortcuts({
+  escape: {
+    usingInput: true,
+    whenever: [isOpen],
+    handler: () => { isOpen.value = false }
+  }
+})
+</script>
+```
+
 ## Props
 
 :component-props
diff --git a/src/runtime/components/overlays/Slideover.vue b/src/runtime/components/overlays/Slideover.vue
index 6da73ecb..2d186c9d 100644
--- a/src/runtime/components/overlays/Slideover.vue
+++ b/src/runtime/components/overlays/Slideover.vue
@@ -1,6 +1,6 @@
 <template>
   <TransitionRoot as="template" :appear="appear" :show="isOpen">
-    <HDialog :class="[ui.wrapper, { 'justify-end': side === 'right' }]" @close="close">
+    <HDialog :class="[ui.wrapper, { 'justify-end': side === 'right' }]" @close="(e) => !preventClose && close(e)">
       <TransitionChild v-if="overlay" as="template" :appear="appear" v-bind="ui.overlay.transition">
         <div :class="[ui.overlay.base, ui.overlay.background]" />
       </TransitionChild>
@@ -55,6 +55,10 @@ export default defineComponent({
       type: Boolean,
       default: true
     },
+    preventClose: {
+      type: Boolean,
+      default: false
+    },
     ui: {
       type: Object as PropType<Partial<typeof appConfig.ui.slideover>>,
       default: () => appConfig.ui.slideover