From 180f93fe017e9928c739935e7596096a499d6de2 Mon Sep 17 00:00:00 2001
From: barbapapazes <e.soubiran25@gmail.com>
Date: Mon, 16 Jun 2025 18:41:59 +0200
Subject: [PATCH 1/7] feat(Overlay): support stacking

---
 playground/app/app.config.ts               | 10 +++++++++-
 playground/app/app.vue                     |  2 +-
 playground/app/components/FirstModal.vue   | 21 +++++++++++++++++++++
 playground/app/components/SecondModal.vue  | 11 +++++++++++
 playground/app/pages/components/modal.vue  |  9 +++++++++
 src/runtime/components/App.vue             |  4 +++-
 src/runtime/components/OverlayProvider.vue | 14 +++++++++++++-
 7 files changed, 67 insertions(+), 4 deletions(-)
 create mode 100644 playground/app/components/FirstModal.vue
 create mode 100644 playground/app/components/SecondModal.vue

diff --git a/playground/app/app.config.ts b/playground/app/app.config.ts
index 7056ebb4d6..5e000e2a1b 100644
--- a/playground/app/app.config.ts
+++ b/playground/app/app.config.ts
@@ -1,9 +1,17 @@
 export default defineAppConfig({
   toaster: {
-    position: 'bottom-right' as const,
+    position: 'bottom-right',
     expand: true,
     duration: 5000
   },
+  overlay: {
+    class: 'origin-top transition-transform duration-100',
+    style: {
+      '--overlay-value': 'calc(var(--overlay-count) - var(--overlay-index) - 1)',
+      'scale': 'calc(100% - 5% * var(--overlay-value))',
+      'translate': 'var(--tw-translate-x) calc(-1.25rem * var(--overlay-value))'
+    }
+  },
   ui: {
     colors: {
       primary: 'green',
diff --git a/playground/app/app.vue b/playground/app/app.vue
index 7348fbd70f..b8adc7e66f 100644
--- a/playground/app/app.vue
+++ b/playground/app/app.vue
@@ -91,7 +91,7 @@ useHead({
 
 <template>
   <template v-if="!$route.path.startsWith('/__nuxt_ui__')">
-    <UApp :toaster="appConfig.toaster">
+    <UApp :toaster="appConfig.toaster" :overlay="appConfig.overlay">
       <div class="h-screen w-screen overflow-hidden flex flex-col lg:flex-row min-h-0 bg-default" data-vaul-drawer-wrapper>
         <UNavigationMenu :items="items" orientation="vertical" class="hidden lg:flex border-e border-default overflow-y-auto w-48 p-4" />
         <UNavigationMenu :items="items" orientation="horizontal" class="lg:hidden border-b border-default [&>div]:min-w-min overflow-x-auto" />
diff --git a/playground/app/components/FirstModal.vue b/playground/app/components/FirstModal.vue
new file mode 100644
index 0000000000..41bfa869ce
--- /dev/null
+++ b/playground/app/components/FirstModal.vue
@@ -0,0 +1,21 @@
+<script lang="ts" setup>
+import SecondModal from '~/components/SecondModal.vue'
+
+const emit = defineEmits(['close'])
+
+const overlay = useOverlay()
+function openSecondModal() {
+  overlay.create(SecondModal, {
+    destroyOnClose: true
+  }).open()
+}
+</script>
+
+<template>
+  <UModal title="First modal" description="This is the first modal opened from the button.">
+    <template #footer>
+      <UButton label="Open second modal" color="neutral" variant="outline" @click="openSecondModal" />
+      <UButton color="neutral" label="Close" @click="emit('close')" />
+    </template>
+  </UModal>
+</template>
diff --git a/playground/app/components/SecondModal.vue b/playground/app/components/SecondModal.vue
new file mode 100644
index 0000000000..ec78a2a2c9
--- /dev/null
+++ b/playground/app/components/SecondModal.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+const emit = defineEmits(['close'])
+</script>
+
+<template>
+  <UModal title="Second modal" description="This is the second modal opened from the button.">
+    <template #footer>
+      <UButton color="neutral" label="Close" @click="emit('close')" />
+    </template>
+  </UModal>
+</template>
diff --git a/playground/app/pages/components/modal.vue b/playground/app/pages/components/modal.vue
index b19cc153eb..d1013b6c9b 100644
--- a/playground/app/pages/components/modal.vue
+++ b/playground/app/pages/components/modal.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { defineAsyncComponent } from 'vue'
+import FirstModal from '~/components/FirstModal.vue'
 
 const LazyModalExample = defineAsyncComponent(() => import('../../components/ModalExample.vue'))
 
@@ -18,6 +19,12 @@ function openModal() {
 
   modal.open({ count: count.value })
 }
+
+function openFirstModal() {
+  overlay.create(FirstModal, {
+    destroyOnClose: true
+  }).open()
+}
 </script>
 
 <template>
@@ -70,6 +77,8 @@ function openModal() {
 
     <UButton label="Open programmatically" color="neutral" variant="outline" @click="openModal" />
 
+    <UButton label="Stacked modal" color="neutral" variant="subtle" @click="openFirstModal" />
+
     <UModal title="First modal">
       <UButton color="neutral" variant="outline" label="Close with scoped slot close" />
 
diff --git a/src/runtime/components/App.vue b/src/runtime/components/App.vue
index 36ac69e0fb..90bf8ddd43 100644
--- a/src/runtime/components/App.vue
+++ b/src/runtime/components/App.vue
@@ -5,6 +5,7 @@ import type { ToasterProps, Locale, Messages } from '../types'
 export interface AppProps<T extends Messages = Messages> extends Omit<ConfigProviderProps, 'useId' | 'dir' | 'locale'> {
   tooltip?: TooltipProviderProps
   toaster?: ToasterProps | null
+  overlay?: Record<string, any>
   locale?: Locale<T>
   portal?: string | HTMLElement
 }
@@ -36,6 +37,7 @@ defineSlots<AppSlots>()
 const configProviderProps = useForwardProps(reactivePick(props, 'scrollBody'))
 const tooltipProps = toRef(() => props.tooltip)
 const toasterProps = toRef(() => props.toaster)
+const overlayProps = toRef(() => props.overlay)
 
 const locale = toRef(() => props.locale)
 provide(localeContextInjectionKey, locale)
@@ -52,7 +54,7 @@ provide(portalTargetInjectionKey, portal)
       </UToaster>
       <slot v-else />
 
-      <UOverlayProvider />
+      <UOverlayProvider v-bind="overlayProps" />
     </TooltipProvider>
   </ConfigProvider>
 </template>
diff --git a/src/runtime/components/OverlayProvider.vue b/src/runtime/components/OverlayProvider.vue
index 4e43f255df..8c5860637c 100644
--- a/src/runtime/components/OverlayProvider.vue
+++ b/src/runtime/components/OverlayProvider.vue
@@ -2,6 +2,10 @@
 import { computed } from 'vue'
 import { useOverlay, type Overlay } from '../composables/useOverlay'
 
+defineOptions({
+  inheritAttrs: false
+})
+
 const { overlays, unmount, close } = useOverlay()
 
 const mountedOverlays = computed(() => overlays.filter((overlay: Overlay) => overlay.isMounted))
@@ -19,10 +23,18 @@ const onClose = (id: symbol, value: any) => {
 <template>
   <component
     :is="overlay.component"
-    v-for="overlay in mountedOverlays"
+    v-for="(overlay, index) in mountedOverlays"
     :key="overlay.id"
     v-bind="overlay.props"
     v-model:open="overlay.isOpen"
+    :content="{
+      ...$attrs,
+      style: {
+        '--overlay-count': overlays.length,
+        '--overlay-index': index,
+        ...($attrs as any).style
+      }
+    }"
     @close="(value:any) => onClose(overlay.id, value)"
     @after:leave="onAfterLeave(overlay.id)"
   />

From 117b1fe7bfb122da43147defcb79e81d35de055f Mon Sep 17 00:00:00 2001
From: barbapapazes <e.soubiran25@gmail.com>
Date: Mon, 16 Jun 2025 18:47:39 +0200
Subject: [PATCH 2/7] chore: fix imports

---
 playground/app/components/FirstModal.vue  | 2 +-
 playground/app/pages/components/modal.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/playground/app/components/FirstModal.vue b/playground/app/components/FirstModal.vue
index 41bfa869ce..42ec22a60e 100644
--- a/playground/app/components/FirstModal.vue
+++ b/playground/app/components/FirstModal.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import SecondModal from '~/components/SecondModal.vue'
+import SecondModal from './SecondModal.vue'
 
 const emit = defineEmits(['close'])
 
diff --git a/playground/app/pages/components/modal.vue b/playground/app/pages/components/modal.vue
index d1013b6c9b..60b4fd7505 100644
--- a/playground/app/pages/components/modal.vue
+++ b/playground/app/pages/components/modal.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { defineAsyncComponent } from 'vue'
-import FirstModal from '~/components/FirstModal.vue'
+import FirstModal from '../../components/FirstModal.vue'
 
 const LazyModalExample = defineAsyncComponent(() => import('../../components/ModalExample.vue'))
 

From 08ebb49b112293e773ca12580ffa87b42f046793 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Est=C3=A9ban?= <esteban.soubiran@insa-cvl.fr>
Date: Tue, 17 Jun 2025 10:42:43 +0200
Subject: [PATCH 3/7] Update playground/app/app.config.ts

Co-authored-by: Benjamin Canac <canacb1@gmail.com>
---
 playground/app/app.config.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/playground/app/app.config.ts b/playground/app/app.config.ts
index 5e000e2a1b..08048f553e 100644
--- a/playground/app/app.config.ts
+++ b/playground/app/app.config.ts
@@ -1,6 +1,6 @@
 export default defineAppConfig({
   toaster: {
-    position: 'bottom-right',
+    position: 'bottom-right' as const,
     expand: true,
     duration: 5000
   },

From 48ee64ea2071117d194f40b362601988a48fee88 Mon Sep 17 00:00:00 2001
From: barbapapazes <e.soubiran25@gmail.com>
Date: Tue, 17 Jun 2025 16:13:05 +0200
Subject: [PATCH 4/7] docs(OverlayProvider): stack modal example

---
 docs/app/app.config.ts                        |  8 ++++
 docs/app/app.vue                              |  2 +-
 docs/app/assets/css/main.css                  | 25 +++++++++++++
 .../examples/modal/ModalStackingExample.vue   | 17 +++++++++
 .../content/examples/modal/StackingModal.vue  | 24 ++++++++++++
 docs/content/3.components/modal.md            | 37 +++++++++++++++++++
 playground/app/app.config.ts                  |  2 +-
 src/runtime/components/OverlayProvider.vue    |  3 +-
 8 files changed, 115 insertions(+), 3 deletions(-)
 create mode 100644 docs/app/components/content/examples/modal/ModalStackingExample.vue
 create mode 100644 docs/app/components/content/examples/modal/StackingModal.vue

diff --git a/docs/app/app.config.ts b/docs/app/app.config.ts
index bf927c4904..95e465399b 100644
--- a/docs/app/app.config.ts
+++ b/docs/app/app.config.ts
@@ -4,6 +4,14 @@ export default defineAppConfig({
     expand: true,
     duration: 5000
   },
+  overlay: {
+    class: 'origin-top transition-transform duration-600',
+    style: {
+      '--overlay-value': 'calc(var(--overlay-count) - var(--overlay-index) - 1)',
+      'scale': 'calc(100% - 5% * var(--overlay-value))',
+      'transform': 'translateY(calc(-1.25rem * var(--overlay-value)))'
+    }
+  },
   theme: {
     radius: 0.25,
     blackAsPrimary: false
diff --git a/docs/app/app.vue b/docs/app/app.vue
index 0c9f7d660e..f91aaeb997 100644
--- a/docs/app/app.vue
+++ b/docs/app/app.vue
@@ -49,7 +49,7 @@ provide('navigation', mappedNavigation)
 </script>
 
 <template>
-  <UApp :toaster="appConfig.toaster">
+  <UApp :toaster="appConfig.toaster" :overlay="appConfig.overlay">
     <NuxtLoadingIndicator color="var(--ui-primary)" :height="2" />
 
     <template v-if="!route.path.startsWith('/examples')">
diff --git a/docs/app/assets/css/main.css b/docs/app/assets/css/main.css
index b9ef7ffd37..3ed1747f50 100644
--- a/docs/app/assets/css/main.css
+++ b/docs/app/assets/css/main.css
@@ -32,3 +32,28 @@ html[data-module="ui-pro"] .ui-only,
 html[data-module="ui"] .ui-pro-only {
   display: none;
 }
+
+/* For better modals stacking visual experience */
+@keyframes light-slide-in-from-bottom {
+  from {
+    transform: translateY(60%);
+    opacity: 0;
+  }
+
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+@keyframes light-slide-out-to-bottom {
+  from {
+    transform: translateY(0);
+    opacity: 1;
+  }
+
+  to {
+    transform: translateY(60%);
+    opacity: 0;
+  }
+}
diff --git a/docs/app/components/content/examples/modal/ModalStackingExample.vue b/docs/app/components/content/examples/modal/ModalStackingExample.vue
new file mode 100644
index 0000000000..e5b80316fd
--- /dev/null
+++ b/docs/app/components/content/examples/modal/ModalStackingExample.vue
@@ -0,0 +1,17 @@
+<script lang="ts" setup>
+import { LazyStackingModal } from '#components'
+
+const overlay = useOverlay()
+
+function onClick() {
+  overlay
+    .create(LazyStackingModal, {
+      destroyOnClose: true
+    })
+    .open()
+}
+</script>
+
+<template>
+  <UButton label="Open" variant="subtle" color="neutral" @click="onClick" />
+</template>
diff --git a/docs/app/components/content/examples/modal/StackingModal.vue b/docs/app/components/content/examples/modal/StackingModal.vue
new file mode 100644
index 0000000000..79daafc53e
--- /dev/null
+++ b/docs/app/components/content/examples/modal/StackingModal.vue
@@ -0,0 +1,24 @@
+<script lang="ts" setup>
+// eslint-disable-next-line import/no-self-import
+import StackingModal from './StackingModal.vue'
+
+const overlay = useOverlay()
+function onClick() {
+  overlay
+    .create(StackingModal, {
+      destroyOnClose: true
+    })
+    .open()
+}
+</script>
+
+<template>
+  <UModal
+    title="A Modal"
+    :ui="{ footer: 'justify-end', content: 'data-[state=open]:animate-[light-slide-in-from-bottom_600ms_ease-out] data-[state=closed]:animate-[light-slide-out-to-bottom_600ms_ease-in]' }"
+  >
+    <template #footer>
+      <UButton label="Another Modal" variant="subtle" color="neutral" @click="onClick" />
+    </template>
+  </UModal>
+</template>
diff --git a/docs/content/3.components/modal.md b/docs/content/3.components/modal.md
index 3ff36f91aa..70776bf4aa 100644
--- a/docs/content/3.components/modal.md
+++ b/docs/content/3.components/modal.md
@@ -347,6 +347,43 @@ name: 'modal-nested-example'
 ---
 ::
 
+### Stacking modals
+
+You can nicely stack modals on top of each other thanks to two CSS variables: `--overlay-count` and `--overlay-index`.
+
+::component-example
+---
+name: 'modal-stacking-example'
+---
+::
+
+The demo above is slow intentionally to demonstrate the stacking effect.
+
+To achieve this visual effect, a custom configuration for the overlay is required:
+
+```ts
+{
+  overlay: {
+    class: 'origin-top transition-transform duration-600',
+    style: {
+      '--overlay-value': 'calc(var(--overlay-count) - var(--overlay-index) - 1)',
+      'scale': 'calc(100% - 5% * var(--overlay-value))',
+      'transform': 'translateY(calc(-1.25rem * var(--overlay-value)))'
+    }
+  }
+}
+```
+
+::note
+This configuration is the one used in the demo above but you can customize it to your needs. Nuxt UI only provides the CSS variables by default.
+::
+
+Then, you'll have to provide this configuration to the `App` component:
+
+```vue-html
+<UApp :overlay="appConfig.overlay">
+```
+
 ### With footer slot
 
 Use the `#footer` slot to add content after the Modal's body.
diff --git a/playground/app/app.config.ts b/playground/app/app.config.ts
index 08048f553e..3742620900 100644
--- a/playground/app/app.config.ts
+++ b/playground/app/app.config.ts
@@ -9,7 +9,7 @@ export default defineAppConfig({
     style: {
       '--overlay-value': 'calc(var(--overlay-count) - var(--overlay-index) - 1)',
       'scale': 'calc(100% - 5% * var(--overlay-value))',
-      'translate': 'var(--tw-translate-x) calc(-1.25rem * var(--overlay-value))'
+      'transform': 'translateY(calc(-1.25rem * var(--overlay-value)))'
     }
   },
   ui: {
diff --git a/src/runtime/components/OverlayProvider.vue b/src/runtime/components/OverlayProvider.vue
index 8c5860637c..4b9c1c9a1e 100644
--- a/src/runtime/components/OverlayProvider.vue
+++ b/src/runtime/components/OverlayProvider.vue
@@ -27,10 +27,11 @@ const onClose = (id: symbol, value: any) => {
     :key="overlay.id"
     v-bind="overlay.props"
     v-model:open="overlay.isOpen"
+    :overlay="index === 0 ? true : false"
     :content="{
       ...$attrs,
       style: {
-        '--overlay-count': overlays.length,
+        '--overlay-count': mountedOverlays.length,
         '--overlay-index': index,
         ...($attrs as any).style
       }

From fd53211a1b5815d6a1a45121f84950f691d979f8 Mon Sep 17 00:00:00 2001
From: barbapapazes <e.soubiran25@gmail.com>
Date: Tue, 17 Jun 2025 20:29:23 +0200
Subject: [PATCH 5/7] refactor: use overlay-provider theme

---
 docs/app/app.config.ts                        |  8 -----
 docs/app/app.vue                              |  2 +-
 docs/app/assets/css/main.css                  |  4 +--
 .../content/examples/modal/StackingModal.vue  |  2 +-
 docs/content/3.components/modal.md            | 25 +------------
 playground/app/app.config.ts                  |  8 -----
 playground/app/app.vue                        |  2 +-
 src/runtime/components/App.vue                |  4 +--
 src/runtime/components/OverlayProvider.vue    | 35 ++++++++++++++++---
 src/runtime/types/index.ts                    |  1 +
 src/theme/index.ts                            |  1 +
 src/theme/overlay-provider.ts                 | 12 +++++++
 12 files changed, 52 insertions(+), 52 deletions(-)
 create mode 100644 src/theme/overlay-provider.ts

diff --git a/docs/app/app.config.ts b/docs/app/app.config.ts
index 95e465399b..bf927c4904 100644
--- a/docs/app/app.config.ts
+++ b/docs/app/app.config.ts
@@ -4,14 +4,6 @@ export default defineAppConfig({
     expand: true,
     duration: 5000
   },
-  overlay: {
-    class: 'origin-top transition-transform duration-600',
-    style: {
-      '--overlay-value': 'calc(var(--overlay-count) - var(--overlay-index) - 1)',
-      'scale': 'calc(100% - 5% * var(--overlay-value))',
-      'transform': 'translateY(calc(-1.25rem * var(--overlay-value)))'
-    }
-  },
   theme: {
     radius: 0.25,
     blackAsPrimary: false
diff --git a/docs/app/app.vue b/docs/app/app.vue
index f91aaeb997..528bdf6830 100644
--- a/docs/app/app.vue
+++ b/docs/app/app.vue
@@ -49,7 +49,7 @@ provide('navigation', mappedNavigation)
 </script>
 
 <template>
-  <UApp :toaster="appConfig.toaster" :overlay="appConfig.overlay">
+  <UApp :toaster="appConfig.toaster" :overlay="{ stacked: true }">
     <NuxtLoadingIndicator color="var(--ui-primary)" :height="2" />
 
     <template v-if="!route.path.startsWith('/examples')">
diff --git a/docs/app/assets/css/main.css b/docs/app/assets/css/main.css
index 3ed1747f50..7da593ae8b 100644
--- a/docs/app/assets/css/main.css
+++ b/docs/app/assets/css/main.css
@@ -36,7 +36,7 @@ html[data-module="ui"] .ui-pro-only {
 /* For better modals stacking visual experience */
 @keyframes light-slide-in-from-bottom {
   from {
-    transform: translateY(60%);
+    transform: translateY(20%);
     opacity: 0;
   }
 
@@ -53,7 +53,7 @@ html[data-module="ui"] .ui-pro-only {
   }
 
   to {
-    transform: translateY(60%);
+    transform: translateY(20%);
     opacity: 0;
   }
 }
diff --git a/docs/app/components/content/examples/modal/StackingModal.vue b/docs/app/components/content/examples/modal/StackingModal.vue
index 79daafc53e..616e865a99 100644
--- a/docs/app/components/content/examples/modal/StackingModal.vue
+++ b/docs/app/components/content/examples/modal/StackingModal.vue
@@ -15,7 +15,7 @@ function onClick() {
 <template>
   <UModal
     title="A Modal"
-    :ui="{ footer: 'justify-end', content: 'data-[state=open]:animate-[light-slide-in-from-bottom_600ms_ease-out] data-[state=closed]:animate-[light-slide-out-to-bottom_600ms_ease-in]' }"
+    :ui="{ footer: 'justify-end', content: 'data-[state=open]:animate-[light-slide-in-from-bottom_200ms_ease-out] data-[state=closed]:animate-[light-slide-out-to-bottom_200ms_ease-in]' }"
   >
     <template #footer>
       <UButton label="Another Modal" variant="subtle" color="neutral" @click="onClick" />
diff --git a/docs/content/3.components/modal.md b/docs/content/3.components/modal.md
index 70776bf4aa..ba9cd70216 100644
--- a/docs/content/3.components/modal.md
+++ b/docs/content/3.components/modal.md
@@ -357,33 +357,10 @@ name: 'modal-stacking-example'
 ---
 ::
 
-The demo above is slow intentionally to demonstrate the stacking effect.
-
-To achieve this visual effect, a custom configuration for the overlay is required:
-
-```ts
-{
-  overlay: {
-    class: 'origin-top transition-transform duration-600',
-    style: {
-      '--overlay-value': 'calc(var(--overlay-count) - var(--overlay-index) - 1)',
-      'scale': 'calc(100% - 5% * var(--overlay-value))',
-      'transform': 'translateY(calc(-1.25rem * var(--overlay-value)))'
-    }
-  }
-}
-```
-
 ::note
-This configuration is the one used in the demo above but you can customize it to your needs. Nuxt UI only provides the CSS variables by default.
+You must enable the `stacked` variant though the App component's `overlay` prop to use this feature.
 ::
 
-Then, you'll have to provide this configuration to the `App` component:
-
-```vue-html
-<UApp :overlay="appConfig.overlay">
-```
-
 ### With footer slot
 
 Use the `#footer` slot to add content after the Modal's body.
diff --git a/playground/app/app.config.ts b/playground/app/app.config.ts
index 3742620900..7056ebb4d6 100644
--- a/playground/app/app.config.ts
+++ b/playground/app/app.config.ts
@@ -4,14 +4,6 @@ export default defineAppConfig({
     expand: true,
     duration: 5000
   },
-  overlay: {
-    class: 'origin-top transition-transform duration-100',
-    style: {
-      '--overlay-value': 'calc(var(--overlay-count) - var(--overlay-index) - 1)',
-      'scale': 'calc(100% - 5% * var(--overlay-value))',
-      'transform': 'translateY(calc(-1.25rem * var(--overlay-value)))'
-    }
-  },
   ui: {
     colors: {
       primary: 'green',
diff --git a/playground/app/app.vue b/playground/app/app.vue
index b8adc7e66f..76b10fc8dc 100644
--- a/playground/app/app.vue
+++ b/playground/app/app.vue
@@ -91,7 +91,7 @@ useHead({
 
 <template>
   <template v-if="!$route.path.startsWith('/__nuxt_ui__')">
-    <UApp :toaster="appConfig.toaster" :overlay="appConfig.overlay">
+    <UApp :toaster="appConfig.toaster" :overlay="{ stacked: true }">
       <div class="h-screen w-screen overflow-hidden flex flex-col lg:flex-row min-h-0 bg-default" data-vaul-drawer-wrapper>
         <UNavigationMenu :items="items" orientation="vertical" class="hidden lg:flex border-e border-default overflow-y-auto w-48 p-4" />
         <UNavigationMenu :items="items" orientation="horizontal" class="lg:hidden border-b border-default [&>div]:min-w-min overflow-x-auto" />
diff --git a/src/runtime/components/App.vue b/src/runtime/components/App.vue
index 90bf8ddd43..712f5fa81d 100644
--- a/src/runtime/components/App.vue
+++ b/src/runtime/components/App.vue
@@ -1,11 +1,11 @@
 <script lang="ts">
 import type { ConfigProviderProps, TooltipProviderProps } from 'reka-ui'
-import type { ToasterProps, Locale, Messages } from '../types'
+import type { ToasterProps, Locale, Messages, OverlayProviderProps } from '../types'
 
 export interface AppProps<T extends Messages = Messages> extends Omit<ConfigProviderProps, 'useId' | 'dir' | 'locale'> {
   tooltip?: TooltipProviderProps
   toaster?: ToasterProps | null
-  overlay?: Record<string, any>
+  overlay?: OverlayProviderProps
   locale?: Locale<T>
   portal?: string | HTMLElement
 }
diff --git a/src/runtime/components/OverlayProvider.vue b/src/runtime/components/OverlayProvider.vue
index 4b9c1c9a1e..608e00c7b5 100644
--- a/src/runtime/components/OverlayProvider.vue
+++ b/src/runtime/components/OverlayProvider.vue
@@ -1,11 +1,37 @@
+<script lang="ts">
+import type { AppConfig } from '@nuxt/schema'
+import theme from '#build/ui/overlay-provider'
+import type { ComponentConfig } from '../types/utils'
+
+type OverlayProvider = ComponentConfig<typeof theme, AppConfig, 'overlayProvider'>
+
+export interface OverlayProviderProps {
+  /**
+   * Allow the overlay to nicely stack on top of each other.
+   * @defaultValue false
+   */
+  stacked?: boolean
+  class?: any
+  ui?: OverlayProvider['slots']
+}
+</script>
+
 <script setup lang="ts">
 import { computed } from 'vue'
 import { useOverlay, type Overlay } from '../composables/useOverlay'
+import { useAppConfig } from '#imports'
+import { tv } from '../utils/tv'
 
-defineOptions({
-  inheritAttrs: false
+const props = withDefaults(defineProps<OverlayProviderProps>(), {
+  stacked: false
 })
 
+const appConfig = useAppConfig() as OverlayProvider['AppConfig']
+
+const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.overlayProvider || {}) })({
+  stacked: props.stacked
+}))
+
 const { overlays, unmount, close } = useOverlay()
 
 const mountedOverlays = computed(() => overlays.filter((overlay: Overlay) => overlay.isMounted))
@@ -29,13 +55,12 @@ const onClose = (id: symbol, value: any) => {
     v-model:open="overlay.isOpen"
     :overlay="index === 0 ? true : false"
     :content="{
-      ...$attrs,
       style: {
         '--overlay-count': mountedOverlays.length,
-        '--overlay-index': index,
-        ...($attrs as any).style
+        '--overlay-index': index
       }
     }"
+    :class="ui.base({ class: [props.ui?.base, props.class] })"
     @close="(value:any) => onClose(overlay.id, value)"
     @after:leave="onAfterLeave(overlay.id)"
   />
diff --git a/src/runtime/types/index.ts b/src/runtime/types/index.ts
index f413b71caa..028a746dde 100644
--- a/src/runtime/types/index.ts
+++ b/src/runtime/types/index.ts
@@ -55,3 +55,4 @@ export * from '../components/Tree.vue'
 export * from './form'
 export * from './locale'
 export * from './utils'
+export * from '../components/OverlayProvider.vue'
diff --git a/src/theme/index.ts b/src/theme/index.ts
index e03aecd3b5..283840bc03 100644
--- a/src/theme/index.ts
+++ b/src/theme/index.ts
@@ -50,3 +50,4 @@ export { default as toast } from './toast'
 export { default as toaster } from './toaster'
 export { default as tooltip } from './tooltip'
 export { default as tree } from './tree'
+export { default as overlayProvider } from './overlay-provider'
diff --git a/src/theme/overlay-provider.ts b/src/theme/overlay-provider.ts
new file mode 100644
index 0000000000..fdfa79833e
--- /dev/null
+++ b/src/theme/overlay-provider.ts
@@ -0,0 +1,12 @@
+export default {
+  slots: {
+    base: ''
+  },
+  variants: {
+    stacked: {
+      true: {
+        base: 'origin-top transition-transform duration-200 [--overlay-value:calc(var(--overlay-count)-var(--overlay-index)-1)] scale-[calc(1-0.05*var(--overlay-value))] transform-[translateY(calc(-1.25rem*var(--overlay-value)))]'
+      }
+    }
+  }
+}

From 82e615f60411a8e84aba11b89669f240adbec738 Mon Sep 17 00:00:00 2001
From: barbapapazes <e.soubiran25@gmail.com>
Date: Tue, 17 Jun 2025 20:31:57 +0200
Subject: [PATCH 6/7] chore: format

---
 src/runtime/types/index.ts | 2 +-
 src/theme/index.ts         | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/runtime/types/index.ts b/src/runtime/types/index.ts
index 028a746dde..3082d112e1 100644
--- a/src/runtime/types/index.ts
+++ b/src/runtime/types/index.ts
@@ -31,6 +31,7 @@ export * from '../components/Kbd.vue'
 export * from '../components/Link.vue'
 export * from '../components/Modal.vue'
 export * from '../components/NavigationMenu.vue'
+export * from '../components/OverlayProvider.vue'
 export * from '../components/Pagination.vue'
 export * from '../components/PinInput.vue'
 export * from '../components/Popover.vue'
@@ -55,4 +56,3 @@ export * from '../components/Tree.vue'
 export * from './form'
 export * from './locale'
 export * from './utils'
-export * from '../components/OverlayProvider.vue'
diff --git a/src/theme/index.ts b/src/theme/index.ts
index 283840bc03..34aeed134d 100644
--- a/src/theme/index.ts
+++ b/src/theme/index.ts
@@ -29,6 +29,7 @@ export { default as kbd } from './kbd'
 export { default as link } from './link'
 export { default as modal } from './modal'
 export { default as navigationMenu } from './navigation-menu'
+export { default as overlayProvider } from './overlay-provider'
 export { default as pagination } from './pagination'
 export { default as pinInput } from './pin-input'
 export { default as popover } from './popover'
@@ -50,4 +51,3 @@ export { default as toast } from './toast'
 export { default as toaster } from './toaster'
 export { default as tooltip } from './tooltip'
 export { default as tree } from './tree'
-export { default as overlayProvider } from './overlay-provider'

From 55cfbdcc2378dd9987826d170acc5d90ac549bb4 Mon Sep 17 00:00:00 2001
From: barbapapazes <e.soubiran25@gmail.com>
Date: Sun, 13 Jul 2025 22:37:54 +0200
Subject: [PATCH 7/7] docs: remove animation to have default one

---
 docs/app/assets/css/main.css                  | 25 -------------------
 .../content/examples/modal/StackingModal.vue  |  3 +--
 2 files changed, 1 insertion(+), 27 deletions(-)

diff --git a/docs/app/assets/css/main.css b/docs/app/assets/css/main.css
index 7da593ae8b..b9ef7ffd37 100644
--- a/docs/app/assets/css/main.css
+++ b/docs/app/assets/css/main.css
@@ -32,28 +32,3 @@ html[data-module="ui-pro"] .ui-only,
 html[data-module="ui"] .ui-pro-only {
   display: none;
 }
-
-/* For better modals stacking visual experience */
-@keyframes light-slide-in-from-bottom {
-  from {
-    transform: translateY(20%);
-    opacity: 0;
-  }
-
-  to {
-    transform: translateY(0);
-    opacity: 1;
-  }
-}
-
-@keyframes light-slide-out-to-bottom {
-  from {
-    transform: translateY(0);
-    opacity: 1;
-  }
-
-  to {
-    transform: translateY(20%);
-    opacity: 0;
-  }
-}
diff --git a/docs/app/components/content/examples/modal/StackingModal.vue b/docs/app/components/content/examples/modal/StackingModal.vue
index 616e865a99..56021eca46 100644
--- a/docs/app/components/content/examples/modal/StackingModal.vue
+++ b/docs/app/components/content/examples/modal/StackingModal.vue
@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-// eslint-disable-next-line import/no-self-import
 import StackingModal from './StackingModal.vue'
 
 const overlay = useOverlay()
@@ -15,7 +14,7 @@ function onClick() {
 <template>
   <UModal
     title="A Modal"
-    :ui="{ footer: 'justify-end', content: 'data-[state=open]:animate-[light-slide-in-from-bottom_200ms_ease-out] data-[state=closed]:animate-[light-slide-out-to-bottom_200ms_ease-in]' }"
+    :ui="{ footer: 'justify-end' }"
   >
     <template #footer>
       <UButton label="Another Modal" variant="subtle" color="neutral" @click="onClick" />