diff --git a/src/runtime/components/Drawer.vue b/src/runtime/components/Drawer.vue
index d1778d1976..0b6877d11c 100644
--- a/src/runtime/components/Drawer.vue
+++ b/src/runtime/components/Drawer.vue
@@ -109,7 +109,8 @@ const contentEvents = computed(() => {
 
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.drawer || {}) })({
   direction: props.direction,
-  inset: props.inset
+  inset: props.inset,
+  snapPoints: props.snapPoints && props.snapPoints.length > 0
 }))
 </script>
 
diff --git a/src/theme/drawer.ts b/src/theme/drawer.ts
index f3868d19a6..d2219488e1 100644
--- a/src/theme/drawer.ts
+++ b/src/theme/drawer.ts
@@ -35,6 +35,9 @@ export default (options: Required<ModuleOptions>) => ({
       true: {
         content: 'rounded-lg after:hidden overflow-hidden [--initial-transform:calc(100%+1.5rem)]'
       }
+    },
+    snapPoints: {
+      true: ''
     }
   },
   compoundVariants: [{
@@ -43,6 +46,12 @@ export default (options: Required<ModuleOptions>) => ({
       content: 'h-auto max-h-[96%]',
       handle: '!w-12 !h-1.5 mx-auto'
     }
+  }, {
+    direction: ['top', 'bottom'],
+    snapPoints: true,
+    class: {
+      content: 'h-full'
+    }
   }, {
     direction: ['right', 'left'],
     class: {
@@ -50,6 +59,13 @@ export default (options: Required<ModuleOptions>) => ({
       handle: '!h-12 !w-1.5 mt-auto mb-auto'
     }
   }, {
+    direction: ['right', 'left'],
+    snapPoints: true,
+    class: {
+      content: 'w-full'
+    }
+  },
+  {
     direction: 'top',
     inset: true,
     class: {