diff --git a/resources/js/components/SessionExpiry.vue b/resources/js/components/SessionExpiry.vue
index 032812449ba..be75e8331a0 100644
--- a/resources/js/components/SessionExpiry.vue
+++ b/resources/js/components/SessionExpiry.vue
@@ -2,129 +2,116 @@
     <div class="session-expiry">
         <button v-if="isWarning" class="session-expiry-stripe" @click="extend" v-text="warningText" />
 
-        <modal name="session-timeout-login" v-if="isShowingLogin" height="auto" :width="500">
-            <div class="-max-h-screen-px">
-                <div
-                    class="flex items-center justify-between rounded-t-lg border-b bg-gray-200 px-5 py-3 text-lg font-semibold dark:border-dark-900 dark:bg-dark-550"
-                >
-                    {{ __('Resume Your Session') }}
-                </div>
-
-                <div v-if="isUsingOauth" class="p-5">
-                    <a :href="oauthProvider.loginUrl" target="_blank" class="btn-primary">
-                        {{ __('Log in with :provider', { provider: oauthProvider.label }) }}
-                    </a>
-                    <div class="mt-4 text-2xs text-gray">
-                        {{ __('messages.session_expiry_new_window') }}
-                    </div>
+        <Modal :title="__('Resume Your Session')" :open="isShowingLogin" height="auto" :width="500">
+            <div v-if="isUsingOauth" class="p-5">
+                <a :href="oauthProvider.loginUrl" target="_blank" class="btn-primary">
+                    {{ __('Log in with :provider', { provider: oauthProvider.label }) }}
+                </a>
+                <div class="mt-4 text-2xs text-gray">
+                    {{ __('messages.session_expiry_new_window') }}
                 </div>
+            </div>
 
-                <div v-if="!isUsingOauth" class="publish-fields p-2">
-                    <div class="form-group w-full">
-                        <label v-text="__('messages.session_expiry_enter_password')" />
-                        <small class="help-block text-red-500" v-if="errors.email" v-text="errors.email[0]" />
-                        <small class="help-block text-red-500" v-if="errors.password" v-text="errors.password[0]" />
-                        <div class="flex items-center">
-                            <input
-                                type="password"
-                                v-model="password"
-                                ref="password"
-                                class="input-text"
-                                tabindex="1"
-                                autofocus
-                                @keydown.enter.prevent="submit"
-                            />
-                            <button @click="submit" class="btn-primary ltr:ml-2 rtl:mr-2" v-text="__('Log in')" />
-                        </div>
+            <div v-if="!isUsingOauth" class="publish-fields p-2">
+                <div class="form-group w-full">
+                    <label v-text="__('messages.session_expiry_enter_password')" />
+                    <small class="help-block text-red-500" v-if="errors.email" v-text="errors.email[0]" />
+                    <small class="help-block text-red-500" v-if="errors.password" v-text="errors.password[0]" />
+                    <div class="flex items-center">
+                        <Input
+                            type="password"
+                            v-model="password"
+                            ref="password"
+                            tabindex="1"
+                            autofocus
+                            @keydown.enter.prevent="submit"
+                        />
+                        <Button @click="submit" class="ms-2" variant="primary" :text="__('Log in')" />
                     </div>
                 </div>
             </div>
-        </modal>
-
-        <modal name="session-timeout-login" v-if="isShowingTwoFactorChallenge" height="auto" :width="500">
-            <div class="-max-h-screen-px">
-                <div
-                    class="flex items-center justify-between rounded-t-lg border-b bg-gray-200 px-5 py-3 text-lg font-semibold dark:border-dark-900 dark:bg-dark-550"
-                >
-                    {{ __('Resume Your Session') }}
-                </div>
-
-                <div class="publish-fields p-2">
-                    <div v-if="twoFactorMode === 'code'" class="form-group w-full">
-                        <label v-text="__('messages.session_expiry_enter_two_factor_code')" />
-                        <small class="help-block text-red-500" v-if="errors.code" v-text="errors.code[0]" />
-                        <div class="flex items-center">
-                            <input
-                                type="text"
-                                name="code"
-                                v-model="twoFactorCode"
-                                ref="twoFactorCode"
-                                class="input-text"
-                                tabindex="1"
-                                pattern="[0-9]*"
-                                maxlength="6"
-                                inputmode="numeric"
-                                autofocus
-                                autocomplete="one-time-code"
-                                @keydown.enter.prevent="submitTwoFactorChallenge"
-                            />
-                        </div>
+        </Modal>
+
+        <Modal :title="__('Resume Your Session')" :open="isShowingTwoFactorChallenge" height="auto" :width="500">
+            <div class="publish-fields p-2">
+                <div v-if="twoFactorMode === 'code'" class="form-group w-full">
+                    <label v-text="__('messages.session_expiry_enter_two_factor_code')" />
+                    <small class="help-block text-red-500" v-if="errors.code" v-text="errors.code[0]" />
+                    <div class="flex items-center">
+                        <Input
+                            name="code"
+                            v-model="twoFactorCode"
+                            ref="twoFactorCode"
+                            tabindex="1"
+                            pattern="[0-9]*"
+                            maxlength="6"
+                            inputmode="numeric"
+                            autofocus
+                            autocomplete="one-time-code"
+                            @keydown.enter.prevent="submitTwoFactorChallenge"
+                        />
                     </div>
+                </div>
 
-                    <div v-if="twoFactorMode === 'recovery_code'" class="form-group w-full">
-                        <label v-text="__('messages.session_expiry_enter_two_factor_recovery_code')" />
-                        <small
-                            class="help-block text-red-500"
-                            v-if="errors.recovery_code"
-                            v-text="errors.recovery_code[0]"
+                <div v-if="twoFactorMode === 'recovery_code'" class="form-group w-full">
+                    <label v-text="__('messages.session_expiry_enter_two_factor_recovery_code')" />
+                    <small
+                        class="help-block text-red-500"
+                        v-if="errors.recovery_code"
+                        v-text="errors.recovery_code[0]"
+                    />
+                    <div class="flex items-center">
+                        <Input
+                            name="recovery_code"
+                            v-model="twoFactorRecoveryCode"
+                            ref="twoFactorRecoveryCode"
+                            tabindex="1"
+                            maxlength="21"
+                            autofocus
+                            autocomplete="off"
+                            @keydown.enter.prevent="submitTwoFactorChallenge"
                         />
-                        <div class="flex items-center">
-                            <input
-                                type="text"
-                                name="recovery_code"
-                                v-model="twoFactorRecoveryCode"
-                                ref="twoFactorRecoveryCode"
-                                class="input-text"
-                                tabindex="1"
-                                maxlength="21"
-                                autofocus
-                                autocomplete="off"
-                                @keydown.enter.prevent="submitTwoFactorChallenge"
-                            />
-                        </div>
                     </div>
                 </div>
+            </div>
 
-                <div
-                    class="flex items-center justify-end border-t bg-gray-200 p-4 text-sm dark:border-dark-900 dark:bg-dark-550"
-                >
-                    <button
+            <template #footer>
+                <div class="flex items-center justify-end space-x-3 pt-3 pb-1">
+                    <Button
                         v-if="twoFactorMode === 'code'"
-                        class="text-gray hover:text-gray-900 dark:text-dark-150 dark:hover:text-dark-100"
+                        variant="ghost"
                         @click="twoFactorMode = 'recovery_code'"
-                        v-text="__('Use recovery code')"
+                        :text="__('Use recovery code')"
                     />
-                    <button
+                    <Button
                         v-if="twoFactorMode === 'recovery_code'"
-                        class="text-gray hover:text-gray-900 dark:text-dark-150 dark:hover:text-dark-100"
+                        variant="ghost"
                         @click="twoFactorMode = 'code'"
-                        v-text="__('Use one-time code')"
+                        :text="__('Use one-time code')"
                     />
-                    <button
-                        class="btn-primary ltr:ml-4 rtl:mr-4"
+                    <Button
+                        variant="primary"
                         @click="submitTwoFactorChallenge"
-                        v-text="__('Continue')"
+                        :text="__('Continue')"
                     />
                 </div>
-            </div>
-        </modal>
+            </template>
+        </Modal>
     </div>
 </template>
 
 <script>
+import { Modal, Input, Button } from '@statamic/ui';
+
 var counter;
 
 export default {
+    components: {
+        Modal,
+        Input,
+        Button,
+    },
+
     props: {
         warnAt: Number,
         lifetime: Number,
diff --git a/resources/js/components/actions/ConfirmableAction.vue b/resources/js/components/actions/ConfirmableAction.vue
index 20ec303211a..fd2fde078de 100644
--- a/resources/js/components/actions/ConfirmableAction.vue
+++ b/resources/js/components/actions/ConfirmableAction.vue
@@ -1,6 +1,6 @@
 <script setup>
 import { ref, computed, onUnmounted } from 'vue';
-import PublishFields from '../publish/Fields.vue';
+import { PublishContainer, FieldsProvider, PublishFields } from '@statamic/ui';
 import { requireElevatedSessionIf } from '@statamic/components/elevated-sessions/index.js';
 
 const props = defineProps({
@@ -115,7 +115,7 @@ defineExpose({
             :class="{ 'mb-4': action.fields.length }"
         />
 
-        <publish-container
+        <PublishContainer
             v-if="action.fields.length"
             name="confirm-action"
             :blueprint="fieldset"
@@ -123,9 +123,10 @@ defineExpose({
             :meta="action.meta"
             :errors="errors"
             @updated="values = $event"
-            v-slot="{ setFieldValue, setFieldMeta }"
         >
-            <publish-fields :fields="action.fields" @updated="setFieldValue" @meta-updated="setFieldMeta" />
-        </publish-container>
+            <FieldsProvider :fields="action.fields">
+                <PublishFields />
+            </FieldsProvider>
+        </PublishContainer>
     </confirmation-modal>
 </template>
diff --git a/resources/js/components/assets/Upload.vue b/resources/js/components/assets/Upload.vue
index 34ca634374d..ae1e662e3a1 100644
--- a/resources/js/components/assets/Upload.vue
+++ b/resources/js/components/assets/Upload.vue
@@ -35,13 +35,13 @@
             @cancel="showNewFilenameModal = false"
             @confirm="confirmNewFilename"
         >
-            <text-input autoselect v-model="newFilename" @keydown.enter="confirmNewFilename" />
+            <Input autoselect v-model="newFilename" @keydown.enter="confirmNewFilename" />
         </confirmation-modal>
     </div>
 </template>
 
 <script>
-import { Button, Dropdown, DropdownMenu, DropdownItem } from '@statamic/ui';
+import { Button, Dropdown, DropdownMenu, DropdownItem, Input } from '@statamic/ui';
 
 export default {
     components: {
@@ -49,6 +49,7 @@ export default {
         Dropdown,
         DropdownMenu,
         DropdownItem,
+        Input,
     },
 
     props: {
diff --git a/resources/js/components/collections/DeleteEntryConfirmation.vue b/resources/js/components/collections/DeleteEntryConfirmation.vue
index e7a1bab4716..008938fa3e2 100644
--- a/resources/js/components/collections/DeleteEntryConfirmation.vue
+++ b/resources/js/components/collections/DeleteEntryConfirmation.vue
@@ -1,44 +1,34 @@
+<script setup>
+import { Modal, ModalClose, Button } from '@statamic/ui';
+import { ref } from 'vue';
+
+const props = defineProps({
+    children: Number,
+});
+
+const modalOpen = ref(true);
+const shouldDeleteChildren = ref(false);
+</script>
+
 <template>
-    <modal name="delete-entry-confirmation">
-        <div class="confirmation-modal flex h-full flex-col">
-            <div class="p-4 pb-0 text-lg font-medium">
-                {{ __('Delete Entry') }}
-            </div>
-            <div class="flex-1 px-4 py-6 text-gray dark:text-dark-150">
-                <p class="mb-4" v-text="__('Are you sure you want to delete this entry?')" />
-                <label class="flex items-center" v-if="children">
-                    <input type="checkbox" class="ltr:mr-2 rtl:ml-2" v-model="shouldDeleteChildren" />
-                    {{ __n('Delete child entry|Delete :count child entries', children) }}
-                </label>
-            </div>
-            <div
-                class="flex items-center justify-end border-t bg-gray-200 p-4 text-sm dark:border-dark-900 dark:bg-dark-550"
-            >
-                <button
-                    class="text-gray hover:text-gray-900 dark:text-dark-150 dark:hover:text-dark-100"
-                    @click="$emit('cancel')"
-                    v-text="__('Cancel')"
-                />
-                <button
-                    class="btn-danger ltr:ml-4 rtl:mr-4"
+    <Modal :title="__('Delete Entry')" v-model:open="modalOpen">
+        <p class="mb-4" v-text="__('Are you sure you want to delete this entry?')" />
+        <label class="flex items-center" v-if="children">
+            <input type="checkbox" class="ltr:mr-2 rtl:ml-2" v-model="shouldDeleteChildren" />
+            {{ __n('Delete child entry|Delete :count child entries', children) }}
+        </label>
+
+        <template #footer>
+            <div class="flex items-center justify-end space-x-3 pt-3 pb-1">
+                <ModalClose>
+                    <Button variant="ghost" :text="__('Cancel')" />
+                </ModalClose>
+                <Button
+                    variant="primary"
+                    :text="__('Delete')"
                     @click="$emit('confirm', shouldDeleteChildren)"
-                    v-text="__('Delete')"
                 />
             </div>
-        </div>
-    </modal>
+        </template>
+    </Modal>
 </template>
-
-<script>
-export default {
-    props: {
-        children: Number,
-    },
-
-    data() {
-        return {
-            shouldDeleteChildren: false,
-        };
-    },
-};
-</script>
diff --git a/resources/js/components/collections/DeleteLocalizationConfirmation.vue b/resources/js/components/collections/DeleteLocalizationConfirmation.vue
index 8c81c2a4b82..2e8ce9da0dd 100644
--- a/resources/js/components/collections/DeleteLocalizationConfirmation.vue
+++ b/resources/js/components/collections/DeleteLocalizationConfirmation.vue
@@ -1,63 +1,57 @@
 <template>
-    <modal name="delete-entry-confirmation">
-        <div class="confirmation-modal flex h-full flex-col">
-            <div class="p-4 pb-0 text-lg font-medium">
-                {{ __('Delete') }}
-            </div>
-            <div class="flex-1 px-4 py-6 text-gray dark:text-dark-150">
-                <div class="publish-fields">
-                    <div class="form-group" :class="{ 'has-error': this.error }">
-                        <div class="field-inner">
-                            <label class="publish-field-label" for="field_behavior">
-                                <span v-text="__('Localizations')" />
-                                <i class="required ltr:ml-1 rtl:mr-1">*</i>
-                            </label>
-                            <div class="help-block -mt-2"><p v-html="instructions" /></div>
-                        </div>
+    <Modal :title="__('Delete')" :open="true" @update:open="$emit('cancel')">
+        <p>Are you sure you want to delete this?</p>
 
-                        <div class="button-group-fieldtype-wrapper">
-                            <div class="btn-group">
-                                <button
-                                    @click="behavior = 'delete'"
-                                    class="btn px-4"
-                                    :class="{ active: behavior === 'delete' }"
-                                >
-                                    <span v-text="__('Delete')" />
-                                </button>
-                                <button
-                                    @click="behavior = 'copy'"
-                                    class="btn px-4"
-                                    :class="{ active: behavior === 'copy' }"
-                                >
-                                    <span v-text="__('Detach')" />
-                                </button>
-                            </div>
-                        </div>
+        <Field
+            :errors="error ? [__('statamic::validation.required')] : null"
+            :instructions
+            :label="__('Localizations')"
+        >
+            <ButtonGroup ref="buttonGroup">
+                <Button
+                    ref="button"
+                    :name="name"
+                    @click="behavior = 'delete'"
+                    value="delete"
+                    :variant="behavior === 'delete' ? 'primary' : 'default'"
+                    :text="__('Delete')"
+                />
 
-                        <small
-                            v-if="error"
-                            class="help-block mb-0 mt-2 text-red-500"
-                            v-text="__('statamic::validation.required')"
-                        />
-                    </div>
-                </div>
-            </div>
-            <div
-                class="flex items-center justify-end border-t bg-gray-200 p-4 text-sm dark:border-dark-900 dark:bg-dark-550"
-            >
-                <button
-                    class="text-gray hover:text-gray-900 dark:text-dark-150 dark:hover:text-dark-100"
+                <Button
+                    ref="button"
+                    :name="name"
+                    @click="behavior = 'copy'"
+                    value="copy"
+                    :variant="behavior === 'copy' ? 'primary' : 'default'"
+                    :text="__('Detach')"
+                />
+            </ButtonGroup>
+        </Field>
+
+        <template #footer>
+            <div class="flex items-center justify-end space-x-3 pt-3 pb-1">
+                <Button
+                    variant="ghost"
                     @click="$emit('cancel')"
-                    v-text="__('Cancel')"
+                    :text="__('Cancel')"
                 />
-                <button class="btn-danger ltr:ml-4 rtl:mr-4" @click="confirm" v-text="__('Confirm')" />
+                <Button variant="primary" @click="confirm" :text="__('Confirm')" />
             </div>
-        </div>
-    </modal>
+        </template>
+    </Modal>
 </template>
 
 <script>
+import { Modal, Field, Button, ButtonGroup } from '@statamic/ui';
+
 export default {
+    components: {
+        Modal,
+        Field,
+        Button,
+        ButtonGroup,
+    },
+
     props: {
         entries: { type: Number, required: true },
     },
diff --git a/resources/js/components/entries/PublishForm.vue b/resources/js/components/entries/PublishForm.vue
index 8333d41c1a6..2e91ec3f23f 100644
--- a/resources/js/components/entries/PublishForm.vue
+++ b/resources/js/components/entries/PublishForm.vue
@@ -233,8 +233,8 @@
             <div class="publish-fields">
                 <div class="form-group publish-field field-w-full">
                     <label v-text="__('Origin')" />
-                    <div class="help-block -mt-2" v-text="__('messages.entry_origin_instructions')"></div>
-                    <select-input v-model="selectedOrigin" :options="originOptions" :placeholder="false" />
+                    <div class="help-block mt-2" v-text="__('messages.entry_origin_instructions')"></div>
+                    <Select class="w-full" v-model="selectedOrigin" :options="originOptions" :placeholder="false" />
                 </div>
             </div>
         </confirmation-modal>
@@ -267,6 +267,7 @@ import {
     StatusIndicator,
     Subheading,
     Switch,
+    Select,
 } from '@statamic/ui';
 import PublishContainer from '@statamic/components/ui/Publish/Container.vue';
 import PublishTabs from '@statamic/components/ui/Publish/Tabs.vue';
@@ -309,6 +310,7 @@ export default {
         StatusIndicator,
         Subheading,
         Switch,
+        Select,
     },
 
     props: {
diff --git a/resources/js/components/field-actions/FieldActionModal.vue b/resources/js/components/field-actions/FieldActionModal.vue
index 7e58441353b..c9cb24c89b4 100644
--- a/resources/js/components/field-actions/FieldActionModal.vue
+++ b/resources/js/components/field-actions/FieldActionModal.vue
@@ -13,7 +13,7 @@
 
                 <div v-if="warningText" v-text="warningText" class="text-red-500" :class="{ 'mb-4': hasFields }" />
 
-                <publish-container
+                <PublishContainer
                     v-if="hasFields && !resolving"
                     :name="containerName"
                     :blueprint="blueprint"
@@ -21,14 +21,11 @@
                     :meta="meta"
                     :errors="errors"
                     @updated="values = $event"
-                    v-slot="{ setFieldValue, setFieldMeta }"
                 >
-                    <publish-fields
-                        :fields="blueprint.tabs[0].fields"
-                        @updated="setFieldValue"
-                        @meta-updated="setFieldMeta"
-                    />
-                </publish-container>
+                    <FieldsProvider :fields="blueprint.tabs[0].fields">
+                        <PublishFields />
+                    </FieldsProvider>
+                </PublishContainer>
             </div>
         </confirmation-modal>
     </div>
@@ -36,8 +33,11 @@
 
 <script>
 import uniqid from 'uniqid';
+import { PublishContainer, FieldsProvider, PublishFields } from '@statamic/ui';
 
 export default {
+    components: { PublishContainer, FieldsProvider, PublishFields },
+
     props: {
         fields: {
             type: Object,
diff --git a/resources/js/components/modals/ConfirmationModal.vue b/resources/js/components/modals/ConfirmationModal.vue
index 7428ba54566..65eb6cf00f7 100644
--- a/resources/js/components/modals/ConfirmationModal.vue
+++ b/resources/js/components/modals/ConfirmationModal.vue
@@ -1,115 +1,95 @@
-<template>
-    <modal name="confirmation-modal" @opened="$emit('opened')">
-        <form class="confirmation-modal flex h-full flex-col" @submit.prevent="submit">
-            <header
-                v-if="title"
-                class="flex items-center justify-between rounded-t-lg border-b bg-gray-200 px-5 py-3 text-lg font-semibold dark:border-dark-900 dark:bg-dark-550"
-            >
-                {{ __(title) }}
-            </header>
-            <div class="relative flex-1 px-5 py-6 text-gray dark:text-dark-150">
-                <slot name="body">
-                    <p v-if="bodyText" v-text="bodyText" />
-                    <slot v-else>
-                        <p>{{ __('Are you sure?') }}</p>
-                    </slot>
-                </slot>
-                <div
-                    v-if="busy"
-                    class="pointer-events-none absolute inset-0 flex select-none items-center justify-center bg-white bg-opacity-75 dark:bg-dark-700"
-                >
-                    <loading-graphic text="" />
-                </div>
-            </div>
-            <div
-                class="flex items-center justify-end rounded-b-lg border-t bg-gray-200 px-5 py-3 text-sm dark:border-dark-900 dark:bg-dark-550"
-            >
-                <button
-                    type="button"
-                    class="btn-flat"
-                    @click.prevent="$emit('cancel')"
-                    v-text="__(cancelText)"
-                    v-if="cancellable"
-                    :disabled="busy"
-                />
-                <button
-                    class="ltr:ml-4 rtl:mr-4"
-                    :class="buttonClass"
-                    :disabled="disabled || busy"
-                    v-text="__(buttonText)"
-                />
-            </div>
-        </form>
-    </modal>
-</template>
+<script setup>
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
+import { Modal, ModalClose, Button } from '@statamic/ui';
 
-<script>
-export default {
-    emits: ['opened', 'confirm', 'cancel'],
-    props: {
-        title: {
-            type: String,
-        },
-        bodyText: {
-            type: String,
-        },
-        buttonText: {
-            type: String,
-            default: 'Confirm',
-        },
-        cancellable: {
-            type: Boolean,
-            default: true,
-        },
-        cancelText: {
-            type: String,
-            default: 'Cancel',
-        },
-        danger: {
-            type: Boolean,
-            default: false,
-        },
-        disabled: {
-            type: Boolean,
-            default: false,
-        },
-        busy: {
-            type: Boolean,
-            default: false,
-        },
-    },
+const emit = defineEmits(['opened', 'confirm', 'cancel']);
 
-    data() {
-        return {
-            escBinding: null,
-        };
+const props = defineProps({
+    title: {
+        type: String,
     },
-
-    computed: {
-        buttonClass() {
-            return this.danger ? 'btn-danger' : 'btn-primary';
-        },
+    bodyText: {
+        type: String,
+    },
+    buttonText: {
+        type: String,
+        default: 'Confirm',
+    },
+    cancellable: {
+        type: Boolean,
+        default: true,
+    },
+    cancelText: {
+        type: String,
+        default: 'Cancel',
+    },
+    danger: {
+        type: Boolean,
+        default: false,
+    },
+    disabled: {
+        type: Boolean,
+        default: false,
     },
+    busy: {
+        type: Boolean,
+        default: false,
+    },
+});
 
-    methods: {
-        dismiss() {
-            if (this.busy) return;
+onMounted(() => emit('opened'));
 
-            this.$emit('cancel');
-        },
-        submit() {
-            if (this.busy) return;
+const modalOpen = ref(true);
 
-            this.$emit('confirm');
-        },
-    },
+function updateModalOpen(open) {
+    if (! open && props.busy) {
+        return;
+    }
 
-    created() {
-        this.escBinding = this.$keys.bind('esc', this.dismiss);
-    },
+    modalOpen.value = open;
 
-    beforeUnmount() {
-        this.escBinding.destroy();
-    },
-};
+    if (! open) emit('cancel');
+}
+
+function submit() {
+    if (props.busy) return;
+
+    emit('confirm');
+}
 </script>
+
+<template>
+    <Modal ref="modal" :title="__(title)" :open="modalOpen" @update:open="updateModalOpen">
+        <div
+            v-if="busy"
+            class="pointer-events-none absolute inset-0 flex select-none items-center justify-center bg-white bg-opacity-75 dark:bg-dark-700"
+        >
+            <loading-graphic text="" />
+        </div>
+
+        <p v-if="bodyText" v-text="bodyText" />
+        <slot v-else>
+            <p>{{ __('Are you sure?') }}</p>
+        </slot>
+
+        <template #footer>
+            <div class="flex items-center justify-end space-x-3 pt-3 pb-1">
+                <ModalClose asChild>
+                    <Button
+                        v-if="cancellable"
+                        variant="ghost"
+                        :disabled="busy"
+                        :text="__(cancelText)"
+                    />
+                </ModalClose>
+                <Button
+                    type="submit"
+                    :variant="danger ? 'danger' : 'primary'"
+                    :disabled="disabled || busy"
+                    :text="__(buttonText)"
+                    @click="submit"
+                />
+            </div>
+        </template>
+    </Modal>
+</template>
diff --git a/resources/js/components/modals/ElevatedSessionModal.vue b/resources/js/components/modals/ElevatedSessionModal.vue
index 7012fec1174..e008935b261 100644
--- a/resources/js/components/modals/ElevatedSessionModal.vue
+++ b/resources/js/components/modals/ElevatedSessionModal.vue
@@ -1,73 +1,73 @@
 <template>
-    <modal name="elevated-session" height="auto" :width="500" @closed="modalClosed" v-slot="{ close }" click-to-close>
-        <div class="-max-h-screen-px">
-            <div
-                class="flex items-center justify-between rounded-t-lg border-b bg-gray-200 px-5 py-3 text-lg font-semibold dark:border-dark-900 dark:bg-dark-550"
-            >
-                {{ method === 'password_confirmation' ? __('Confirm Your Password') : __('Verification Code') }}
-            </div>
-
-            <div class="publish-fields p-2">
-                <div class="form-group w-full">
-                    <template v-if="method === 'password_confirmation'">
-                        <label v-text="__('messages.elevated_session_enter_password')" />
-                        <small class="help-block text-red-500" v-if="errors.password" v-text="errors.password[0]" />
-                        <div class="flex items-center">
-                            <input
-                                type="password"
-                                v-model="password"
-                                ref="password"
-                                class="input-text"
-                                tabindex="1"
-                                autofocus
-                                @keydown.enter.prevent="submit"
-                            />
-                            <button
-                                @click="submit(close)"
-                                class="btn-primary ltr:ml-2 rtl:mr-2"
-                                v-text="__('Confirm')"
-                            />
-                        </div>
-                    </template>
+    <Modal :title="title" :open="open" @update:open="modalClosed">
+        <div class="publish-fields p-2">
+            <div class="form-group w-full">
+                <template v-if="method === 'password_confirmation'">
+                    <label v-text="__('messages.elevated_session_enter_password')" />
+                    <small class="help-block text-red-500" v-if="errors.password" v-text="errors.password[0]" />
+                    <div class="flex items-center">
+                        <Input
+                            type="password"
+                            v-model="password"
+                            ref="password"
+                            tabindex="1"
+                            autofocus
+                            @keydown.enter.prevent="submit"
+                        />
+                        <Button
+                            @click="submit"
+                            class="ms-2"
+                            :text="__('Confirm')"
+                            variant="primary"
+                        />
+                    </div>
+                </template>
 
-                    <template v-if="method === 'verification_code'">
-                        <label v-text="__('messages.elevated_session_enter_verification_code')" />
-                        <small
-                            class="help-block text-red-500"
-                            v-if="errors.verification_code"
-                            v-text="errors.verification_code[0]"
+                <template v-if="method === 'verification_code'">
+                    <label v-text="__('messages.elevated_session_enter_verification_code')" />
+                    <small
+                        class="help-block text-red-500"
+                        v-if="errors.verification_code"
+                        v-text="errors.verification_code[0]"
+                    />
+                    <div class="flex items-center">
+                        <Input
+                            type="text"
+                            v-model="verificationCode"
+                            ref="verificationCode"
+                            tabindex="1"
+                            autofocus
+                            @keydown.enter.prevent="submit"
+                        />
+                        <Button
+                            @click="resendCode"
+                            class="ms-2"
+                            :disabled="resendDisabled"
+                            :text="__('Resend code')"
+                        />
+                        <Button
+                            @click="submit"
+                            class="ms-2"
+                            variant="primary"
+                            :text="__('Confirm')"
                         />
-                        <div class="flex items-center">
-                            <input
-                                type="text"
-                                v-model="verificationCode"
-                                ref="verificationCode"
-                                class="input-text"
-                                tabindex="1"
-                                autofocus
-                                @keydown.enter.prevent="submit"
-                            />
-                            <button
-                                @click="resendCode"
-                                class="btn ltr:ml-2 rtl:mr-2"
-                                :disabled="resendDisabled"
-                                v-text="__('Resend code')"
-                            />
-                            <button
-                                @click="submit(close)"
-                                class="btn-primary ltr:ml-2 rtl:mr-2"
-                                v-text="__('Confirm')"
-                            />
                         </div>
-                    </template>
-                </div>
+                </template>
             </div>
         </div>
-    </modal>
+    </Modal>
 </template>
 
 <script>
+import { Modal, Input, Button } from '@statamic/ui';
+
 export default {
+    components: {
+        Modal,
+        Input,
+        Button,
+    },
+
     props: {
         method: String,
     },
@@ -79,11 +79,18 @@ export default {
             errors: [],
             shouldResolve: false,
             resendDisabled: false,
+            open: true,
         };
     },
 
+    computed: {
+        title() {
+            return this.method === 'password_confirmation' ? __('Confirm Your Password') : __('Verification Code');
+        },
+    },
+
     methods: {
-        submit(close) {
+        submit() {
             let payload = {
                 password: this.password,
                 verification_code: this.verificationCode,
@@ -93,7 +100,7 @@ export default {
                 .post(cp_url('elevated-session'), payload)
                 .then((response) => {
                     this.shouldResolve = true;
-                    close();
+                    this.modalClosed();
                 })
                 .catch((error) => {
                     this.errors = error.response.data.errors;
@@ -119,6 +126,7 @@ export default {
         },
 
         modalClosed() {
+            this.open = false;
             this.$emit('closed', this.shouldResolve);
         },
     },
diff --git a/resources/js/components/modals/KeyboardShortcutsModal.vue b/resources/js/components/modals/KeyboardShortcutsModal.vue
index 57e04f24fbe..3dda4282f77 100644
--- a/resources/js/components/modals/KeyboardShortcutsModal.vue
+++ b/resources/js/components/modals/KeyboardShortcutsModal.vue
@@ -1,10 +1,7 @@
 <template>
-    <modal v-if="open" name="keyboard-shortcuts" :width="380" @closed="open = false" click-to-close>
+    <Modal :title="__('Keyboard Shortcuts')" v-model:open="open" :width="380">
         <div class="-max-h-screen-px">
-            <h1 class="border-b bg-gray-200 p-4 text-center dark:border-dark-900 dark:bg-dark-700">
-                {{ __('Keyboard Shortcuts') }}
-            </h1>
-            <div class="relative p-6">
+            <div class="relative pt-2">
                 <div class="shortcut-pair">
                     <span class="shortcut-combo">
                         <span class="shortcut">shift</span><span class="shortcut-joiner">+</span
@@ -54,11 +51,17 @@
                 </div>
             </div>
         </div>
-    </modal>
+    </Modal>
 </template>
 
 <script>
+import { Modal } from '@statamic/ui';
+
 export default {
+    components: {
+        Modal,
+    },
+
     data() {
         return {
             open: false,
diff --git a/resources/js/components/navigation/RemovePageConfirmation.vue b/resources/js/components/navigation/RemovePageConfirmation.vue
index 6bb41d3be7b..9158bc8e13e 100644
--- a/resources/js/components/navigation/RemovePageConfirmation.vue
+++ b/resources/js/components/navigation/RemovePageConfirmation.vue
@@ -1,47 +1,39 @@
+<script setup>
+import { Modal, Button } from '@statamic/ui';
+import { ref } from 'vue';
+
+const emits = defineEmits(['confirm', 'cancel']);
+
+const props = defineProps({
+    children: Number,
+});
+
+const modalOpen = ref(true);
+const shouldDeleteChildren = ref(false);
+</script>
+
 <template>
-    <modal name="remove-page-confirmation">
-        <div class="confirmation-modal flex h-full flex-col">
-            <div class="p-4 pb-0 text-lg font-medium">
-                {{ __('Remove Page') }}
-            </div>
-            <div class="flex-1 px-4 py-6 text-gray dark:text-dark-150">
-                <p class="mb-4" v-text="__('Are you sure you want to remove this page?')" />
-                <p class="mb-4" v-text="__('Only the references will be removed. Entries will not be deleted.')" />
-                <label class="flex items-center" v-if="children">
-                    <input type="checkbox" class="ltr:mr-2 rtl:ml-2" v-model="shouldDeleteChildren" />
-                    {{ __n('Remove child page|Remove :count child pages', children) }}
-                </label>
-            </div>
-            <div
-                class="flex items-center justify-end border-t bg-gray-200 p-4 text-sm dark:border-dark-900 dark:bg-dark-550"
-            >
-                <button
-                    class="text-gray hover:text-gray-900 dark:text-dark-150 dark:hover:text-dark-100"
+    <Modal :title="__('Remove Page')" v-model:open="modalOpen">
+        <p class="mb-4" v-text="__('Are you sure you want to remove this page?')" />
+        <p class="mb-4" v-text="__('Only the references will be removed. Entries will not be deleted.')" />
+        <label class="flex items-center" v-if="children">
+            <input type="checkbox" class="ltr:mr-2 rtl:ml-2" v-model="shouldDeleteChildren" />
+            {{ __n('Remove child page|Remove :count child pages', children) }}
+        </label>
+
+        <template #footer>
+            <div class="flex items-center justify-end space-x-3 pt-3 pb-1">
+                <Button
+                    variant="ghost"
                     @click="$emit('cancel')"
-                    v-text="__('Cancel')"
+                    :text="__('Cancel')"
                 />
-                <button
-                    class="btn-danger ltr:ml-4 rtl:mr-4"
+                <Button
+                    variant="danger"
                     @click="$emit('confirm', shouldDeleteChildren)"
-                    v-text="__('Remove')"
+                    :text="__('Remove')"
                 />
             </div>
-        </div>
-    </modal>
+        </template>
+    </Modal>
 </template>
-
-<script>
-export default {
-    emits: ['confirm', 'cancel'],
-
-    props: {
-        children: Number,
-    },
-
-    data() {
-        return {
-            shouldDeleteChildren: false,
-        };
-    },
-};
-</script>
diff --git a/resources/js/components/two-factor/RecoveryCodesModal.vue b/resources/js/components/two-factor/RecoveryCodesModal.vue
index 283dc6289ea..8d955c4bbd6 100644
--- a/resources/js/components/two-factor/RecoveryCodesModal.vue
+++ b/resources/js/components/two-factor/RecoveryCodesModal.vue
@@ -2,6 +2,7 @@
 import { ref, onMounted } from 'vue';
 import LoadingGraphic from '@statamic/components/LoadingGraphic.vue';
 import axios from 'axios';
+import { Modal, Button } from '@statamic/ui';
 
 const emit = defineEmits(['cancel', 'close']);
 
@@ -46,20 +47,13 @@ function copyToClipboard() {
 </script>
 
 <template>
-    <modal name="two-factor-recovery-codes" @closed="$emit('cancel')">
+    <Modal :title="__('Recovery Codes')" :open="true" @update:open="$emit('cancel')">
         <div>
             <div v-if="loading" class="absolute inset-0 z-200 flex items-center justify-center text-center">
                 <loading-graphic />
             </div>
 
             <template v-else>
-                <div class="-max-h-screen-px">
-                    <div
-                        class="flex items-center justify-between rounded-t-lg border-b bg-gray-200 px-5 py-3 text-lg font-semibold dark:border-dark-900 dark:bg-dark-550"
-                    >
-                        {{ __('Recovery Codes') }}
-                    </div>
-                </div>
                 <div class="p-5">
                     <p class="mb-6">{{ __('statamic::messages.two_factor_recovery_codes') }}</p>
 
@@ -74,23 +68,24 @@ function copyToClipboard() {
                     </div>
 
                     <div class="flex items-center space-x-4">
-                        <button class="btn" v-if="canCopy" @click="copyToClipboard">{{ __('Copy') }}</button>
+                        <Button v-if="canCopy" @click="copyToClipboard">{{ __('Copy') }}</Button>
 
-                        <a class="btn" :href="downloadUrl" download>{{ __('Download') }}</a>
+                        <Button :href="downloadUrl" download>{{ __('Download') }}</Button>
 
-                        <button class="btn" @click.prevent="confirming = true">
+                        <Button @click.prevent="confirming = true">
                             {{ __('Refresh recovery codes') }}
-                        </button>
+                        </Button>
                     </div>
                 </div>
-                <div
-                    class="flex items-center justify-end border-t bg-gray-200 p-4 text-sm dark:border-dark-900 dark:bg-dark-550"
-                >
-                    <button class="btn" @click="$emit('close')" v-text="__('Close')" />
-                </div>
             </template>
         </div>
-    </modal>
+
+        <template #footer>
+            <div class="flex items-center justify-end space-x-3 pt-3 pb-1">
+                <Button variant="primary" @click="$emit('close')" :text="__('Close')" />
+            </div>
+        </template>
+    </Modal>
 
     <confirmation-modal
         v-if="confirming"
diff --git a/resources/js/components/two-factor/Setup.vue b/resources/js/components/two-factor/Setup.vue
index 60e53b90b0a..63e336f90d0 100644
--- a/resources/js/components/two-factor/Setup.vue
+++ b/resources/js/components/two-factor/Setup.vue
@@ -3,6 +3,7 @@ import { ref, onMounted } from 'vue';
 import LoadingGraphic from '@statamic/components/LoadingGraphic.vue';
 import TwoFactorRecoveryCodesModal from '@statamic/components/two-factor/RecoveryCodesModal.vue';
 import axios from 'axios';
+import { Modal, Input, Button } from '@statamic/ui';
 
 const emit = defineEmits(['setup-complete', 'cancel', 'cancel']);
 
@@ -52,21 +53,14 @@ function complete() {
 </script>
 
 <template>
-    <modal v-if="setupModalOpen" name="two-factor-setup" @closed="$emit('cancel')">
+    <Modal v-if="setupModalOpen" :title="__('Set up Two Factor Authentication')" :open="true" @update:model-value="$emit('cancel')">
         <div>
             <div v-if="loading" class="absolute inset-0 z-200 flex items-center justify-center text-center">
                 <loading-graphic />
             </div>
 
             <template v-else>
-                <div class="-max-h-screen-px">
-                    <div
-                        class="flex items-center justify-between rounded-t-lg border-b bg-gray-200 px-5 py-3 text-lg font-semibold dark:border-dark-900 dark:bg-dark-550"
-                    >
-                        {{ __('Set up Two Factor Authentication') }}
-                    </div>
-                </div>
-                <div class="p-5">
+                <div>
                     <p class="mb-6">{{ __('statamic::messages.two_factor_setup_instructions') }}</p>
 
                     <div class="flex justify-center space-x-6">
@@ -82,9 +76,7 @@ function complete() {
                             >
                                 {{ __('Verification Code') }}
                             </label>
-                            <input
-                                type="text"
-                                class="input-text"
+                            <Input
                                 name="code"
                                 pattern="[0-9]*"
                                 maxlength="6"
@@ -97,24 +89,25 @@ function complete() {
                         </div>
                     </div>
                 </div>
-                <div
-                    class="flex items-center justify-end border-t bg-gray-200 p-4 text-sm dark:border-dark-900 dark:bg-dark-550"
-                >
-                    <button
-                        class="text-gray hover:text-gray-900 dark:text-dark-150 dark:hover:text-dark-100"
-                        @click="$emit('close')"
-                        v-text="__('Cancel')"
-                    />
-                    <button
-                        class="btn-primary ltr:ml-4 rtl:mr-4"
-                        :disabled="!code"
-                        @click="confirm"
-                        v-text="__('Confirm')"
-                    />
-                </div>
             </template>
         </div>
-    </modal>
+
+        <template #footer>
+            <div class="flex items-center justify-end space-x-3 pt-3 pb-1">
+                <Button
+                    variant="ghost"
+                    @click="$emit('close')"
+                    :text="__('Cancel')"
+                />
+                <Button
+                    :disabled="!code"
+                    variant="primary"
+                    @click="confirm"
+                    :text="__('Confirm')"
+                />
+            </div>
+        </template>
+    </Modal>
 
     <TwoFactorRecoveryCodesModal
         v-if="recoveryCodesModalOpen"
diff --git a/resources/js/components/two-factor/TwoFactor.vue b/resources/js/components/two-factor/TwoFactor.vue
index 7b36cb5570b..d4937a15087 100644
--- a/resources/js/components/two-factor/TwoFactor.vue
+++ b/resources/js/components/two-factor/TwoFactor.vue
@@ -45,9 +45,9 @@ function resetComplete() {
                     <p class="mb-4 text-sm text-gray">{{ __('statamic::messages.two_factor_enable_introduction') }}</p>
 
                     <div class="flex space-x-2">
-                        <button class="btn" @click="openSetupModal">
+                        <Button @click="openSetupModal">
                             {{ __('Enable two factor authentication') }}
-                        </button>
+                        </Button>
                     </div>
                 </div>
             </template>
@@ -56,9 +56,9 @@ function resetComplete() {
                 <p class="mb-4 text-sm text-gray">{{ __('statamic::messages.two_factor_enabled') }}</p>
 
                 <div class="flex items-center space-x-4">
-                    <button class="btn" @click="openRecoveryCodesModal">
+                    <Button @click="openRecoveryCodesModal">
                         {{ __('Show recovery codes') }}
-                    </button>
+                    </Button>
 
                     <DisableTwoFactor
                         :url="routes.disable"
@@ -66,9 +66,9 @@ function resetComplete() {
                         @reset-complete="resetComplete"
                         v-slot="{ confirm }"
                     >
-                        <button class="btn-danger" @click="confirm">
+                        <Button variant="danger" @click="confirm">
                             {{ __('Disable two factor authentication') }}
-                        </button>
+                        </Button>
                     </DisableTwoFactor>
                 </div>
             </template>
diff --git a/resources/js/components/ui/Modal/Modal.vue b/resources/js/components/ui/Modal/Modal.vue
index 074f3824590..ad845bd98f9 100644
--- a/resources/js/components/ui/Modal/Modal.vue
+++ b/resources/js/components/ui/Modal/Modal.vue
@@ -2,9 +2,13 @@
 import { cva } from 'cva';
 import { hasComponent } from '@statamic/composables/has-component.js';
 import { DialogContent, DialogOverlay, DialogPortal, DialogRoot, DialogTitle, DialogTrigger } from 'reka-ui';
+import { getCurrentInstance, ref, watch } from 'vue';
+
+const emit = defineEmits(['update:open']);
 
 const props = defineProps({
     title: { type: String, default: '' },
+    open: { type: Boolean, default: false },
 });
 
 const hasModalTitleComponent = hasComponent('ModalTitle');
@@ -22,10 +26,32 @@ const modalClasses = cva({
         'slide-in-from-top-2',
     ],
 })({});
+
+const instance = getCurrentInstance();
+const isUsingOpenProp = instance && 'open' in instance.vnode.props;
+
+const open = ref(props.open);
+
+watch(
+    () => props.open,
+    (value) => open.value = value,
+);
+
+// When the parent component controls the open state, emit an update event
+// so it can update its state, which eventually gets passed down as a prop.
+// Otherwise, just update the local state.
+function updateOpen(value) {
+    if (isUsingOpenProp) {
+        emit('update:open', value);
+        return;
+    }
+
+    open.value = value;
+}
 </script>
 
 <template>
-    <DialogRoot>
+    <DialogRoot :open @update:open="updateOpen">
         <DialogTrigger data-ui-modal-trigger>
             <slot name="trigger" />
         </DialogTrigger>
diff --git a/resources/js/components/ui/index.js b/resources/js/components/ui/index.js
index b5721872d84..2981d0437dc 100644
--- a/resources/js/components/ui/index.js
+++ b/resources/js/components/ui/index.js
@@ -35,6 +35,9 @@ import { default as Heading } from './Heading.vue';
 import { default as Icon } from './Icon.vue';
 import { default as Input } from './Input/Input.vue';
 import { default as Label } from './Label.vue';
+import { default as Modal } from './Modal/Modal.vue';
+import { default as ModalClose } from './Modal/Close.vue';
+import { default as ModalTitle } from './Modal/Title.vue';
 import { default as Panel } from './Panel/Panel.vue';
 import { default as PanelFooter } from './Panel/Footer.vue';
 import { default as PanelHeader } from './Panel/Header.vue';
@@ -107,6 +110,9 @@ export {
     Icon,
     Input,
     Label,
+    Modal,
+    ModalClose,
+    ModalTitle,
     Panel,
     PanelFooter,
     PanelHeader,