diff --git a/packages/api-generator/src/locale/en/VConfirmEdit.json b/packages/api-generator/src/locale/en/VConfirmEdit.json
index 2ebe5cdd16f..61341dd2aea 100644
--- a/packages/api-generator/src/locale/en/VConfirmEdit.json
+++ b/packages/api-generator/src/locale/en/VConfirmEdit.json
@@ -2,5 +2,9 @@
   "props": {
     "cancelText": "Text for the cancel button",
     "okText": "Text for the ok button"
+  },
+  "events": {
+    "ok": "The event emitted when the user clicks the OK button",
+    "cancel": "The event emitted when the user clicks the Cancel button"
   }
 }
diff --git a/packages/docs/src/data/nav.json b/packages/docs/src/data/nav.json
index 28f3d43a158..0a0a3e0a0c0 100644
--- a/packages/docs/src/data/nav.json
+++ b/packages/docs/src/data/nav.json
@@ -224,6 +224,10 @@
         "title": "calendars",
         "subfolder": "components"
       },
+      {
+        "title": "confirm-edit",
+        "subfolder": "components"
+      },
       {
         "title": "empty-states",
         "subfolder": "components"
diff --git a/packages/docs/src/data/page-to-api.json b/packages/docs/src/data/page-to-api.json
index 36322ada286..d9bc80d1c4e 100644
--- a/packages/docs/src/data/page-to-api.json
+++ b/packages/docs/src/data/page-to-api.json
@@ -58,6 +58,7 @@
   "components/chip-groups": ["VChip", "VChipGroup"],
   "components/chips": ["VChip", "VChipGroup"],
   "components/color-pickers": ["VColorPicker"],
+  "components/confirm-edit": ["VConfirmEdit"],
   "components/combobox": ["VCombobox"],
   "components/data-iterators": ["VDataIterator"],
   "components/data-tables": [
diff --git a/packages/docs/src/examples/v-confirm-edit/misc-date-picker.vue b/packages/docs/src/examples/v-confirm-edit/misc-date-picker.vue
new file mode 100644
index 00000000000..5c818ed6156
--- /dev/null
+++ b/packages/docs/src/examples/v-confirm-edit/misc-date-picker.vue
@@ -0,0 +1,24 @@
+<template>
+  <v-card
+    class="mx-auto"
+    max-width="328"
+    rounded="lg"
+    border
+  >
+    <v-confirm-edit v-model="date">
+      <template v-slot:default="{ model: proxyModel, actions }">
+        <v-date-picker v-model="proxyModel.value">
+          <template v-slot:actions>
+            <component :is="actions"></component>
+          </template>
+        </v-date-picker>
+      </template>
+    </v-confirm-edit>
+  </v-card>
+</template>
+
+<script setup>
+  import { shallowRef } from 'vue'
+
+  const date = shallowRef()
+</script>
diff --git a/packages/docs/src/examples/v-confirm-edit/usage.vue b/packages/docs/src/examples/v-confirm-edit/usage.vue
new file mode 100644
index 00000000000..e62a71808da
--- /dev/null
+++ b/packages/docs/src/examples/v-confirm-edit/usage.vue
@@ -0,0 +1,92 @@
+<template>
+  <ExamplesUsageExample
+    v-model="model"
+    :code="code"
+    :options="options"
+    :script="script"
+    name="v-avatar"
+  >
+    <div>
+      <v-confirm-edit v-model="value" v-bind="props">
+        <template v-slot:default="{ model: proxyModel, actions }">
+          <v-card
+            class="mx-auto"
+            max-width="320"
+            title="Update Field"
+          >
+            <template v-slot:text>
+              <v-text-field
+                v-model="proxyModel.value"
+                messages="Modify my value"
+              ></v-text-field>
+            </template>
+
+            <template v-slot:actions>
+              <v-spacer></v-spacer>
+
+              <component :is="actions"></component>
+            </template>
+          </v-card>
+        </template>
+      </v-confirm-edit>
+    </div>
+
+    <template v-slot:configuration>
+      <v-text-field v-model="okText" label="Ok text"></v-text-field>
+      <v-text-field v-model="cancelText" label="Cancel text"></v-text-field>
+    </template>
+  </ExamplesUsageExample>
+</template>
+
+<script setup>
+  const model = ref('default')
+  const options = []
+  const value = ref('Egg Plant')
+  const okText = ref('Ok')
+  const cancelText = ref('Cancel')
+
+  const props = computed(() => {
+    return {
+      'ok-text': okText.value === 'Ok' ? undefined : okText.value,
+      'cancel-text': cancelText.value === 'Cancel' ? undefined : cancelText.value,
+      'v-model': 'model',
+    }
+  })
+
+  const slots = computed(() => {
+    return `
+  <template v-slot:default="{ model: proxyModel, actions }">
+    <v-card
+      class="mx-auto"
+      max-width="320"
+      title="Update Field"
+    >
+      <template v-slot:text>
+        <v-text-field
+          v-model="proxyModel.value"
+          messages="Modify my value"
+        ></v-text-field>
+      </template>
+
+      <template v-slot:actions>
+        <v-spacer></v-spacer>
+
+        <component :is="actions"></component>
+      </template>
+    </v-card>
+  </template>
+`
+  })
+
+  const script = computed(() => {
+    return `<script setup>
+  import { shallowRef } from 'vue'
+
+  const model = shallowRef('Egg plant')
+<` + '/script>'
+  })
+
+  const code = computed(() => {
+    return `<v-confirm-edit${propsToString(props.value)}>${slots.value}</v-confirm-edit>`
+  })
+</script>
diff --git a/packages/docs/src/pages/en/components/confirm-edit.md b/packages/docs/src/pages/en/components/confirm-edit.md
new file mode 100644
index 00000000000..60808954fe8
--- /dev/null
+++ b/packages/docs/src/pages/en/components/confirm-edit.md
@@ -0,0 +1,48 @@
+---
+emphasized: true
+meta:
+  nav: Confirm Edit
+  title: Confirm Edit
+  description: The confirm edit component is used to allow the user to verify their changes before they are committed. This is useful when you want to prevent accidental changes or to allow the user to cancel their changes.
+  keywords: v-confirm-edit, confirm edit, vuetify confirm edit, vuetify confirm edit component, vuetify confirm edit examples
+related:
+  - /components/avatars/
+  - /components/icons/
+  - /components/toolbars/
+features:
+  github: /labs/VConfirmEdit/
+  label: 'C: VConfirmEdit'
+  report: true
+---
+
+# Confirm edit
+
+The `v-confirm-edit` component is used to allow the user to verify their changes before they are committed.
+
+![Badge Entry](https://cdn.vuetifyjs.com/docs/images/components-temp/v-badge/v-badge-entry.png)
+
+<PageFeatures />
+
+## Usage
+
+<ExamplesUsage name="v-confirm-edit" />
+
+<PromotedEntry />
+
+## API
+
+| Component | Description |
+| - | - |
+| [v-confirm-edit](/api/v-confirm-edit/) | Primary Component |
+
+<ApiInline hide-links />
+
+## Guide
+
+The `v-confirm-edit` component is an intuitive way to capture a model's changes before they are committed. This is useful when you want to prevent accidental changes or to allow the user to cancel their changes.
+
+### Pickers
+
+It's easy to integrate pickers into the `v-confirm-edit` component. This allows you to provide a more user-friendly experience when selecting dates, times, or colors.
+
+<ExamplesExample file="v-confirm-edit/misc-date-picker" />
diff --git a/packages/docs/src/pages/en/introduction/roadmap.md b/packages/docs/src/pages/en/introduction/roadmap.md
index 58a9204bc4b..6f0fbc95780 100644
--- a/packages/docs/src/pages/en/introduction/roadmap.md
+++ b/packages/docs/src/pages/en/introduction/roadmap.md
@@ -29,7 +29,7 @@ The following is a list of all planned components for the year 2024.
 | [v-empty-state](/components/empty-states/) | *️⃣ | April 2024 |
 | [v-sparkline](/components/sparklines/) | *️⃣ | April 2024 |
 | [v-speed-dial](/components/speed-dials/) | *️⃣ | April 2024 |
-| v-confirm-edit | *️⃣ | April 2024 |
+| [v-confirm-edit](/components/confirm-edit/) | *️⃣ | April 2024 |
 | [v3.7 (Odyssey)](https://github.com/vuetifyjs/vuetify/milestone/73) | | { .bg-surface-light } |
 | [v-treeview](/components/treeview/) | *️⃣ | July 2024 |
 | [v-number-input](/components/number-inputs/) | *️⃣  | July 2024 |