diff --git a/packages/cms/src/ui.js b/packages/cms/src/ui.js
index 926f3b2446e..d8a46ef347d 100644
--- a/packages/cms/src/ui.js
+++ b/packages/cms/src/ui.js
@@ -97,6 +97,8 @@ export const {
     Switch,
     TabContent,
     Stack,
+    StackClose,
+    StackTitle,
     Table,
     TableCell,
     TableColumn,
diff --git a/resources/js/bootstrap/cms/ui.js b/resources/js/bootstrap/cms/ui.js
index 84c0483c152..c27bca7598d 100644
--- a/resources/js/bootstrap/cms/ui.js
+++ b/resources/js/bootstrap/cms/ui.js
@@ -97,6 +97,8 @@ export {
     Switch,
     TabContent,
     Stack,
+    StackClose,
+    StackTitle,
     Table,
     TableCell,
     TableColumn,
diff --git a/resources/js/components/assets/Editor/Editor.vue b/resources/js/components/assets/Editor/Editor.vue
index 5aa9cfd552e..44a4828c4fa 100644
--- a/resources/js/components/assets/Editor/Editor.vue
+++ b/resources/js/components/assets/Editor/Editor.vue
@@ -1,5 +1,5 @@
 <template>
-    <ui-stack name="asset-editor" :before-close="shouldClose" :full="true" @closed="$emit('closed')" v-slot="{ close }">
+    <Stack size="full" open ref="stack" :before-close="shouldClose" @update:open="$emit('closed')">
         <div
             class="asset-editor relative flex h-full flex-col rounded-sm bg-gray-100 dark:bg-dark-800"
             :class="isImage ? 'is-image' : 'is-file'"
@@ -22,7 +22,7 @@
                             {{ asset.path }}
                         </span>
                     </button>
-                    <ui-button variant="ghost" icon="x" class="absolute top-1.5 end-1.5" round @click="confirmClose(close)" :aria-label="__('Close Editor')" />
+                    <ui-button variant="ghost" icon="x" class="absolute top-1.5 end-1.5" round @click="confirmClose()" :aria-label="__('Close Editor')" />
                 </header>
 
                 <div class="flex flex-1 grow flex-col overflow-auto md:flex-row md:justify-between">
@@ -174,7 +174,7 @@
             @cancel="closingWithChanges = false"
         />
         </div>
-    </ui-stack>
+    </Stack>
 </template>
 
 <script>
@@ -188,6 +188,7 @@ import {
     PublishContainer,
     PublishTabs,
     Icon,
+	Stack,
 } from '@ui';
 import ItemActions from '@/components/actions/ItemActions.vue';
 
@@ -204,6 +205,7 @@ export default {
         PublishContainer,
         PublishTabs,
         Icon,
+	    Stack,
     },
 
     props: {
@@ -435,7 +437,7 @@ export default {
         },
 
         confirmClose(close) {
-            if (this.shouldClose()) close();
+            if (this.shouldClose()) this.$refs.stack.close();
         },
 
         confirmCloseWithChanges() {
diff --git a/resources/js/components/blueprints/Fields.vue b/resources/js/components/blueprints/Fields.vue
index c5c0be5a30f..19a00a36e23 100644
--- a/resources/js/components/blueprints/Fields.vue
+++ b/resources/js/components/blueprints/Fields.vue
@@ -33,21 +33,11 @@
             <ui-button icon="add-circle" :text="__('Create Field')" @click="createField" />
         </div>
 
-        <ui-stack
-            name="fieldtype-selector"
-            v-if="isSelectingNewFieldtype"
-            @closed="isSelectingNewFieldtype = false"
-            v-slot="{ close }"
-        >
-            <fieldtype-selector @closed="close" @selected="fieldtypeSelected" />
-        </ui-stack>
-
-        <ui-stack
-            name="field-settings"
-            v-if="pendingCreatedField != null"
-            @closed="pendingCreatedField = null"
-            v-slot="{ close }"
-        >
+        <Stack v-model:open="isSelectingNewFieldtype">
+            <fieldtype-selector @closed="isSelectingNewFieldtype = false" @selected="fieldtypeSelected" />
+        </Stack>
+
+        <Stack :open="pendingCreatedField != null" @update:open="pendingCreatedField = null">
             <field-settings
                 ref="settings"
                 :type="pendingCreatedField.config.type"
@@ -57,9 +47,9 @@
                 :suggestable-condition-fields="suggestableConditionFields"
                 :is-inside-set="isInsideSet"
                 @committed="fieldCreated"
-                @closed="close"
+                @closed="pendingCreatedField = null"
             />
-        </ui-stack>
+        </Stack>
     </div>
 </template>
 
@@ -71,6 +61,7 @@ import LinkFields from './LinkFields.vue';
 import FieldtypeSelector from '../fields/FieldtypeSelector.vue';
 import FieldSettings from '../fields/Settings.vue';
 import CanDefineLocalizable from '../fields/CanDefineLocalizable';
+import { Stack } from '@/components/ui';
 
 export default {
     mixins: [CanDefineLocalizable],
@@ -81,6 +72,7 @@ export default {
         LinkFields,
         FieldtypeSelector,
         FieldSettings,
+	    Stack,
     },
 
     props: {
diff --git a/resources/js/components/blueprints/ImportField.vue b/resources/js/components/blueprints/ImportField.vue
index 3fa62520e5e..378f519718b 100644
--- a/resources/js/components/blueprints/ImportField.vue
+++ b/resources/js/components/blueprints/ImportField.vue
@@ -16,7 +16,7 @@
                         </div>
                         <div class="flex items-center gap-2">
                             <ui-button size="sm" icon="trash" variant="subtle" @click.prevent="$emit('deleted')" v-tooltip="__('Remove')" />
-                            <ui-stack name="field-settings" v-if="isEditing" @closed="editorClosed">
+                            <ui-stack :open="isEditing" @update:open="editorClosed">
                                 <field-settings
                                     ref="settings"
                                     :id="field._id"
diff --git a/resources/js/components/blueprints/LinkFields.vue b/resources/js/components/blueprints/LinkFields.vue
index 7b8cd480f15..0571f35d1ef 100644
--- a/resources/js/components/blueprints/LinkFields.vue
+++ b/resources/js/components/blueprints/LinkFields.vue
@@ -1,12 +1,16 @@
 <template>
     <div>
-        <ui-button icon="link" @click="open = true" :text="__('Link Existing')" />
+        <Stack size="narrow" v-model:open="open">
+	        <template #trigger>
+		        <Button icon="link" :text="__('Link Existing')" />
+	        </template>
 
-        <ui-stack narrow v-if="open" @closed="open = false" name="field-linker" v-slot="{ close }">
             <div class="h-full overflow-auto bg-white dark:bg-gray-800 p-3 rounded-l-xl">
                 <header class="flex items-center justify-between pl-3">
                     <Heading :text="__('Link Fields')" size="lg" icon="fieldsets" />
-                    <Button type="button" icon="x" variant="subtle" @click="close" />
+	                <StackClose>
+		                <Button type="button" icon="x" variant="subtle" />
+	                </StackClose>
                 </header>
 
                 <div class="flex-1 overflow-auto px-3 py-4">
@@ -90,17 +94,17 @@
                     />
                 </div>
             </div>
-        </ui-stack>
+        </Stack>
     </div>
 </template>
 
 <script>
 import uniqid from 'uniqid';
-import { Combobox, Button, Input, Heading, Field } from '@/components/ui';
+import { Combobox, Button, Input, Heading, Field, Stack, StackClose } from '@/components/ui';
 import { usePage } from '@inertiajs/vue3';
 
 export default {
-    components: { Heading, Combobox, Button, Input, Field },
+    components: { Heading, Combobox, Button, Input, Field, Stack, StackClose },
 
     props: {
         excludeFieldset: String,
diff --git a/resources/js/components/blueprints/RegularField.vue b/resources/js/components/blueprints/RegularField.vue
index d5406ab8b31..994879c85d5 100644
--- a/resources/js/components/blueprints/RegularField.vue
+++ b/resources/js/components/blueprints/RegularField.vue
@@ -31,7 +31,7 @@
                         <ui-button inset size="sm" icon="trash" variant="subtle" @click.prevent="$emit('deleted')" v-tooltip="__('Remove')" />
                     </div>
 
-                    <ui-stack name="field-settings" v-if="isEditing" @closed="editorClosed">
+                    <Stack :open="isEditing" @update:open="editorClosed">
                         <field-settings
                             ref="settings"
                             :id="field._id"
@@ -45,7 +45,7 @@
                             @committed="settingsUpdated"
                             @closed="editorClosed"
                         />
-                    </ui-stack>
+                    </Stack>
                 </div>
             </div>
         </div>
@@ -59,7 +59,7 @@ import WidthSelector from '../fields/WidthSelector.vue';
 import CanDefineLocalizable from '../fields/CanDefineLocalizable';
 import titleize from '../../util/titleize';
 import deslugify from '../../util/deslugify';
-import { Icon } from '@/components/ui';
+import { Icon, Stack } from '@/components/ui';
 
 export default {
     mixins: [Field, CanDefineLocalizable],
@@ -68,6 +68,7 @@ export default {
         FieldSettings,
         WidthSelector,
         Icon,
+	    Stack,
     },
 
     props: ['suggestableConditionFields'],
diff --git a/resources/js/components/blueprints/Section.vue b/resources/js/components/blueprints/Section.vue
index 5ce43a539d7..24f8950239e 100644
--- a/resources/js/components/blueprints/Section.vue
+++ b/resources/js/components/blueprints/Section.vue
@@ -35,10 +35,10 @@
         </ui-panel>
 
         <ui-stack
-            narrow
-            v-if="editingSection"
+	        size="narrow"
+            :open="editingSection !== false"
+            @update:open="editCancelled"
             @opened="() => $nextTick(() => $refs.displayInput.focus())"
-            @closed="editCancelled"
         >
             <div class="h-full overflow-scroll overflow-x-auto bg-white px-6 dark:bg-dark-800">
                 <header class="py-2 -mx-6 px-6 border-b border-gray-200 dark:border-gray-700 mb-5">
@@ -182,7 +182,7 @@ export default {
 
         isSoloNarrowStack() {
             const stacks = this.$stacks.stacks();
-            return stacks.length === 1 && stacks[0]?.data?.vm?.narrow === true;
+            return stacks.length === 1 && stacks[0]?.data?.vm?.size === 'narrow';
         },
     },
 
diff --git a/resources/js/components/blueprints/Tab.vue b/resources/js/components/blueprints/Tab.vue
index f00b9819fc2..e4b5dd219f4 100644
--- a/resources/js/components/blueprints/Tab.vue
+++ b/resources/js/components/blueprints/Tab.vue
@@ -24,11 +24,11 @@
             </DropdownMenu>
         </Dropdown>
 
-        <ui-stack
-            narrow
-            v-if="editing"
+        <Stack
+	        size="narrow"
+            :open="editing"
             @opened="() => $nextTick(() => $refs.title.focus())"
-            @closed="editCancelled"
+            @update:open="editCancelled"
         >
             <div class="h-full overflow-scroll overflow-x-auto bg-white px-6 dark:bg-dark-800">
                 <header class="py-2 -mx-6 px-6 border-b border-gray-200 dark:border-gray-700 mb-5">
@@ -36,7 +36,9 @@
                         <ui-heading size="lg">
                             {{ editText }}
                         </ui-heading>
-                        <ui-button icon="x" variant="ghost" class="-me-2" @click="editCancelled" />
+	                    <StackClose>
+                            <ui-button icon="x" variant="ghost" class="-me-2" />
+	                    </StackClose>
                     </div>
                 </header>
                 <div class="space-y-6">
@@ -75,15 +77,15 @@
                     </div>
                 </div>
             </div>
-        </ui-stack>
+        </Stack>
     </TabTrigger>
 </template>
 
 <script>
-import { TabTrigger, Dropdown, DropdownMenu, DropdownItem, Icon, Field, Input } from '@/components/ui';
+import { TabTrigger, Dropdown, DropdownMenu, DropdownItem, Icon, Field, Input, Stack, StackClose } from '@/components/ui';
 
 export default {
-    components: { TabTrigger, Dropdown, DropdownMenu, DropdownItem, Icon, Field, Input },
+    components: { TabTrigger, Dropdown, DropdownMenu, DropdownItem, Icon, Field, Input, Stack, StackClose },
 
     props: {
         tab: {
@@ -134,7 +136,7 @@ export default {
 
         isSoloNarrowStack() {
             const stacks = this.$stacks.stacks();
-            return stacks.length === 1 && stacks[0]?.data?.vm?.narrow === true;
+            return stacks.length === 1 && stacks[0]?.data?.vm?.size === 'narrow';
         },
     },
 
diff --git a/resources/js/components/collections/DeleteLocalizationConfirmation.vue b/resources/js/components/collections/DeleteLocalizationConfirmation.vue
index 3bbbc7be192..9a9dd77d44f 100644
--- a/resources/js/components/collections/DeleteLocalizationConfirmation.vue
+++ b/resources/js/components/collections/DeleteLocalizationConfirmation.vue
@@ -1,5 +1,5 @@
 <template>
-    <Modal :title="__('Delete')" :open="true" @update:open="$emit('cancel')">
+    <Modal :title="__('Delete')" open @update:open="$emit('cancel')">
         <p>Are you sure you want to delete this?</p>
 
         <Field
diff --git a/resources/js/components/entries/PublishActions.vue b/resources/js/components/entries/PublishActions.vue
index 4751ed45417..203d978b545 100644
--- a/resources/js/components/entries/PublishActions.vue
+++ b/resources/js/components/entries/PublishActions.vue
@@ -1,13 +1,6 @@
 <template>
-    <ui-stack narrow name="publish-options" @closed="$emit('closed')" v-slot="{ close }">
-        <div class="m-2 flex h-full flex-col rounded-xl bg-white dark:bg-gray-800">
-            <header
-                class="flex items-center justify-between rounded-t-xl border-b border-gray-300 px-4 mb-3 py-2 dark:border-gray-950 dark:bg-gray-800"
-            >
-                <Heading size="lg">{{ __('Publish') }}</Heading>
-                <Button icon="x" variant="ghost" class="-me-2" @click="close" />
-            </header>
-
+    <Stack size="narrow" :title="__('Publish')" open @update:open="$emit('closed')">
+	    <div class="m-2 flex h-full flex-col rounded-xl bg-white dark:bg-gray-800">
             <div class="flex-1 overflow-auto">
                 <div class="loading flex h-full items-center justify-center" v-if="saving">
                     <Icon name="loading" />
@@ -45,14 +38,14 @@
                 </div>
             </div>
         </div>
-    </ui-stack>
+    </Stack>
 </template>
 
 <script>
-import { Heading, Button, Select, DatePicker, Textarea, Icon, Subheading } from '@/components/ui';
+import { Heading, Button, Select, DatePicker, Textarea, Icon, Subheading, Stack } from '@/components/ui';
 
 export default {
-    components: { Heading, Button, Select, DatePicker, Textarea, Icon, Subheading },
+    components: { Heading, Button, Select, DatePicker, Textarea, Icon, Subheading, Stack },
 
     props: {
         actions: Object,
diff --git a/resources/js/components/entries/PublishForm.vue b/resources/js/components/entries/PublishForm.vue
index 8c067225208..f5d418f9fe3 100644
--- a/resources/js/components/entries/PublishForm.vue
+++ b/resources/js/components/entries/PublishForm.vue
@@ -190,21 +190,20 @@
             </LivePreview>
         </PublishContainer>
 
-        <ui-stack
-            name="revision-history"
-            v-if="showRevisionHistory"
-            @closed="showRevisionHistory = false"
-            :narrow="true"
-            v-slot="{ close }"
+        <Stack
+	        ref="revisionHistoryStack"
+	        size="narrow"
+	        :title="__('Revision History')"
+	        v-model:open="showRevisionHistory"
         >
             <revision-history
                 :index-url="actions.revisions"
                 :restore-url="actions.restore"
                 :reference="initialReference"
                 :can-restore-revisions="!readOnly"
-                @closed="close"
+                @closed="$refs.revisionHistoryStack.close()"
             />
-        </ui-stack>
+        </Stack>
 
         <publish-actions
             v-if="confirmingPublish"
@@ -277,6 +276,7 @@ import {
     PublishComponents,
     PublishLocalizations as LocalizationsCard,
     LivePreview,
+	Stack,
 } from '@ui';
 import resetValuesFromResponse from '@/util/resetValuesFromResponse.js';
 import { computed, ref } from 'vue';
@@ -312,6 +312,7 @@ export default {
         Subheading,
         Switch,
         Select,
+	    Stack,
     },
 
     props: {
diff --git a/resources/js/components/fieldtypes/assets/AssetsFieldtype.vue b/resources/js/components/fieldtypes/assets/AssetsFieldtype.vue
index 457c62d2647..0f41509c58e 100644
--- a/resources/js/components/fieldtypes/assets/AssetsFieldtype.vue
+++ b/resources/js/components/fieldtypes/assets/AssetsFieldtype.vue
@@ -163,7 +163,7 @@
             </div>
         </uploader>
 
-        <ui-stack v-if="showSelector" name="asset-selector" @closed="closeSelector">
+        <Stack v-model:open="showSelector">
             <Selector
                 :container="container"
                 :folder="folder"
@@ -173,9 +173,9 @@
                 :query-scopes="queryScopes"
                 :columns="columns"
                 @selected="assetsSelected"
-                @closed="closeSelector"
+                @closed="showSelector = false"
             />
-        </ui-stack>
+        </Stack>
     </div>
 </template>
 
@@ -188,7 +188,7 @@ import Uploader from '../../assets/Uploader.vue';
 import Uploads from '../../assets/Uploads.vue';
 import { SortableList } from '../../sortable/Sortable';
 import { isEqual } from 'lodash-es';
-import { Button, Dropdown, DropdownMenu, DropdownItem } from '@/components/ui';
+import { Button, Dropdown, DropdownMenu, DropdownItem, Stack } from '@/components/ui';
 import ItemActions from '@/components/actions/ItemActions.vue';
 
 export default {
@@ -204,6 +204,7 @@ export default {
         DropdownMenu,
         DropdownItem,
         ItemActions,
+	    Stack,
     },
 
     mixins: [Fieldtype],
@@ -427,7 +428,7 @@ export default {
 
     events: {
         'close-selector'() {
-            this.closeSelector();
+            this.showSelector = false;
         },
     },
 
@@ -489,13 +490,6 @@ export default {
             this.showSelector = true;
         },
 
-        /**
-         * Close the asset selector modal
-         */
-        closeSelector() {
-            this.showSelector = false;
-        },
-
         /**
          * When an asset is updated in the editor
          */
diff --git a/resources/js/components/fieldtypes/bard/Image.vue b/resources/js/components/fieldtypes/bard/Image.vue
index 185e0c96499..83a4581a65c 100644
--- a/resources/js/components/fieldtypes/bard/Image.vue
+++ b/resources/js/components/fieldtypes/bard/Image.vue
@@ -37,7 +37,7 @@
                 />
             </div>
 
-            <ui-stack v-if="showingSelector" name="asset-selector" @closed="closeSelector">
+            <Stack v-model:open="showingSelector">
                 <selector
                     :container="extension.options.bard.meta.assets.container"
                     :folder="extension.options.bard.config.folder || '/'"
@@ -46,10 +46,9 @@
                     :max-files="1"
                     :columns="extension.options.bard.meta.assets.columns"
                     @selected="assetsSelected"
-                    @closed="closeSelector"
-                >
-                </selector>
-            </ui-stack>
+                    @closed="showingSelector = false"
+                />
+            </Stack>
 
             <asset-editor
                 v-if="editing"
@@ -69,7 +68,7 @@
 import Asset from '../assets/Asset';
 import { NodeViewWrapper } from '@tiptap/vue-3';
 import Selector from '../../assets/Selector.vue';
-import { Input, Button } from '@ui';
+import { Input, Button, Stack } from '@ui';
 import { containerContextKey } from '@/components/ui/Publish/Container.vue';
 
 export default {
@@ -80,6 +79,7 @@ export default {
         Selector,
         Input,
         Button,
+	    Stack,
     },
 
     inject: {
@@ -163,10 +163,6 @@ export default {
             this.showingSelector = true;
         },
 
-        closeSelector() {
-            this.showingSelector = false;
-        },
-
         assetsSelected(selections) {
             this.loading = true;
             this.assetId = selections[0];
diff --git a/resources/js/components/fieldtypes/bard/LinkToolbar.vue b/resources/js/components/fieldtypes/bard/LinkToolbar.vue
index 361780ec169..fd1e197d3e1 100644
--- a/resources/js/components/fieldtypes/bard/LinkToolbar.vue
+++ b/resources/js/components/fieldtypes/bard/LinkToolbar.vue
@@ -148,7 +148,7 @@
             @item-data-updated="entrySelected"
         />
 
-        <ui-stack v-if="showAssetSelector" name="asset-selector" @closed="closeAssetSelector">
+        <Stack v-model:open="showAssetSelector">
             <asset-selector
                 :container="config.container"
                 :folder="config.folder || '/'"
@@ -156,21 +156,22 @@
                 :selected="[]"
                 :max-files="1"
                 @selected="assetSelected"
-                @closed="closeAssetSelector"
+                @closed="showAssetSelector = false"
             />
-        </ui-stack>
+        </Stack>
     </div>
 </template>
 
 <script>
 import qs from 'qs';
 import AssetSelector from '../../assets/Selector.vue';
-import { Icon } from '@/components/ui';
+import { Icon, Stack } from '@/components/ui';
 
 export default {
     components: {
         AssetSelector,
         Icon,
+	    Stack,
     },
 
     props: {
@@ -420,10 +421,6 @@ export default {
             this.showAssetSelector = true;
         },
 
-        closeAssetSelector() {
-            this.showAssetSelector = false;
-        },
-
         assetSelected(data) {
             if (data.length) {
                 this.loadAssetData(data[0]);
diff --git a/resources/js/components/fieldtypes/markdown/MarkdownFieldtype.vue b/resources/js/components/fieldtypes/markdown/MarkdownFieldtype.vue
index dc3ef69b17a..ca6c3c2b5ca 100644
--- a/resources/js/components/fieldtypes/markdown/MarkdownFieldtype.vue
+++ b/resources/js/components/fieldtypes/markdown/MarkdownFieldtype.vue
@@ -132,7 +132,7 @@
                     </div>
                 </uploader>
 
-                <ui-stack v-if="showAssetSelector && !isReadOnly" name="markdown-asset-selector" @closed="closeAssetSelector">
+                <Stack v-if="!isReadOnly" :open="showAssetSelector">
                     <asset-selector
                         :container="container"
                         :folder="folder"
@@ -142,22 +142,23 @@
                         @selected="assetsSelected"
                         @closed="closeAssetSelector"
                     />
-                </ui-stack>
+                </Stack>
 
-                <ui-stack narrow name="markdownCheatSheet" v-if="showCheatsheet" @closed="showCheatsheet = false">
+                <Stack size="narrow" v-model:open="showCheatsheet">
                     <div class="relative h-full overflow-auto bg-white p-6 dark:bg-gray-800 rounded-l-2xl">
-                        <Button
-                            icon="x"
-                            variant="ghost"
-                            class="sticky top-0 left-[100%] translate-x-[15%] translate-y-[-20%] bg-white dark:bg-gray-800"
-                            @click="showCheatsheet = false"
-                        />
+	                    <StackClose>
+	                        <Button
+	                            icon="x"
+	                            variant="ghost"
+	                            class="sticky top-0 left-[100%] translate-x-[15%] translate-y-[-20%] bg-white dark:bg-gray-800"
+	                        />
+	                    </StackClose>
                         <div class="prose prose-zinc prose-headings:font-medium prose-pre:prose-code:!text-white mx-auto max-w-3xl">
                             <h2 v-text="__('Markdown Cheatsheet')"></h2>
                             <div v-html="__('markdown.cheatsheet')"></div>
                         </div>
                     </div>
-                </ui-stack>
+                </Stack>
             </div>
         </div>
     </portal>
@@ -169,7 +170,7 @@ import { marked } from 'marked';
 import { markRaw } from 'vue';
 import { TextRenderer as PlainTextRenderer } from '@davidenke/marked-text-renderer';
 import throttle from '@/util/throttle.js';
-import { Button } from '@/components/ui';
+import { Button, Stack, StackClose } from '@/components/ui';
 
 import CodeMirror from 'codemirror/lib/codemirror';
 import 'codemirror/addon/edit/closebrackets';
@@ -244,6 +245,8 @@ export default {
         Uploader,
         Uploads,
         MarkdownToolbar,
+	    Stack,
+	    StackClose,
     },
 
     data() {
diff --git a/resources/js/components/inputs/relationship/InlinePublishForm.vue b/resources/js/components/inputs/relationship/InlinePublishForm.vue
index debda937d9e..32a9ef14838 100644
--- a/resources/js/components/inputs/relationship/InlinePublishForm.vue
+++ b/resources/js/components/inputs/relationship/InlinePublishForm.vue
@@ -1,12 +1,12 @@
 <template>
     <div>
-        <ui-stack
-            name="inline-editor"
+        <Stack
+	        open
             :before-close="shouldClose"
             :narrow="stackSize === 'narrow'"
             :half="stackSize === 'half'"
             :full="stackSize === 'full'"
-            @closed="close"
+            @update:open="close"
         >
             <div class="h-full overflow-scroll overflow-x-auto bg-white px-6 rounded-l-xl dark:bg-dark-800">
                 <div v-if="loading" class="absolute inset-0 z-200 flex items-center justify-center text-center">
@@ -30,7 +30,7 @@
                     </template>
                 </component>
             </div>
-        </ui-stack>
+        </Stack>
 
         <confirmation-modal
             v-if="closingWithChanges"
@@ -45,13 +45,15 @@
 </template>
 
 <script>
-import { Button, Icon } from '@/components/ui';
+import { Button, Icon, Stack } from '@/components/ui';
 
 export default {
     components: {
         Button,
         Icon,
+	    Stack,
     },
+
     props: {
         component: String,
         componentProps: Object,
diff --git a/resources/js/components/inputs/relationship/RelationshipInput.vue b/resources/js/components/inputs/relationship/RelationshipInput.vue
index ad097200862..a0bbca9d93d 100644
--- a/resources/js/components/inputs/relationship/RelationshipInput.vue
+++ b/resources/js/components/inputs/relationship/RelationshipInput.vue
@@ -73,7 +73,7 @@
                 </div>
             </div>
 
-            <ui-stack name="item-selector" v-if="isSelecting" @closed="isSelecting = false" v-slot="{ close }">
+            <Stack v-model:open="isSelecting">
                 <ItemSelector
                     :name="name"
                     :filters-url="filtersUrl"
@@ -89,9 +89,9 @@
                     :type="config.type"
                     :tree="config.query_scopes?.length > 0 ? null : tree"
                     @selected="selectionsUpdated"
-                    @closed="close"
+                    @closed="isSelecting = false"
                 />
-            </ui-stack>
+            </Stack>
 
             <input v-if="name" type="hidden" :name="name" :value="JSON.stringify(value)" />
         </template>
@@ -104,7 +104,7 @@ import ItemSelector from './Selector.vue';
 import CreateButton from './CreateButton.vue';
 import { Sortable, Plugins } from '@shopify/draggable';
 import RelationshipSelectField from './SelectField.vue';
-import { Button, Icon } from '@/components/ui';
+import { Button, Icon, Stack } from '@/components/ui';
 
 export default {
     props: {
@@ -147,6 +147,7 @@ export default {
         RelationshipSelectField,
         Button,
         Icon,
+	    Stack,
     },
 
     data() {
diff --git a/resources/js/components/nav/ItemEditor.vue b/resources/js/components/nav/ItemEditor.vue
index f1e89c90bad..721286ad58b 100644
--- a/resources/js/components/nav/ItemEditor.vue
+++ b/resources/js/components/nav/ItemEditor.vue
@@ -1,13 +1,6 @@
 <template>
-    <ui-stack narrow name="nav-item-editor" @closed="$emit('closed')" v-slot="{ close }">
-        <div class="m-2 flex h-full flex-col rounded-xl bg-white dark:bg-gray-800">
-            <div
-                class="flex items-center justify-between rounded-t-xl border-b border-gray-300 px-4 mb-3 py-2 dark:border-gray-950 dark:bg-gray-800"
-            >
-                <Heading size="lg">{{ creating ? __('Add Nav Item') : __('Edit Nav Item') }}</Heading>
-                <Button icon="x" variant="ghost" class="-me-2" @click="close" />
-            </div>
-
+    <Stack size="narrow" :title="creating ? __('Add Nav Item') : __('Edit Nav Item')" open @update:open="$emit('closed')">
+        <div class="m-2 mt-0 flex h-full flex-col rounded-xl bg-white dark:bg-gray-800">
             <div class="flex-1 overflow-auto">
                 <div class="p-3 flex flex-col space-y-6">
                     <Field id="display" :label="__('Display')" required>
@@ -39,11 +32,11 @@
                 </div>
             </div>
         </div>
-    </ui-stack>
+    </Stack>
 </template>
 
 <script>
-import { Button, Heading, Field, Input } from '@/components/ui';
+import { Button, Heading, Field, Input, Stack } from '@/components/ui';
 import { data_get } from '../../bootstrap/globals.js';
 
 export default {
@@ -52,6 +45,7 @@ export default {
         Heading,
         Field,
         Input,
+	    Stack,
     },
 
     emits: ['closed', 'updated'],
diff --git a/resources/js/components/nav/SectionEditor.vue b/resources/js/components/nav/SectionEditor.vue
index 2b05eef5546..7aabe168f22 100644
--- a/resources/js/components/nav/SectionEditor.vue
+++ b/resources/js/components/nav/SectionEditor.vue
@@ -1,13 +1,11 @@
 <template>
-    <ui-stack narrow name="nav-item-editor" @closed="$emit('closed')" v-slot="{ close }">
+    <Stack
+	    size="narrow"
+	    :title="creating ? __('Add Section') : __('Edit Section')"
+	    open
+	    @update:open="$emit('closed')"
+    >
         <div class="m-2 flex h-full flex-col rounded-xl bg-white dark:bg-gray-800">
-            <div
-                class="flex items-center justify-between rounded-t-xl border-b border-gray-300 px-4 mb-3 py-2 dark:border-gray-950 dark:bg-gray-800"
-            >
-                <Heading size="lg">{{ creating ? __('Add Section') : __('Edit Section') }}</Heading>
-                <Button icon="x" variant="ghost" class="-me-2" @click="close" />
-            </div>
-
             <div class="flex-1 overflow-auto">
                 <div class="p-3 flex flex-col space-y-6">
                     <Field id="display" :label="__('Display')" required>
@@ -18,11 +16,11 @@
                 </div>
             </div>
         </div>
-    </ui-stack>
+    </Stack>
 </template>
 
 <script>
-import { Button, Heading, Field, Input } from '@/components/ui';
+import { Button, Heading, Field, Input, Stack } from '@/components/ui';
 
 export default {
     components: {
@@ -30,6 +28,7 @@ export default {
         Heading,
         Field,
         Input,
+	    Stack,
     },
 
     emits: ['closed', 'updated'],
diff --git a/resources/js/components/portals/PortalTargets.vue b/resources/js/components/portals/PortalTargets.vue
index 341aaaa6f4b..cd84cb78001 100644
--- a/resources/js/components/portals/PortalTargets.vue
+++ b/resources/js/components/portals/PortalTargets.vue
@@ -17,29 +17,7 @@ export default {
 
         isSoloNarrowStack() {
             const stacks = this.$stacks.stacks();
-            return stacks.length === 1 && stacks[0]?.data?.vm?.narrow === true;
-        },
-    },
-
-    watch: {
-        hasStacks(hasStacks) {
-            hasStacks ? this.initStacks() : this.destroyStacks();
-        },
-    },
-
-    methods: {
-        initStacks() {
-            this.$events.$on('stacks.hit-area-clicked', (depth) => {
-                for (let count = this.$stacks.count(); count > depth; count--) {
-                    if (!this.$stacks.stacks()[count - 1].data.vm.runCloseCallback()) {
-                        return;
-                    }
-                }
-            });
-        },
-
-        destroyStacks() {
-            this.$events.$off('stacks.hit-area-clicked');
+            return stacks.length === 1 && stacks[0]?.data?.vm?.size === 'narrow';
         },
     },
 };
diff --git a/resources/js/components/revision-history/History.vue b/resources/js/components/revision-history/History.vue
index 4248504f9e0..b23d1058f5b 100644
--- a/resources/js/components/revision-history/History.vue
+++ b/resources/js/components/revision-history/History.vue
@@ -1,12 +1,5 @@
 <template>
     <div class="m-2 flex h-full flex-col rounded-xl bg-white dark:bg-gray-800">
-        <header
-            class="flex items-center justify-between rounded-t-xl border-b border-gray-300 px-4 mb-3 py-2 dark:border-gray-950 dark:bg-gray-800"
-        >
-            <Heading size="lg">{{ __('Revision History') }}</Heading>
-            <Button icon="x" variant="ghost" class="-me-2" @click="close" />
-        </header>
-
         <div class="flex-1 overflow-auto">
             <div class="loading flex h-full items-center justify-center" v-if="loading">
                 <Icon name="loading" />
@@ -42,6 +35,8 @@ import DateFormatter from '@/components/DateFormatter.js';
 import { Heading, Button, Icon } from '@/components/ui';
 
 export default {
+	emits: ['closed'],
+
     components: {
         Revision,
         Heading,
diff --git a/resources/js/components/structures/PageEditor.vue b/resources/js/components/structures/PageEditor.vue
index 6e132a60392..db4a3e30836 100644
--- a/resources/js/components/structures/PageEditor.vue
+++ b/resources/js/components/structures/PageEditor.vue
@@ -1,11 +1,19 @@
 <template>
-    <ui-stack narrow name="page-tree-linker" :before-close="shouldClose" @closed="$emit('closed')" v-slot="{ close }">
+    <Stack
+	    ref="stack"
+	    size="narrow"
+	    open
+	    :before-close="shouldClose"
+	    @update:open="$emit('closed')"
+    >
         <div class="flex h-full flex-col bg-gray-100 dark:bg-gray-850">
             <header
                 class="flex items-center justify-between border-b bg-white py-2 text-lg font-medium shadow-md dark:border-dark-950 dark:bg-dark-600 ltr:pl-6 ltr:pr-3 rtl:pl-3 rtl:pr-6"
             >
                 <Heading size="lg">{{ headerText }}</Heading>
-                <Button icon="x" variant="ghost" @click="close" />
+	            <StackClose>
+		            <Button icon="x" variant="ghost" />
+	            </StackClose>
             </header>
 
             <div v-if="loading" class="relative flex-1 overflow-auto">
@@ -44,7 +52,7 @@
                 class="flex flex-wrap flex-row-reverse gap-2 items-end justify-between border-t bg-gray-200 p-4 dark:border-dark-900 dark:bg-dark-600"
             >
                 <div class="flex flex-wrap justify-end" v-if="!readOnly">
-                    <Button variant="ghost" class="me-2" :text="__('Cancel')" @click="confirmClose(close)" />
+                    <Button variant="ghost" class="me-2" :text="__('Cancel')" @click="confirmClose" />
                     <Button variant="primary" :text="__('Apply')" @click="submit" />
                 </div>
                 <div v-if="type === 'entry'">
@@ -62,11 +70,11 @@
             @confirm="confirmCloseWithChanges"
             @cancel="closingWithChanges = false"
         />
-    </ui-stack>
+    </Stack>
 </template>
 
 <script>
-import { Heading, Button, PublishContainer, Icon } from '@/components/ui';
+import { Heading, Button, PublishContainer, Icon, Stack, StackClose } from '@/components/ui';
 import { flatten } from 'lodash-es';
 import { computed, ref } from 'vue';
 import { Pipeline, Request } from '@ui/Publish/SavePipeline.js';
@@ -80,6 +88,8 @@ export default {
         Button,
         PublishContainer,
         Icon,
+	    Stack,
+	    StackClose,
     },
 
     props: {
@@ -239,7 +249,7 @@ export default {
         },
 
         confirmClose(close) {
-            if (this.shouldClose()) close();
+            if (this.shouldClose()) this.$refs.stack.close();
         },
 
         confirmCloseWithChanges() {
diff --git a/resources/js/components/two-factor/RecoveryCodesModal.vue b/resources/js/components/two-factor/RecoveryCodesModal.vue
index 0ffc5fb413a..9206ec90e04 100644
--- a/resources/js/components/two-factor/RecoveryCodesModal.vue
+++ b/resources/js/components/two-factor/RecoveryCodesModal.vue
@@ -46,7 +46,7 @@ function copyToClipboard() {
 </script>
 
 <template>
-    <Modal :title="__('Recovery Codes')" :open="true" @update:open="$emit('cancel')">
+    <Modal :title="__('Recovery Codes')" open @update:open="$emit('cancel')">
         <div>
             <div v-if="loading" class="flex items-center justify-center text-center">
                 <Icon name="loading" />
diff --git a/resources/js/components/two-factor/Setup.vue b/resources/js/components/two-factor/Setup.vue
index d80f411c3bd..02170209365 100644
--- a/resources/js/components/two-factor/Setup.vue
+++ b/resources/js/components/two-factor/Setup.vue
@@ -52,7 +52,7 @@ function complete() {
 </script>
 
 <template>
-    <Modal v-if="setupModalOpen" :title="__('Set up Two Factor Authentication')" :open="true" @update:model-value="$emit('cancel')">
+    <Modal v-if="setupModalOpen" :title="__('Set up Two Factor Authentication')" open @update:model-value="$emit('cancel')">
         <div>
             <div v-if="loading" class="flex items-center justify-center text-center">
                 <Icon name="loading" />
diff --git a/resources/js/components/ui/Listing/Filters.vue b/resources/js/components/ui/Listing/Filters.vue
index ada70bda772..cb533f37abb 100644
--- a/resources/js/components/ui/Listing/Filters.vue
+++ b/resources/js/components/ui/Listing/Filters.vue
@@ -6,6 +6,7 @@ import {
     PanelHeader,
     Card,
     Heading,
+	Stack,
 } from '@ui';
 import { injectListingContext } from '../Listing/Listing.vue';
 import { computed, ref, watch, nextTick } from 'vue';
@@ -87,6 +88,7 @@ function handleStackClosed() {
     }
 
     open.value = false;
+
     nextTick(() => {
         requestAnimationFrame(() => {
             const wrapper = filtersButtonWrapperRef.value;
@@ -113,7 +115,7 @@ function handleStackClosed() {
             </Button>
         </div>
 
-        <ui-stack half name="filters" v-if="open" @closed="handleStackClosed">
+        <Stack size="half" :open="open" @update:open="handleStackClosed">
             <div ref="stackContentRef" class="flex-1 p-3 bg-white dark:bg-gray-800 h-full overflow-auto rounded-l-2xl relative">
                 <Button
                     icon="x"
@@ -157,7 +159,7 @@ function handleStackClosed() {
                     <Button variant="primary" :text="__('Done')" @click="handleStackClosed" />
                 </div>
             </div>
-        </ui-stack>
+        </Stack>
 
         <Button
             v-for="(badge, handle, index) in fieldFilterBadges"
diff --git a/resources/js/components/ui/Modal/Modal.vue b/resources/js/components/ui/Modal/Modal.vue
index 86fe445fe6c..e41316dad7b 100644
--- a/resources/js/components/ui/Modal/Modal.vue
+++ b/resources/js/components/ui/Modal/Modal.vue
@@ -13,7 +13,7 @@ defineOptions({
 
 const attrs = useAttrs();
 const slots = useSlots();
-const emit = defineEmits(['update:open', 'dismissed']);
+const emit = defineEmits(['update:open', 'opened', 'dismissed']);
 
 const props = defineProps({
 	/** When `true`, the modal's backdrop will be blurred */
@@ -24,6 +24,8 @@ const props = defineProps({
     icon: { type: [String, null], default: null },
 	/** The controlled open state of the modal. */
     open: { type: Boolean, default: false },
+	/** Callback that fires before the modal closes. */
+	beforeClose: { type: Function, default: () => true },
 	/** When `true`, clicking outside the modal will dismiss it. */
     dismissible: { type: Boolean, default: true },
 });
@@ -47,16 +49,14 @@ const modalClasses = cva({
     ],
 })({});
 
-const hasModalTitleComponent = hasComponent('ModalTitle');
-const isUsingOpenProp = computed(() => instance?.vnode.props?.hasOwnProperty('open'));
-
-const instance = getCurrentInstance();
-
 const modal = ref(null);
 const mounted = ref(false);
 const visible = ref(false);
 const escBinding = ref(null);
 
+const instance = getCurrentInstance();
+const hasModalTitleComponent = hasComponent('ModalTitle');
+const isUsingOpenProp = computed(() => instance?.vnode.props?.hasOwnProperty('open'));
 const portal = computed(() => modal.value ? `#portal-target-${modal.value.id}` : null);
 
 function open() {
@@ -66,10 +66,12 @@ function open() {
 
     nextTick(() => {
         mounted.value = true;
-
-        nextTick(() => visible.value = true);
-
 	    updateOpen(true);
+
+	    nextTick(() => {
+		    visible.value = true;
+			emit('opened');
+	    });
     });
 }
 
@@ -84,19 +86,28 @@ function close() {
 
 function dismiss() {
     if (!props.dismissible) return;
+	if (!runCloseCallback()) return;
 
     emit('dismissed');
     close();
 }
 
-provide('closeModal', close);
-
 function updateOpen(value) {
-    if (isUsingOpenProp.value) {
+	if (isUsingOpenProp.value && props.open !== value) {
         emit('update:open', value);
     }
 }
 
+function runCloseCallback() {
+	const shouldClose = props.beforeClose();
+
+	if (!shouldClose) return false;
+
+	close();
+
+	return true;
+}
+
 watch(
     () => props.open,
     (value) => value ? open() : close(),
@@ -114,7 +125,10 @@ onBeforeUnmount(() => {
 defineExpose({
     open,
     close,
+	runCloseCallback,
 });
+
+provide('closeModal', close);
 </script>
 
 <template>
diff --git a/resources/js/components/ui/Stack/Close.vue b/resources/js/components/ui/Stack/Close.vue
new file mode 100644
index 00000000000..1dca2373dae
--- /dev/null
+++ b/resources/js/components/ui/Stack/Close.vue
@@ -0,0 +1,14 @@
+<script setup>
+import { inject } from 'vue';
+import Button from '../Button/Button.vue';
+
+const closeStack = inject('closeStack');
+</script>
+
+<template>
+	<div data-ui-modal-close @click="closeStack">
+		<slot>
+			<Button variant="ghost" size="sm" icon="x" class="absolute top-3 right-2" />
+		</slot>
+	</div>
+</template>
diff --git a/resources/js/components/ui/Stack/Stack.vue b/resources/js/components/ui/Stack/Stack.vue
index 7afa41e40f5..c80b16a6c2d 100644
--- a/resources/js/components/ui/Stack/Stack.vue
+++ b/resources/js/components/ui/Stack/Stack.vue
@@ -1,4 +1,187 @@
+<script setup>
+import {
+	ref,
+	computed,
+	onMounted,
+	nextTick,
+	getCurrentInstance,
+	useSlots,
+	watch,
+	onBeforeUnmount,
+	provide
+} from 'vue';
+import { stacks, portals, events, keys, config } from '@/api';
+import wait from '@/util/wait.js';
+import {hasComponent} from "@/composables/has-component.js";
+import { Button, Heading } from "@ui";
+import Icon from "@ui/Icon/Icon.vue";
+
+const slots = useSlots();
+const emit = defineEmits(['update:open', 'opened']);
+
+const props = defineProps({
+	/** Title displayed at the top of the stack */
+	title: { type: String, default: '' },
+	/** Icon name. [Browse available icons](/?path=/story/components-icon--all-icons) */
+	icon: { type: [String, null], default: null },
+	/** The controlled open state of the stack. */
+	open: { type: Boolean, default: false },
+	/** Callback that fires before the stack closes. */
+	beforeClose: { type: Function, default: () => true },
+	/** Controls the size of the stack. Options: `narrow`, `half`, `full` */
+	size: { type: String, default: null },
+});
+
+const stack = ref(null);
+const mounted = ref(false);
+const visible = ref(false);
+const isHovering = ref(false);
+const escBinding = ref(null);
+const windowInnerWidth = ref(window.innerWidth);
+
+const instance = getCurrentInstance();
+const hasStackTitleComponent = hasComponent('StackTitle');
+const isUsingOpenProp = computed(() => instance?.vnode.props?.hasOwnProperty('open'));
+const portal = computed(() => stack.value ? `#portal-target-${stack.value.id}` : null);
+const depth = computed(() => stack.value?.data.depth);
+const isTopStack = computed(() => stacks.count() === depth.value);
+
+const offset = computed(() => {
+	if (isTopStack.value && props.size === 'narrow') {
+		return windowInnerWidth.value - 450;
+	} else if (isTopStack.value && props.size === 'half') {
+		return windowInnerWidth.value / 2;
+	}
+
+	// max of 200px, min of 80px
+	return Math.max(450 / (stacks.count() + 1), 80);
+});
+
+const leftOffset = computed(() => {
+	if (props.size === 'full') {
+		return 0;
+	}
+
+	if (isTopStack.value && (props.size === 'narrow' || props.size === 'half')) {
+		return offset.value;
+	}
+
+	return offset.value * depth.value;
+});
+
+const hasChild = computed(() => stacks.count() > depth.value);
+const direction = computed(() => config.get('direction', 'ltr'));
+
+const clickedHitArea = () => {
+	if (!visible.value) return;
+	if (!runCloseCallback()) return;
+
+	events.$emit(`stacks.${depth.value - 1}.hit-area-mouseout`);
+};
+
+const mouseEnterHitArea = () => {
+	if (!visible.value) return;
+
+	events.$emit(`stacks.${depth.value - 1}.hit-area-mouseenter`);
+};
+
+const mouseOutHitArea = () => {
+	if (!visible.value) return;
+
+	events.$emit(`stacks.${depth.value - 1}.hit-area-mouseout`);
+};
+
+const windowResized = () => windowInnerWidth.value = window.innerWidth;
+
+function open() {
+	if (!stack.value) stack.value = stacks.add(instance.proxy);
+
+	events.$on(`stacks.${depth.value}.hit-area-mouseenter`, () => (isHovering.value = true));
+	events.$on(`stacks.${depth.value}.hit-area-mouseout`, () => (isHovering.value = false));
+
+	escBinding.value = keys.bindGlobal('esc', close);
+
+	window.addEventListener('resize', windowResized);
+
+	nextTick(() => {
+		mounted.value = true;
+		updateOpen(true);
+
+		nextTick(() => {
+			visible.value = true;
+			emit('opened');
+		});
+	});
+}
+
+function close() {
+	visible.value = false;
+
+	events.$off(`stacks.${depth.value}.hit-area-mouseenter`);
+	events.$off(`stacks.${depth.value}.hit-area-mouseout`);
+
+	window.removeEventListener('resize', windowResized);
+
+	stack.value?.destroy();
+	stack.value = null;
+
+	escBinding.value?.destroy();
+	escBinding.value = null;
+
+	wait(300).then(() => {
+		mounted.value = false;
+		updateOpen(false);
+	});
+}
+
+function updateOpen(value) {
+	if (isUsingOpenProp.value && props.open !== value) {
+		emit('update:open', value);
+	}
+}
+
+function runCloseCallback() {
+	const shouldClose = props.beforeClose();
+
+	if (!shouldClose) return false;
+
+	close();
+
+	return true;
+}
+
+watch(
+	() => props.open,
+	(value) => value ? open() : close(),
+);
+
+onMounted(() => {
+	if (props.open) open();
+});
+
+onBeforeUnmount(() => {
+	events.$off(`stacks.${depth.value}.hit-area-mouseenter`);
+	events.$off(`stacks.${depth.value}.hit-area-mouseout`);
+
+	window.removeEventListener('resize', windowResized);
+
+	stack.value?.destroy();
+	escBinding.value?.destroy();
+});
+
+defineExpose({
+	open,
+	close,
+	runCloseCallback,
+});
+
+provide('closeStack', close);
+</script>
+
 <template>
+	<div v-if="slots.trigger" @click="open">
+		<slot name="trigger" />
+	</div>
     <teleport :to="portal" :order="depth" v-if="mounted">
         <div class="vue-portal-target stack">
             <div
@@ -25,175 +208,29 @@
                 <transition name="stack-slide">
                     <div
                         v-if="visible"
+                        data-ui-stack-content
                         class="stack-content fixed flex flex-col sm:end-1.5 overflow-auto bg-white dark:bg-gray-850 rounded-xl shadow-[0_8px_5px_-6px_rgba(0,0,0,0.1),_0_3px_8px_0_rgba(0,0,0,0.02),_0_30px_22px_-22px_rgba(39,39,42,0.15)] dark:shadow-[0_5px_20px_rgba(0,0,0,.5)] transition-transform duration-150 ease-out"
                         :class="[
-                            full ? 'inset-2 w-[calc(100svw-1rem)]' : 'inset-y-2',
+                            size === 'full' ? 'inset-2 w-[calc(100svw-1rem)]' : 'inset-y-2',
                             { '-translate-x-4 rtl:translate-x-4': isHovering }
                         ]"
                     >
-                        <slot name="default" :depth="depth" :close="close" />
+	                    <div
+		                    v-if="!hasStackTitleComponent && (title || icon)"
+		                    data-ui-stack-title
+		                    class="flex items-center justify-between rounded-t-xl border-b border-gray-300 px-4 mb-3 py-2 dark:border-gray-950 dark:bg-gray-800"
+	                    >
+		                    <div class="flex items-center gap-2">
+			                    <Icon :name="icon" v-if="icon" class="size-4" />
+			                    <Heading size="lg" :text="title" />
+		                    </div>
+		                    <Button icon="x" variant="ghost" class="-me-2" @click="close" />
+	                    </div>
+
+                        <slot />
                     </div>
                 </transition>
             </div>
         </div>
     </teleport>
-</template>
-
-<script>
-export default {
-    emits: ['closed', 'opened'],
-
-    props: {
-        name: {
-            type: String,
-            required: true,
-        },
-        beforeClose: {
-            type: Function,
-            default: () => true,
-        },
-        narrow: {
-            type: Boolean,
-        },
-        half: {
-            type: Boolean,
-        },
-        full: {
-            type: Boolean,
-        },
-    },
-
-    data() {
-        return {
-            stack: null,
-            mounted: false,
-            visible: false,
-            isHovering: false,
-            escBinding: null,
-            windowInnerWidth: window.innerWidth,
-        };
-    },
-
-    computed: {
-        portal() {
-            return this.stack ? `#portal-target-${this.stack.id}` : null;
-        },
-
-        depth() {
-            return this.stack.data.depth;
-        },
-
-        id() {
-            return `${this.name}-${this.$.uid}`;
-        },
-
-        offset() {
-            if (this.isTopStack && this.narrow) {
-                return this.windowInnerWidth - 450;
-            } else if (this.isTopStack && this.half) {
-                return this.windowInnerWidth / 2;
-            }
-
-            // max of 200px, min of 80px
-            return Math.max(450 / (this.$stacks.count() + 1), 80);
-        },
-
-        leftOffset() {
-            if (this.full) {
-                return 0;
-            }
-
-            if (this.isTopStack && (this.narrow || this.half)) {
-                return this.offset;
-            }
-
-            return this.offset * this.depth;
-        },
-
-        hasChild() {
-            return this.$stacks.count() > this.depth;
-        },
-
-        isTopStack() {
-            return this.$stacks.count() === this.depth;
-        },
-
-        direction() {
-            return this.$config.get('direction', 'ltr');
-        },
-    },
-
-    created() {
-        this.stack = this.$stacks.add(this);
-
-        this.$events.$on(`stacks.${this.depth}.hit-area-mouseenter`, () => (this.isHovering = true));
-        this.$events.$on(`stacks.${this.depth}.hit-area-mouseout`, () => (this.isHovering = false));
-        this.escBinding = this.$keys.bindGlobal('esc', this.close);
-
-        window.addEventListener('resize', this.handleResize);
-    },
-
-    unmounted() {
-        this.stack.destroy();
-        this.$events.$off(`stacks.${this.depth}.hit-area-mouseenter`);
-        this.$events.$off(`stacks.${this.depth}.hit-area-mouseout`);
-        this.escBinding.destroy();
-
-        window.removeEventListener('resize', this.handleResize);
-    },
-
-    methods: {
-        clickedHitArea() {
-            if (!this.visible) {
-                return;
-            }
-            this.$events.$emit(`stacks.hit-area-clicked`, this.depth - 1);
-            this.$events.$emit(`stacks.${this.depth - 1}.hit-area-mouseout`);
-        },
-
-        mouseEnterHitArea() {
-            if (!this.visible) {
-                return;
-            }
-            this.$events.$emit(`stacks.${this.depth - 1}.hit-area-mouseenter`);
-        },
-
-        mouseOutHitArea() {
-            if (!this.visible) {
-                return;
-            }
-            this.$events.$emit(`stacks.${this.depth - 1}.hit-area-mouseout`);
-        },
-
-        runCloseCallback() {
-            const shouldClose = this.beforeClose();
-
-            if (!shouldClose) return false;
-
-            this.close();
-
-            return true;
-        },
-
-        close() {
-            this.visible = false;
-            this.$wait(300).then(() => {
-                this.mounted = false;
-                this.$emit('closed');
-            });
-        },
-
-        handleResize() {
-            this.windowInnerWidth = window.innerWidth;
-        },
-    },
-
-    mounted() {
-        this.mounted = true;
-        this.$nextTick(() => {
-            this.visible = true;
-            this.$emit('opened');
-        });
-    },
-};
-</script>
+</template>
\ No newline at end of file
diff --git a/resources/js/components/ui/Stack/Title.vue b/resources/js/components/ui/Stack/Title.vue
new file mode 100644
index 00000000000..61710ea9aab
--- /dev/null
+++ b/resources/js/components/ui/Stack/Title.vue
@@ -0,0 +1,11 @@
+<script setup>
+defineOptions({
+	name: 'StackTitle',
+});
+</script>
+
+<template>
+	<div data-ui-stack-title>
+		<slot />
+	</div>
+</template>
diff --git a/resources/js/components/ui/index.js b/resources/js/components/ui/index.js
index b94ec2d4a50..2cf09ec7308 100644
--- a/resources/js/components/ui/index.js
+++ b/resources/js/components/ui/index.js
@@ -66,6 +66,8 @@ export { default as Subheading } from './Subheading.vue';
 export { default as Switch } from './Switch.vue';
 export { default as TabContent } from './Tabs/Content.vue';
 export { default as Stack } from './Stack/Stack.vue';
+export { default as StackClose } from './Stack/Close.vue';
+export { default as StackTitle } from './Stack/Title.vue';
 export { default as Table } from './Table/Table.vue';
 export { default as TableCell } from './Table/Cell.vue';
 export { default as TableColumn } from './Table/Column.vue';
diff --git a/resources/js/pages/Playground.vue b/resources/js/pages/Playground.vue
index d55727a1649..2feebed1e4d 100644
--- a/resources/js/pages/Playground.vue
+++ b/resources/js/pages/Playground.vue
@@ -352,10 +352,23 @@ defineProps(['icons']);
                         <template #trigger>
                             <ui-button text="How neat is that?" />
                         </template>
+	                    <p>This is some very basic example text to show you what stacks look like with content.</p>
                     </ui-modal>
                 </div>
             </section>
 
+	        <section class="space-y-4">
+		        <ui-heading size="lg">Stack</ui-heading>
+		        <div class="flex">
+			        <ui-stack title="That's Pretty Neat">
+				        <template #trigger>
+					        <ui-button text="How neat is that?" />
+				        </template>
+				        <p>This is some very basic example text to show you what stacks look like with content.</p>
+			        </ui-stack>
+		        </div>
+	        </section>
+
             <section class="space-y-4">
                 <ui-heading size="lg">Popover</ui-heading>
                 <div class="flex">
diff --git a/resources/js/stories/Modal.stories.ts b/resources/js/stories/Modal.stories.ts
index 4d1cdc2f012..f2378bc03d3 100644
--- a/resources/js/stories/Modal.stories.ts
+++ b/resources/js/stories/Modal.stories.ts
@@ -10,6 +10,13 @@ const meta = {
         ModalClose,
     },
     argTypes: {
+        'opened': {
+            description: 'Event handler called when the modal is opened.',
+            table: {
+                category: 'events',
+                type: { summary: '() => void' },
+            },
+        },
         'dismissed': {
             description: 'Event handler called when the modal is dismissed.',
             table: {
@@ -180,4 +187,4 @@ export const _WithFooter: Story = {
         },
         template: footerCode,
     }),
-};
+};
\ No newline at end of file
diff --git a/resources/js/stories/Stack.stories.ts b/resources/js/stories/Stack.stories.ts
new file mode 100644
index 00000000000..5fe3c1ba8a7
--- /dev/null
+++ b/resources/js/stories/Stack.stories.ts
@@ -0,0 +1,173 @@
+import type {Meta, StoryObj} from '@storybook/vue3';
+import {Button, Stack, StackClose, StackTitle} from '@ui';
+
+const meta = {
+    title: 'Overlays/Stack',
+    component: Stack,
+    subcomponents: {
+        StackTitle,
+        StackClose,
+    },
+    argTypes: {
+        'opened': {
+            description: 'Event handler called when the stack is opened.',
+            table: {
+                category: 'events',
+                type: { summary: '() => void' },
+            },
+        },
+        'update:open': {
+            description: 'Event handler called when the open state of the stack changes.',
+            table: {
+                category: 'events',
+                type: { summary: '(value: boolean) => void' },
+            },
+        },
+    },
+} satisfies Meta<typeof Stack>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const defaultCode = `
+<Stack v-model:open="isOpen" title="That's Pretty Neat">
+    <template #trigger>
+        <Button text="How neat is that?" />
+    </template>
+</Stack>
+`;
+
+export const _DocsIntro: Story = {
+    tags: ['!dev'],
+    parameters: {
+        docs: {
+            source: { code: defaultCode }
+        }
+    },
+    render: () => ({
+        components: { Stack, Button },
+        data: () => {
+            return { isOpen: false };
+        },
+        template: defaultCode,
+    }),
+};
+
+const customTitleCode = `
+<Stack v-model:open="isOpen">
+    <template #trigger>
+        <Button text="How neat is that?" />
+    </template>
+    <StackTitle class="text-center flex items-center justify-between">
+        <span>🍁</span>
+        <h2 class="font-serif text-xl">What's why they call it neature!</h2>
+        <span>🍁</span>
+    </StackTitle>
+</Stack>
+`;
+
+export const _CustomTitle: Story = {
+    tags: ['!dev'],
+    parameters: {
+        docs: {
+            source: { code: customTitleCode }
+        }
+    },
+    render: () => ({
+        components: { Stack, StackTitle, Button },
+        data: () => {
+            return { isOpen: false };
+        },
+        template: customTitleCode,
+    }),
+};
+
+const closeButtonCode = `
+<Stack 
+    v-model:open="isOpen" 
+    title="Hey look a close button" 
+    class="text-center"
+>
+    <template #trigger>
+        <Button text="Open Says Me" />
+    </template>
+    <StackClose class="text-center">
+        <Button text="Close Says Me" />
+    </StackClose>
+</Stack>
+`;
+
+export const _CloseButton: Story = {
+    tags: ['!dev'],
+    parameters: {
+        docs: {
+            source: { code: closeButtonCode }
+        }
+    },
+    render: () => ({
+        components: { Stack, StackClose, Button },
+        data: () => {
+            return { isOpen: false };
+        },
+        template: closeButtonCode,
+    }),
+};
+
+const iconCode = `
+<Stack 
+    v-model:open="isOpen" 
+    title="That's Pretty Neat" 
+    icon="fire-flame-burn-hot"
+>
+    <template #trigger>
+        <Button text="How neat is that?" />
+    </template>
+</Stack>
+`;
+
+export const _WithIcon: Story = {
+    tags: ['!dev'],
+    parameters: {
+        docs: {
+            source: { code: iconCode }
+        }
+    },
+    render: () => ({
+        components: { Stack, Button },
+        data: () => {
+            return { isOpen: false };
+        },
+        template: iconCode,
+    }),
+};
+
+const beforeCloseCode = `
+<Stack 
+    v-model:open="isOpen"
+    :before-close="() => {
+        if (confirm('Are you sure?')) {
+            return true; // let it close
+        } else {
+            return false; // prevent it from closing
+        }
+    }"
+>
+    <!-- -->
+</Stack>
+`;
+
+export const _BeforeClose: Story = {
+    tags: ['!dev'],
+    parameters: {
+        docs: {
+            source: { code: beforeCloseCode }
+        }
+    },
+    render: () => ({
+        components: { Stack, Button },
+        data: () => {
+            return { isOpen: false };
+        },
+        template: beforeCloseCode,
+    }),
+};
\ No newline at end of file
diff --git a/resources/js/stories/docs/Stack.mdx b/resources/js/stories/docs/Stack.mdx
new file mode 100644
index 00000000000..c2976b339bd
--- /dev/null
+++ b/resources/js/stories/docs/Stack.mdx
@@ -0,0 +1,29 @@
+import { Canvas, Meta, ArgTypes } from '@storybook/addon-docs/blocks';
+import * as StackStories from '../Stack.stories';
+
+<Meta of={StackStories} />
+
+# Stack
+Stacks are a good way of adding a layer of UX to the Control Panel.
+
+For example, when editing a related entry while you're already editing another entry would open a second publish form over the top. Once you're done, the layer would close and return you to your original task, without you losing any progress, or needing to navigate away.
+<Canvas of={StackStories._DocsIntro} sourceState={'shown'} />
+
+## Title
+Titles are required for accessibility, but you don't have to use the `title` prop if you want to style it differently. You have full control of the style and content by using the `StackTitle` component.
+<Canvas of={StackStories._CustomTitle} sourceState={'shown'} />
+
+## Close Button
+You can use the `StackClose` component to close the stack.
+<Canvas of={StackStories._CloseButton} sourceState={'shown'} />
+
+## Icon
+You can add an icon to the title by passing the `icon` prop.
+<Canvas of={StackStories._WithIcon} sourceState={'shown'} />
+
+## Preventing Stacks from closing
+Before a Stack is closed, you have the opportunity to cancel it. For instance, if your Stack contains a form, you may want to give a warning about unsaved changes when the user tries to close it. To prevent closing of a Stack, you should pass in a function that returns false to stop closing and true to allow it.
+<Canvas of={StackStories._BeforeClose} sourceState={'shown'} />
+
+## Arguments
+<ArgTypes of={StackStories} />
diff --git a/resources/js/tests/Package.test.js b/resources/js/tests/Package.test.js
index af3717f07fe..753112dc404 100644
--- a/resources/js/tests/Package.test.js
+++ b/resources/js/tests/Package.test.js
@@ -176,6 +176,8 @@ it('exports ui', async () => {
         'TabList',
         'TabTrigger',
         'Stack',
+        'StackClose',
+        'StackTitle',
         'Table',
         'TableCell',
         'TableColumn',