diff --git a/.changeset/nervous-moles-sit.md b/.changeset/nervous-moles-sit.md
new file mode 100644
index 00000000000..ee8a609c9b4
--- /dev/null
+++ b/.changeset/nervous-moles-sit.md
@@ -0,0 +1,6 @@
+---
+"@chakra-ui/modal": patch
+---
+
+Added "slideInTop" and "slideInLeft" options in motionPreset prop in modal
+component
diff --git a/packages/components/modal/src/modal-transition.tsx b/packages/components/modal/src/modal-transition.tsx
index 83bc04a1edd..1746e96d52f 100644
--- a/packages/components/modal/src/modal-transition.tsx
+++ b/packages/components/modal/src/modal-transition.tsx
@@ -6,7 +6,13 @@ import { forwardRef } from "react"
 export interface ModalTransitionProps
   extends Omit<HTMLMotionProps<"section">, "color" | "transition">,
     ChakraProps {
-  preset?: "slideInBottom" | "slideInRight" | "scale" | "none"
+  preset?:
+    | "slideInBottom"
+    | "slideInRight"
+    | "slideInTop"
+    | "slideInLeft"
+    | "scale"
+    | "none"
   motionProps?: HTMLMotionProps<"section">
 }
 
@@ -19,6 +25,14 @@ const transitions = {
     ...slideFadeConfig,
     custom: { offsetX: 16, reverse: true },
   },
+  slideInTop: {
+    ...slideFadeConfig,
+    custom: { offsetY: -16, reverse: true },
+  },
+  slideInLeft: {
+    ...slideFadeConfig,
+    custom: { offsetX: -16, reverse: true },
+  },
   scale: {
     ...scaleFadeConfig,
     custom: { initialScale: 0.95, reverse: true },
diff --git a/packages/components/modal/src/modal.tsx b/packages/components/modal/src/modal.tsx
index c663266f1df..d363f82374c 100644
--- a/packages/components/modal/src/modal.tsx
+++ b/packages/components/modal/src/modal.tsx
@@ -79,7 +79,13 @@ interface ModalOptions extends Pick<FocusLockProps, "lockFocusAcrossFrames"> {
 
 type ScrollBehavior = "inside" | "outside"
 
-type MotionPreset = "slideInBottom" | "slideInRight" | "scale" | "none"
+type MotionPreset =
+  | "slideInBottom"
+  | "slideInRight"
+  | "slideInTop"
+  | "slideInLeft"
+  | "scale"
+  | "none"
 
 export interface ModalProps
   extends UseModalProps,