diff --git a/.changeset/tender-parrots-juggle.md b/.changeset/tender-parrots-juggle.md
new file mode 100644
index 0000000..7a0d9b4
--- /dev/null
+++ b/.changeset/tender-parrots-juggle.md
@@ -0,0 +1,6 @@
+---
+"vaul-vue": minor
+"playground": minor
+---
+
+feat: Direction
diff --git a/packages/vaul-vue/src/DrawerContent.vue b/packages/vaul-vue/src/DrawerContent.vue
index 149d740..9a7103b 100644
--- a/packages/vaul-vue/src/DrawerContent.vue
+++ b/packages/vaul-vue/src/DrawerContent.vue
@@ -17,6 +17,7 @@ const {
   dismissible,
   keyboardIsOpen,
   closeDrawer,
+  direction,
 } = injectDrawerRootContext()
 
 const snapPointHeight = computed(() => {
@@ -61,6 +62,7 @@ watch(
   <DialogContent
     ref="drawerRef"
     vaul-drawer=""
+    :vaul-drawer-direction="direction"
     :vaul-drawer-visible="isVisible ? 'true' : 'false'"
     :style="{ '--snap-point-height': snapPointHeight }"
     @pointerdown="onPress"
diff --git a/packages/vaul-vue/src/DrawerRoot.vue b/packages/vaul-vue/src/DrawerRoot.vue
index 0194408..12b1dfc 100644
--- a/packages/vaul-vue/src/DrawerRoot.vue
+++ b/packages/vaul-vue/src/DrawerRoot.vue
@@ -24,6 +24,7 @@ const props = withDefaults(defineProps<DrawerRootProps>(), {
   nested: false,
   modal: true,
   scrollLockTimeout: SCROLL_LOCK_TIMEOUT,
+  direction: 'bottom',
 })
 
 const emit = defineEmits<DrawerRootEmits>()
@@ -96,18 +97,57 @@ defineExpose({
 <style>
 [vaul-drawer] {
   touch-action: none;
-  transform: translate3d(0, 100%, 0);
+  will-change: transform;
   transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1);
 }
 
-.vaul-dragging .vaul-scrollable {
+[vaul-drawer][vaul-drawer-direction='bottom'] {
+  transform: translate3d(0, 100%, 0);
+}
+
+[vaul-drawer][vaul-drawer-direction='top'] {
+  transform: translate3d(0, -100%, 0);
+}
+
+[vaul-drawer][vaul-drawer-direction='left'] {
+  transform: translate3d(-100%, 0, 0);
+}
+
+[vaul-drawer][vaul-drawer-direction='right'] {
+  transform: translate3d(100%, 0, 0);
+}
+
+.vaul-dragging .vaul-scrollable [vault-drawer-direction='top'] {
+  overflow-y: hidden !important;
+}
+.vaul-dragging .vaul-scrollable [vault-drawer-direction='bottom'] {
   overflow-y: hidden !important;
 }
 
-[vaul-drawer][vaul-drawer-visible='true'] {
+.vaul-dragging .vaul-scrollable [vault-drawer-direction='left'] {
+  overflow-x: hidden !important;
+}
+
+.vaul-dragging .vaul-scrollable [vault-drawer-direction='right'] {
+  overflow-x: hidden !important;
+}
+
+[vaul-drawer][vaul-drawer-visible='true'][vaul-drawer-direction='top'] {
+  transform: translate3d(0, var(--snap-point-height, 0), 0);
+}
+
+[vaul-drawer][vaul-drawer-visible='true'][vaul-drawer-direction='bottom'] {
   transform: translate3d(0, var(--snap-point-height, 0), 0);
 }
 
+[vaul-drawer][vaul-drawer-visible='true'][vaul-drawer-direction='left'] {
+  transform: translate3d(var(--snap-point-height, 0), 0, 0);
+}
+
+[vaul-drawer][vaul-drawer-visible='true'][vaul-drawer-direction='right'] {
+  transform: translate3d(var(--snap-point-height, 0), 0, 0);
+}
+
 [vaul-overlay] {
   opacity: 0;
   transition: opacity 0.5s cubic-bezier(0.32, 0.72, 0, 1);
@@ -120,14 +160,42 @@ defineExpose({
 [vaul-drawer]::after {
   content: '';
   position: absolute;
-  top: 100%;
   background: inherit;
   background-color: inherit;
+}
+
+[vaul-drawer][vaul-drawer-direction='top']::after {
+  top: initial;
+  bottom: 100%;
+  left: 0;
+  right: 0;
+  height: 200%;
+}
+
+[vaul-drawer][vaul-drawer-direction='bottom']::after {
+  top: 100%;
+  bottom: initial;
   left: 0;
   right: 0;
   height: 200%;
 }
 
+[vaul-drawer][vaul-drawer-direction='left']::after {
+  left: initial;
+  right: 100%;
+  top: 0;
+  bottom: 0;
+  width: 200%;
+}
+
+[vaul-drawer][vaul-drawer-direction='right']::after {
+  left: 100%;
+  right: initial;
+  top: 0;
+  bottom: 0;
+  width: 200%;
+}
+
 [vaul-overlay][vaul-snap-points='true']:not([vaul-snap-points-overlay='true']):not([data-state='closed']) {
   opacity: 0;
 }
diff --git a/packages/vaul-vue/src/context.ts b/packages/vaul-vue/src/context.ts
index bda8575..aa28825 100644
--- a/packages/vaul-vue/src/context.ts
+++ b/packages/vaul-vue/src/context.ts
@@ -1,5 +1,6 @@
 import type { ComponentPublicInstance, Ref } from 'vue'
 import { createContext } from 'radix-vue'
+import type { DrawerDirection } from './types'
 
 export interface DrawerRootContext {
   open: Ref<boolean>
@@ -15,10 +16,11 @@ export interface DrawerRootContext {
   snapPoints: Ref<(number | string)[] | undefined>
   keyboardIsOpen: Ref<boolean>
   activeSnapPoint: Ref<number | string | null | undefined>
-  pointerStartY: Ref<number>
+  pointerStart: Ref<number>
   dismissible: Ref<boolean>
   drawerHeightRef: Ref<number>
   snapPointsOffset: Ref<number[]>
+  direction: Ref<DrawerDirection>
   onPress: (event: PointerEvent) => void
   onDrag: (event: PointerEvent) => void
   onRelease: (event: PointerEvent) => void
diff --git a/packages/vaul-vue/src/controls.ts b/packages/vaul-vue/src/controls.ts
index 0022c1b..6a78242 100644
--- a/packages/vaul-vue/src/controls.ts
+++ b/packages/vaul-vue/src/controls.ts
@@ -1,11 +1,12 @@
 import { computed, onUnmounted, ref, watch, watchEffect } from 'vue'
 import type { ComponentPublicInstance, Ref } from 'vue'
 import { isClient } from '@vueuse/core'
-import { dampenValue, getTranslateY, reset, set } from './helpers'
+import { dampenValue, getTranslate, isVertical, reset, set } from './helpers'
 import { TRANSITIONS, VELOCITY_THRESHOLD } from './constants'
 import { useSnapPoints } from './useSnapPoints'
 import { usePositionFixed } from './usePositionFixed'
 import type { DrawerRootContext } from './context'
+import type { DrawerDirection } from './types'
 
 export const CLOSE_THRESHOLD = 0.25
 
@@ -40,6 +41,7 @@ export type DrawerRootProps = {
   open?: boolean
   defaultOpen?: boolean
   nested?: boolean
+  direction?: DrawerDirection
 } & (WithFadeFromProps | WithoutFadeFromProps)
 
 export interface UseDrawerProps {
@@ -54,6 +56,7 @@ export interface UseDrawerProps {
   fadeFromIndex: Ref<number | undefined>
   closeThreshold: Ref<number>
   scrollLockTimeout: Ref<number>
+  direction: Ref<DrawerDirection>
 }
 
 export interface DrawerRootEmits {
@@ -82,7 +85,7 @@ export interface Drawer {
   isAllowedToDrag: Ref<boolean>
   snapPoints: Ref<(number | string)[] | undefined>
   activeSnapPoint: Ref<number | string | null>
-  pointerStartY: Ref<number>
+  pointerStart: Ref<number>
   dismissible: Ref<boolean>
   drawerHeightRef: Ref<number>
   snapPointsOffset: Ref<number[]>
@@ -112,6 +115,7 @@ export function useDrawer(props: UseDrawerProps & DialogEmitHandlers): DrawerRoo
     closeThreshold,
     activeSnapPoint,
     fadeFromIndex,
+    direction,
   } = props
 
   const isOpen = ref(open.value ?? false)
@@ -130,7 +134,7 @@ export function useDrawer(props: UseDrawerProps & DialogEmitHandlers): DrawerRoo
 
   const nestedOpenChangeTimer = ref<number | null>(null)
 
-  const pointerStartY = ref(0)
+  const pointerStart = ref(0)
   const keyboardIsOpen = ref(false)
 
   const previousDiffFromInitial = ref(0)
@@ -169,6 +173,7 @@ export function useDrawer(props: UseDrawerProps & DialogEmitHandlers): DrawerRoo
     fadeFromIndex,
     overlayRef,
     onSnapPointChange,
+    direction,
   })
 
   function onSnapPointChange(activeSnapPointIndex: number, snapPointsOffset: number[]) {
@@ -188,23 +193,28 @@ export function useDrawer(props: UseDrawerProps & DialogEmitHandlers): DrawerRoo
     return (window.innerWidth - WINDOW_TOP_OFFSET) / window.innerWidth
   }
 
-  function shouldDrag(el: EventTarget | null, isDraggingDown: boolean) {
+  function shouldDrag(el: EventTarget | null, isDraggingInDirection: boolean) {
     if (!el)
       return false
     let element = el as HTMLElement
     const highlightedText = window.getSelection()?.toString()
-    const swipeAmount = drawerRef.value ? getTranslateY(drawerRef.value.$el) : null
+    const swipeAmount = drawerRef.value ? getTranslate(drawerRef.value.$el, direction.value) : null
     const date = new Date()
 
     if (element.hasAttribute('data-vaul-no-drag') || element.closest('[data-vaul-no-drag]'))
       return false
 
+    if (direction.value === 'right' || direction.value === 'left')
+      return true
+
     // Allow scrolling when animating
     if (openTime.value && date.getTime() - openTime.value.getTime() < 500)
       return false
 
-    if (swipeAmount && swipeAmount > 0)
-      return true
+    if (swipeAmount !== null) {
+      if (direction.value === 'bottom' ? swipeAmount > 0 : swipeAmount < 0)
+        return true
+    }
 
     // Don't drag if there's highlighted text
     if (highlightedText && highlightedText.length > 0)
@@ -220,7 +230,7 @@ export function useDrawer(props: UseDrawerProps & DialogEmitHandlers): DrawerRoo
       return false
     }
 
-    if (isDraggingDown) {
+    if (isDraggingInDirection) {
       lastTimeDragPrevented.value = date
 
       // We are dragging down so we should allow scrolling
@@ -258,26 +268,44 @@ export function useDrawer(props: UseDrawerProps & DialogEmitHandlers): DrawerRoo
     isDragging.value = true
     dragStartTime.value = new Date()
 
-    // iOS doesn't trigger mouseUp after scrolling so we need to listen to touched in order to disallow dragging
-    // if (isIOS()) {
-    //   window.addEventListener('touchend', () => (isAllowedToDrag.value = false), { once: true });
-    // }
-    // Ensure we maintain correct pointer capture even when going outside of the drawer
-    ; (event.target as HTMLElement).setPointerCapture(event.pointerId)
-    pointerStartY.value = event.screenY
+    ;(event.target as HTMLElement).setPointerCapture(event.pointerId)
+    pointerStart.value = isVertical(direction.value) ? event.clientY : event.clientX
   }
 
   function onDrag(event: PointerEvent) {
+    if (!drawerRef.value)
+      return
+
     // We need to know how much of the drawer has been dragged in percentages so that we can transform background accordingly
     if (isDragging.value) {
-      const draggedDistance = pointerStartY.value - event.screenY
-      const isDraggingDown = draggedDistance > 0
+      const directionMultiplier = direction.value === 'bottom' || direction.value === 'right' ? 1 : -1
+      const draggedDistance
+        = (pointerStart.value - (isVertical(direction.value) ? event.clientY : event.clientX)) * directionMultiplier
+      const isDraggingInDirection = draggedDistance > 0
+
+      // Pre condition for disallowing dragging in the close direction.
+      const noCloseSnapPointsPreCondition = snapPoints.value && !dismissible.value && !isDraggingInDirection
 
       // Disallow dragging down to close when first snap point is the active one and dismissible prop is set to false.
-      if (snapPoints.value && activeSnapPointIndex.value === 0 && !dismissible.value && !isDraggingDown)
+      if (noCloseSnapPointsPreCondition && activeSnapPointIndex.value === 0)
+        return
+
+      // We need to capture last time when drag with scroll was triggered and have a timeout between
+      const absDraggedDistance = Math.abs(draggedDistance)
+      const wrapper = document.querySelector('[vaul-drawer-wrapper]')
+
+      // Calculate the percentage dragged, where 1 is the closed position
+      let percentageDragged = absDraggedDistance / drawerHeightRef.value
+      const snapPointPercentageDragged = getSnapPointsPercentageDragged(absDraggedDistance, isDraggingInDirection)
+
+      if (snapPointPercentageDragged !== null)
+        percentageDragged = snapPointPercentageDragged
+
+      // Disallow close dragging beyond the smallest snap point.
+      if (noCloseSnapPointsPreCondition && percentageDragged >= 1)
         return
 
-      if (!isAllowedToDrag.value && !shouldDrag(event.target, isDraggingDown))
+      if (!isAllowedToDrag.value && !shouldDrag(event.target, isDraggingInDirection))
         return
       drawerRef?.value?.$el.classList.add(DRAG_CLASS)
       // If shouldDrag gave true once after pressing down on the drawer, we set isAllowedToDrag to true and it will remain true until we let go, there's no reason to disable dragging mid way, ever, and that's the solution to it
@@ -294,28 +322,18 @@ export function useDrawer(props: UseDrawerProps & DialogEmitHandlers): DrawerRoo
         onDragSnapPoints({ draggedDistance })
 
       // Run this only if snapPoints are not defined or if we are at the last snap point (highest one)
-      if (isDraggingDown && !snapPoints.value) {
+      if (isDraggingInDirection && !snapPoints.value) {
         const dampenedDraggedDistance = dampenValue(draggedDistance)
 
+        const translateValue = Math.min(dampenedDraggedDistance * -1, 0) * directionMultiplier
         set(drawerRef.value?.$el, {
-          transform: `translate3d(0, ${Math.min(dampenedDraggedDistance * -1, 0)}px, 0)`,
+          transform: isVertical(direction.value)
+            ? `translate3d(0, ${translateValue}px, 0)`
+            : `translate3d(${translateValue}px, 0, 0)`,
         })
         return
       }
 
-      // We need to capture last time when drag with scroll was triggered and have a timeout between
-      const absDraggedDistance = Math.abs(draggedDistance)
-      const wrapper = document.querySelector('[vaul-drawer-wrapper]')
-
-      let percentageDragged = absDraggedDistance / drawerHeightRef.value
-      const snapPointPercentageDragged = getSnapPointsPercentageDragged(
-        absDraggedDistance,
-        isDraggingDown,
-      )
-
-      if (snapPointPercentageDragged !== null)
-        percentageDragged = snapPointPercentageDragged
-
       const opacityValue = 1 - percentageDragged
 
       if (
@@ -339,13 +357,15 @@ export function useDrawer(props: UseDrawerProps & DialogEmitHandlers): DrawerRoo
         const scaleValue = Math.min(getScale() + percentageDragged * (1 - getScale()), 1)
         const borderRadiusValue = 8 - percentageDragged * 8
 
-        const translateYValue = Math.max(0, 14 - percentageDragged * 14)
+        const translateValue = Math.max(0, 14 - percentageDragged * 14)
 
         set(
           wrapper,
           {
             borderRadius: `${borderRadiusValue}px`,
-            transform: `scale(${scaleValue}) translate3d(0, ${translateYValue}px, 0)`,
+            transform: isVertical(direction.value)
+              ? `scale(${scaleValue}) translate3d(0, ${translateValue}px, 0)`
+              : `scale(${scaleValue}) translate3d(${translateValue}px, 0, 0)`,
             transition: 'none',
           },
           true,
@@ -353,8 +373,12 @@ export function useDrawer(props: UseDrawerProps & DialogEmitHandlers): DrawerRoo
       }
 
       if (!snapPoints.value) {
+        const translateValue = absDraggedDistance * directionMultiplier
+
         set(drawerRef.value?.$el, {
-          transform: `translate3d(0, ${absDraggedDistance}px, 0)`,
+          transform: isVertical(direction.value)
+            ? `translate3d(0, ${translateValue}px, 0)`
+            : `translate3d(${translateValue}px, 0, 0)`,
         })
       }
     }
@@ -364,7 +388,7 @@ export function useDrawer(props: UseDrawerProps & DialogEmitHandlers): DrawerRoo
     if (!drawerRef.value)
       return
     const wrapper = document.querySelector('[vaul-drawer-wrapper]')
-    const currentSwipeAmount = getTranslateY(drawerRef.value.$el)
+    const currentSwipeAmount = getTranslate(drawerRef.value.$el, direction.value)
 
     set(drawerRef.value.$el, {
       transform: 'translate3d(0, 0, 0)',
@@ -383,8 +407,15 @@ export function useDrawer(props: UseDrawerProps & DialogEmitHandlers): DrawerRoo
         {
           borderRadius: `${BORDER_RADIUS}px`,
           overflow: 'hidden',
-          transform: `scale(${getScale()}) translate3d(0, calc(env(safe-area-inset-top) + 14px), 0)`,
-          transformOrigin: 'top',
+          ...(isVertical(direction.value)
+            ? {
+                transform: `scale(${getScale()}) translate3d(0, calc(env(safe-area-inset-top) + 14px), 0)`,
+                transformOrigin: 'top',
+              }
+            : {
+                transform: `scale(${getScale()}) translate3d(calc(env(safe-area-inset-top) + 14px), 0, 0)`,
+                transformOrigin: 'left',
+              }),
           transitionProperty: 'transform, border-radius',
           transitionDuration: `${TRANSITIONS.DURATION}s`,
           transitionTimingFunction: `cubic-bezier(${TRANSITIONS.EASE.join(',')})`,
@@ -400,7 +431,9 @@ export function useDrawer(props: UseDrawerProps & DialogEmitHandlers): DrawerRoo
 
     // emitClose()
     set(drawerRef.value.$el, {
-      transform: `translate3d(0, 100%, 0)`,
+      transform: isVertical(direction.value)
+        ? `translate3d(0, ${direction.value === 'bottom' ? '100%' : '-100%'}, 0)`
+        : `translate3d(${direction.value === 'right' ? '100%' : '-100%'}, 0, 0)`,
       transition: `transform ${TRANSITIONS.DURATION}s cubic-bezier(${TRANSITIONS.EASE.join(',')})`,
     })
 
@@ -441,16 +474,12 @@ export function useDrawer(props: UseDrawerProps & DialogEmitHandlers): DrawerRoo
   function onRelease(event: PointerEvent) {
     if (!isDragging.value || !drawerRef.value)
       return
-    // TODO use-prevent-scroll
-    // if (isAllowedToDrag.value && isInput(event.target as HTMLElement)) {
-    //   // If we were just dragging, prevent focusing on inputs etc. on release
-    //   (event.target as HTMLInputElement).blur();
-    // }
+
     drawerRef.value.$el.classList.remove(DRAG_CLASS)
     isAllowedToDrag.value = false
     isDragging.value = false
     dragEndTime.value = new Date()
-    const swipeAmount = getTranslateY(drawerRef.value.$el)
+    const swipeAmount = getTranslate(drawerRef.value.$el, direction.value)
 
     if (!shouldDrag(event.target, false) || !swipeAmount || Number.isNaN(swipeAmount))
       return
@@ -459,7 +488,7 @@ export function useDrawer(props: UseDrawerProps & DialogEmitHandlers): DrawerRoo
       return
 
     const timeTaken = dragEndTime.value.getTime() - dragStartTime.value.getTime()
-    const distMoved = pointerStartY.value - event.screenY
+    const distMoved = pointerStart.value - (isVertical(direction.value) ? event.clientY : event.clientX)
     const velocity = Math.abs(distMoved) / timeTaken
 
     if (velocity > 0.05) {
@@ -472,8 +501,10 @@ export function useDrawer(props: UseDrawerProps & DialogEmitHandlers): DrawerRoo
     }
 
     if (snapPoints.value) {
+      const directionMultiplier = direction.value === 'bottom' || direction.value === 'right' ? 1 : -1
+
       onReleaseSnapPoints({
-        draggedDistance: distMoved,
+        draggedDistance: distMoved * directionMultiplier,
         closeDrawer,
         velocity,
         dismissible: dismissible.value,
@@ -483,7 +514,7 @@ export function useDrawer(props: UseDrawerProps & DialogEmitHandlers): DrawerRoo
     }
 
     // Moved upwards, don't do anything
-    if (distMoved > 0) {
+    if (direction.value === 'bottom' || direction.value === 'right' ? distMoved > 0 : distMoved < 0) {
       resetDrawer()
       emitRelease(true)
       return
@@ -550,8 +581,15 @@ export function useDrawer(props: UseDrawerProps & DialogEmitHandlers): DrawerRoo
       set(wrapper, {
         borderRadius: `${BORDER_RADIUS}px`,
         overflow: 'hidden',
-        transform: `scale(${getScale()}) translate3d(0, calc(env(safe-area-inset-top) + 14px), 0)`,
-        transformOrigin: 'top',
+        ...(isVertical(direction.value)
+          ? {
+              transform: `scale(${getScale()}) translate3d(0, calc(env(safe-area-inset-top) + 14px), 0)`,
+              transformOrigin: 'top',
+            }
+          : {
+              transform: `scale(${getScale()}) translate3d(calc(env(safe-area-inset-top) + 14px), 0, 0)`,
+              transformOrigin: 'left',
+            }),
         transitionProperty: 'transform, border-radius',
         transitionDuration: `${TRANSITIONS.DURATION}s`,
         transitionTimingFunction: `cubic-bezier(${TRANSITIONS.EASE.join(',')})`,
@@ -584,9 +622,12 @@ export function useDrawer(props: UseDrawerProps & DialogEmitHandlers): DrawerRoo
 
     if (!o && drawerRef.value?.$el) {
       nestedOpenChangeTimer.value = window.setTimeout(() => {
+        const translateValue = getTranslate(drawerRef.value?.$el, direction.value)
         set(drawerRef.value?.$el, {
           transition: 'none',
-          transform: `translate3d(0, ${getTranslateY(drawerRef.value?.$el as HTMLElement)}px, 0)`,
+          transform: isVertical(direction.value)
+            ? `translate3d(0, ${translateValue}px, 0)`
+            : `translate3d(${translateValue}px, 0, 0)`,
         })
       }, 500)
     }
@@ -596,26 +637,30 @@ export function useDrawer(props: UseDrawerProps & DialogEmitHandlers): DrawerRoo
     if (percentageDragged < 0)
       return
 
-    const initialScale = (window.innerWidth - NESTED_DISPLACEMENT) / window.innerWidth
+    const initialDim = isVertical(direction.value) ? window.innerHeight : window.innerWidth
+    const initialScale = (initialDim - NESTED_DISPLACEMENT) / initialDim
     const newScale = initialScale + percentageDragged * (1 - initialScale)
-    const newY = -NESTED_DISPLACEMENT + percentageDragged * NESTED_DISPLACEMENT
+    const newTranslate = -NESTED_DISPLACEMENT + percentageDragged * NESTED_DISPLACEMENT
 
     set(drawerRef.value?.$el, {
-      transform: `scale(${newScale}) translate3d(0, ${newY}px, 0)`,
+      transform: isVertical(direction.value)
+        ? `scale(${newScale}) translate3d(0, ${newTranslate}px, 0)`
+        : `scale(${newScale}) translate3d(${newTranslate}px, 0, 0)`,
       transition: 'none',
     })
   }
 
   function onNestedRelease(o: boolean) {
-    const scale = o ? (window.innerWidth - NESTED_DISPLACEMENT) / window.innerWidth : 1
-    const y = o ? -NESTED_DISPLACEMENT : 0
+    const dim = isVertical(direction.value) ? window.innerHeight : window.innerWidth
+    const scale = o ? (dim - NESTED_DISPLACEMENT) / dim : 1
+    const translate = o ? -NESTED_DISPLACEMENT : 0
 
     if (o) {
       set(drawerRef.value?.$el, {
-        transition: `transform ${TRANSITIONS.DURATION}s cubic-bezier(${TRANSITIONS.EASE.join(
-          ',',
-        )})`,
-        transform: `scale(${scale}) translate3d(0, ${y}px, 0)`,
+        transition: `transform ${TRANSITIONS.DURATION}s cubic-bezier(${TRANSITIONS.EASE.join(',')})`,
+        transform: isVertical(direction.value)
+          ? `scale(${scale}) translate3d(0, ${translate}px, 0)`
+          : `scale(${scale}) translate3d(${translate}px, 0, 0)`,
       })
     }
   }
@@ -635,9 +680,10 @@ export function useDrawer(props: UseDrawerProps & DialogEmitHandlers): DrawerRoo
     isAllowedToDrag,
     snapPoints,
     activeSnapPoint,
-    pointerStartY,
+    pointerStart,
     dismissible,
     snapPointsOffset,
+    direction,
     shouldFade,
     fadeFromIndex,
     shouldScaleBackground,
diff --git a/packages/vaul-vue/src/helpers.ts b/packages/vaul-vue/src/helpers.ts
index e9147c2..5ea0843 100644
--- a/packages/vaul-vue/src/helpers.ts
+++ b/packages/vaul-vue/src/helpers.ts
@@ -1,3 +1,5 @@
+import type { DrawerDirection } from './types'
+
 interface Style {
   [key: string]: string
 }
@@ -58,18 +60,34 @@ export function reset(el: Element | HTMLElement | null, prop?: string) {
   }
 }
 
-export function getTranslateY(element: HTMLElement): number | null {
+export function getTranslate(element: HTMLElement, direction: DrawerDirection): number | null {
   const style = window.getComputedStyle(element)
   const transform
     // @ts-expect-error some custom style only exist in certain browser
     = style.transform || style.webkitTransform || style.mozTransform
   let mat = transform.match(/^matrix3d\((.+)\)$/)
-  if (mat)
-    return Number.parseFloat(mat[1].split(', ')[13])
+  if (mat) {
+    // https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/matrix3d
+    return Number.parseFloat(mat[1].split(', ')[isVertical(direction) ? 13 : 12])
+  }
+  // https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/matrix
   mat = transform.match(/^matrix\((.+)\)$/)
-  return mat ? Number.parseFloat(mat[1].split(', ')[5]) : null
+  return mat ? Number.parseFloat(mat[1].split(', ')[isVertical(direction) ? 5 : 4]) : null
 }
 
 export function dampenValue(v: number) {
   return 8 * (Math.log(v + 1) - 2)
 }
+
+export function isVertical(direction: DrawerDirection) {
+  switch (direction) {
+    case 'top':
+    case 'bottom':
+      return true
+    case 'left':
+    case 'right':
+      return false
+    default:
+      return direction satisfies never
+  }
+}
diff --git a/packages/vaul-vue/src/index.ts b/packages/vaul-vue/src/index.ts
index 3d57325..2b85faf 100644
--- a/packages/vaul-vue/src/index.ts
+++ b/packages/vaul-vue/src/index.ts
@@ -8,6 +8,11 @@ export type {
   DrawerRootProps,
 } from './controls'
 
+export type {
+  SnapPoint,
+  DrawerDirection,
+} from './types'
+
 export {
   DrawerRoot,
   DrawerRootNested,
diff --git a/packages/vaul-vue/src/types.ts b/packages/vaul-vue/src/types.ts
index a7ea572..2fa7ad4 100644
--- a/packages/vaul-vue/src/types.ts
+++ b/packages/vaul-vue/src/types.ts
@@ -2,3 +2,5 @@ export interface SnapPoint {
   fraction: number
   height: number
 }
+
+export type DrawerDirection = 'top' | 'bottom' | 'left' | 'right'
diff --git a/packages/vaul-vue/src/useSnapPoints.ts b/packages/vaul-vue/src/useSnapPoints.ts
index 37baaee..ad73b37 100644
--- a/packages/vaul-vue/src/useSnapPoints.ts
+++ b/packages/vaul-vue/src/useSnapPoints.ts
@@ -1,6 +1,7 @@
 import { type ComponentPublicInstance, type Ref, computed, nextTick, watch } from 'vue'
-import { set } from './helpers'
+import { isVertical, set } from './helpers'
 import { TRANSITIONS, VELOCITY_THRESHOLD } from './constants'
+import type { DrawerDirection } from './types'
 
 interface useSnapPointsProps {
   activeSnapPoint: Ref<number | string | null | undefined>
@@ -9,6 +10,7 @@ interface useSnapPointsProps {
   drawerRef: Ref<ComponentPublicInstance | null>
   overlayRef: Ref<ComponentPublicInstance | null>
   onSnapPointChange: (activeSnapPointIndex: number, snapPointsOffset: number[]) => void
+  direction: Ref<DrawerDirection>
 }
 
 export function useSnapPoints({
@@ -18,6 +20,7 @@ export function useSnapPoints({
   overlayRef,
   fadeFromIndex,
   onSnapPointChange,
+  direction,
 }: useSnapPointsProps) {
   const isLastSnapPoint = computed(
     () =>
@@ -50,12 +53,20 @@ export function useSnapPoints({
         if (isPx)
           snapPointAsNumber = Number.parseInt(snapPoint, 10)
 
-        const height = isPx ? snapPointAsNumber : hasWindow ? snapPoint * window.innerHeight : 0
+        if (isVertical(direction.value)) {
+          const height = isPx ? snapPointAsNumber : hasWindow ? snapPoint * window.innerHeight : 0
+
+          if (hasWindow)
+            return direction.value === 'bottom' ? window.innerHeight - height : -window.innerHeight + height
+
+          return height
+        }
+        const width = isPx ? snapPointAsNumber : hasWindow ? snapPoint * window.innerWidth : 0
 
         if (hasWindow)
-          return window.innerHeight - height
+          return direction.value === 'right' ? window.innerWidth - width : -window.innerWidth + width
 
-        return height
+        return width
       }) ?? [],
   )
 
@@ -65,16 +76,15 @@ export function useSnapPoints({
       : null,
   )
 
-  const snapToPoint = (height: number) => {
-    const newSnapPointIndex
-      = snapPointsOffset.value?.findIndex(snapPointHeight => snapPointHeight === height) ?? null
+  const snapToPoint = (dimension: number) => {
+    const newSnapPointIndex = snapPointsOffset.value?.findIndex(snapPointDim => snapPointDim === dimension) ?? null
 
     // nextTick to allow el to be mounted before setting it.
     nextTick(() => {
       onSnapPointChange(newSnapPointIndex, snapPointsOffset.value)
       set(drawerRef.value?.$el, {
         transition: `transform ${TRANSITIONS.DURATION}s cubic-bezier(${TRANSITIONS.EASE.join(',')})`,
-        transform: `translate3d(0, ${height}px, 0)`,
+        transform: isVertical(direction.value) ? `translate3d(0, ${dimension}px, 0)` : `translate3d(${dimension}px, 0, 0)`,
       })
     })
 
@@ -133,7 +143,10 @@ export function useSnapPoints({
     if (fadeFromIndex === undefined)
       return
 
-    const currentPosition = (activeSnapPointOffset.value ?? 0) - draggedDistance
+    const currentPosition
+    = direction.value === 'bottom' || direction.value === 'right'
+      ? (activeSnapPointOffset.value ?? 0) - draggedDistance
+      : (activeSnapPointOffset.value ?? 0) + draggedDistance
     const isOverlaySnapPoint = activeSnapPointIndex.value === (fadeFromIndex.value ?? 0) - 1
     const isFirst = activeSnapPointIndex.value === 0
     const hasDraggedUp = draggedDistance > 0
@@ -164,7 +177,8 @@ export function useSnapPoints({
       return Math.abs(curr - currentPosition) < Math.abs(prev - currentPosition) ? curr : prev
     })
 
-    if (velocity > VELOCITY_THRESHOLD && Math.abs(draggedDistance) < window.innerHeight * 0.4) {
+    const dim = isVertical(direction.value) ? window.innerHeight : window.innerWidth
+    if (velocity > VELOCITY_THRESHOLD && Math.abs(draggedDistance) < dim * 0.4) {
       const dragDirection = hasDraggedUp ? 1 : -1 // 1 = up, -1 = down
 
       // Don't do anything if we swipe upwards while being on the last snap point
@@ -189,10 +203,20 @@ export function useSnapPoints({
   function onDrag({ draggedDistance }: { draggedDistance: number }) {
     if (activeSnapPointOffset.value === null)
       return
-    const newYValue = activeSnapPointOffset.value - draggedDistance
+    const newValue
+    = direction.value === 'bottom' || direction.value === 'right'
+      ? (activeSnapPointOffset.value ?? 0) - draggedDistance
+      : (activeSnapPointOffset.value ?? 0) + draggedDistance
+
+    // Don't do anything if we exceed the last(biggest) snap point
+    if ((direction.value === 'bottom' || direction.value === 'right') && newValue < snapPointsOffset.value[snapPointsOffset.value.length - 1])
+      return
+
+    if ((direction.value === 'top' || direction.value === 'left') && newValue > snapPointsOffset.value[snapPointsOffset.value.length - 1])
+      return
 
     set(drawerRef.value?.$el, {
-      transform: `translate3d(0, ${newYValue}px, 0)`,
+      transform: isVertical(direction.value) ? `translate3d(0, ${newValue}px, 0)` : `translate3d(${newValue}px, 0, 0)`,
     })
   }
 
diff --git a/playground/e2e/direction.spec.ts b/playground/e2e/direction.spec.ts
new file mode 100644
index 0000000..468427f
--- /dev/null
+++ b/playground/e2e/direction.spec.ts
@@ -0,0 +1,109 @@
+import { expect, test } from '@playwright/test'
+import { ANIMATION_DURATION } from './constants'
+import { openDrawer } from './helpers'
+
+test.describe('Direction tests', () => {
+  test.describe('direction - bottom (default)', () => {
+    test.beforeEach(async ({ page }) => {
+      await page.goto('/test/direction')
+    })
+
+    test('should close when dragged down', async ({ page }) => {
+      await openDrawer(page)
+      await page.hover('[vaul-drawer]')
+      await page.mouse.down()
+      await page.mouse.move(0, 600)
+      await page.mouse.up()
+      await page.waitForTimeout(ANIMATION_DURATION)
+      await expect(page.getByTestId('content')).not.toBeVisible()
+    })
+
+    test('should not close when dragged up', async ({ page }) => {
+      await openDrawer(page)
+      await page.hover('[vaul-drawer]')
+      await page.mouse.down()
+      await page.mouse.move(0, -600)
+      await page.mouse.up()
+      await page.waitForTimeout(ANIMATION_DURATION)
+      await expect(page.getByTestId('content')).toBeVisible()
+    })
+  })
+
+  test.describe('direction - left', () => {
+    test.beforeEach(async ({ page }) => {
+      await page.goto('/test/direction?direction=left')
+    })
+
+    test('should close when dragged left', async ({ page }) => {
+      await openDrawer(page)
+      await page.hover('[vaul-drawer]')
+      await page.mouse.down()
+      await page.mouse.move(200, 0)
+      await page.mouse.up()
+      await page.waitForTimeout(ANIMATION_DURATION)
+      await expect(page.getByTestId('content')).not.toBeVisible()
+    })
+
+    test('should not close when dragged right', async ({ page }) => {
+      await openDrawer(page)
+      await page.hover('[vaul-drawer]')
+      await page.mouse.down()
+      await page.mouse.move(800, 0)
+      await page.mouse.up()
+      await page.waitForTimeout(ANIMATION_DURATION)
+      await expect(page.getByTestId('content')).toBeVisible()
+    })
+  })
+
+  test.describe('direction - right', () => {
+    test.beforeEach(async ({ page }) => {
+      await page.goto('/test/direction?direction=right')
+    })
+
+    test('should close when dragged right', async ({ page }) => {
+      await openDrawer(page)
+      await page.hover('[vaul-drawer]')
+      await page.mouse.down()
+      await page.mouse.move(1200, 0)
+      await page.mouse.up()
+      await page.waitForTimeout(ANIMATION_DURATION)
+      await expect(page.getByTestId('content')).not.toBeVisible()
+    })
+
+    test('should not close when dragged left', async ({ page }) => {
+      await openDrawer(page)
+      await page.hover('[vaul-drawer]')
+      await page.mouse.down()
+      await page.mouse.move(-1200, 0)
+      await page.mouse.up()
+      await page.waitForTimeout(ANIMATION_DURATION)
+      await expect(page.getByTestId('content')).toBeVisible()
+    })
+  })
+
+  test.describe('direction - top', () => {
+    test.beforeEach(async ({ page }) => {
+      await page.goto('/test/direction?direction=top')
+    })
+
+    test('should close when dragged top', async ({ page }) => {
+      await openDrawer(page)
+      await page.hover('[vaul-drawer]')
+      await page.mouse.down()
+      await page.mouse.move(0, 100)
+      await page.mouse.up()
+      await page.waitForTimeout(ANIMATION_DURATION)
+      await expect(page.getByTestId('content')).not.toBeVisible()
+    })
+
+    test('should not close when dragged down', async ({ page }) => {
+      await openDrawer(page)
+      await page.hover('[vaul-drawer]')
+      await page.mouse.down()
+      await page.mouse.move(0, 600)
+      await page.mouse.up()
+      await page.waitForTimeout(ANIMATION_DURATION)
+      await expect(page.getByTestId('content')).toBeVisible()
+    })
+  })
+})
diff --git a/playground/src/components/DrawerContent.vue b/playground/src/components/DrawerContent.vue
new file mode 100644
index 0000000..962bde2
--- /dev/null
+++ b/playground/src/components/DrawerContent.vue
@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { DrawerContent, type DrawerDirection } from 'vaul-vue'
+
+const props = withDefaults(defineProps<{
+  direction: DrawerDirection
+}>(), {
+  direction: 'bottom',
+})
+</script>
+
+<template>
+  <DrawerContent
+    data-testid="content"
+    class="bg-zinc-100 flex fixed p-6"
+    :class="{
+      'rounded-t-[10px] flex-col h-[50%] bottom-0 left-0 right-0': direction === 'bottom',
+      'rounded-b-[10px] flex-col h-[50%] top-0 left-0 right-0': direction === 'top',
+      'rounded-r-[10px] flex-row w-[50%] left-0 top-0 bottom-0': direction === 'left',
+      'rounded-l-[10px] flex-row w-[50%] right-0 top-0 bottom-0': direction === 'right',
+    }"
+  >
+    <div
+      class="w-full h-full flex rounded-full gap-8"
+      :class="{
+        'flex-col': direction === 'bottom',
+        'flex-col-reverse': direction === 'top',
+        'flex-row-reverse': direction === 'left',
+        'flex-row ': direction === 'right',
+      }"
+    >
+      <div
+        class="rounded-full bg-zinc-300"
+        :class="{
+          'mx-auto w-12 h-1.5': direction === 'top' || direction === 'bottom',
+          'my-auto h-12 w-1.5': direction === 'left' || direction === 'right',
+        }"
+      />
+
+      <div class="grid place-content-center w-full h-full">
+        <slot />
+      </div>
+    </div>
+  </DrawerContent>
+</template>
diff --git a/playground/src/router/index.ts b/playground/src/router/index.ts
index 526b112..7f8681c 100644
--- a/playground/src/router/index.ts
+++ b/playground/src/router/index.ts
@@ -22,6 +22,10 @@ const router = createRouter({
           path: 'initial-snap',
           component: () => import('../views/tests/InitialSnapView.vue'),
         },
+        {
+          path: 'direction',
+          component: () => import('../views/tests/DirectionView.vue'),
+        },
         {
           path: 'nested-drawer',
           component: () => import('../views/tests/NestedDrawerView.vue'),
@@ -46,6 +50,7 @@ const router = createRouter({
           path: 'with-snap-points',
           component: () => import('../views/tests/WithSnapPointsView.vue'),
         },
+
       ],
     },
   ],
diff --git a/playground/src/views/tests/DirectionView.vue b/playground/src/views/tests/DirectionView.vue
new file mode 100644
index 0000000..e24e12b
--- /dev/null
+++ b/playground/src/views/tests/DirectionView.vue
@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import {
+  DrawerClose,
+  type DrawerDirection,
+  DrawerOverlay,
+  DrawerPortal,
+  DrawerRoot,
+  DrawerTitle,
+  DrawerTrigger,
+} from 'vaul-vue'
+import { ref } from 'vue'
+import { useRoute } from 'vue-router'
+import DrawerContentWrapper from '../../components/DrawerContent.vue'
+
+const route = useRoute()
+const direction = ref<DrawerDirection>(route.query.direction as DrawerDirection ?? 'bottom')
+</script>
+
+<template>
+  <div
+    class="w-screen h-screen bg-white p-8 flex justify-center items-center"
+    vaul-drawer-wrapper=""
+  >
+    <DrawerRoot :direction="direction">
+      <DrawerTrigger as-child>
+        <button data-testid="trigger" class="text-2xl">
+          Open Drawer
+        </button>
+      </DrawerTrigger>
+      <DrawerPortal>
+        <DrawerOverlay data-testid="overlay" class="fixed inset-0 bg-black/40" />
+        <DrawerContentWrapper
+          :direction="direction"
+        >
+          <div class="max-w-md mx-auto">
+            <DrawerTitle class="font-medium mb-4">
+              Unstyled drawer for Vue.
+            </DrawerTitle>
+            <p class="text-zinc-600 mb-2">
+              This component can be used as a replacement for a Dialog on mobile and tablet devices.
+            </p>
+          </div>
+        </DrawerContentWrapper>
+      </DrawerPortal>
+    </DrawerRoot>
+  </div>
+</template>
+
+<style scoped></style>