diff --git a/docs/app/components/content/examples/drawer/DrawerNestedExample.vue b/docs/app/components/content/examples/drawer/DrawerNestedExample.vue
new file mode 100644
index 00000000..e1bf4124
--- /dev/null
+++ b/docs/app/components/content/examples/drawer/DrawerNestedExample.vue
@@ -0,0 +1,15 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/content/3.components/drawer.md b/docs/content/3.components/drawer.md
index d99c4d5c..618c5d30 100644
--- a/docs/content/3.components/drawer.md
+++ b/docs/content/3.components/drawer.md
@@ -328,6 +328,17 @@ name: 'drawer-responsive-example'
---
::
+### Nested drawers :badge{label="Soon" class="align-text-top"}
+
+You can nest drawers within each other by using the `nested` prop.
+
+::component-example
+---
+prettier: true
+name: 'drawer-nested-example'
+---
+::
+
### With footer slot
Use the `#footer` slot to add content after the Drawer's body.
diff --git a/playground/app/pages/components/drawer.vue b/playground/app/pages/components/drawer.vue
index 280fc5a7..1172e116 100644
--- a/playground/app/pages/components/drawer.vue
+++ b/playground/app/pages/components/drawer.vue
@@ -28,6 +28,20 @@ const inset = ref(false)
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/runtime/components/Drawer.vue b/src/runtime/components/Drawer.vue
index 8ff30f6b..83b3c806 100644
--- a/src/runtime/components/Drawer.vue
+++ b/src/runtime/components/Drawer.vue
@@ -37,6 +37,11 @@ export interface DrawerProps extends Pick
import { computed, toRef } from 'vue'
import { VisuallyHidden, useForwardPropsEmits } from 'reka-ui'
-import { DrawerRoot, DrawerTrigger, DrawerPortal, DrawerOverlay, DrawerContent, DrawerTitle, DrawerDescription, DrawerHandle } from 'vaul-vue'
+import { DrawerRoot, DrawerRootNested, DrawerTrigger, DrawerPortal, DrawerOverlay, DrawerContent, DrawerTitle, DrawerDescription, DrawerHandle } from 'vaul-vue'
import { reactivePick } from '@vueuse/core'
import { useAppConfig } from '#imports'
import { usePortal } from '../composables/usePortal'
@@ -90,7 +95,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.drawer || {}
-
+
@@ -144,5 +149,5 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.drawer || {}
-
+