diff --git a/docs/app.vue b/docs/app.vue
index 6be4422f65..950c9a25d8 100644
--- a/docs/app.vue
+++ b/docs/app.vue
@@ -61,7 +61,7 @@ import { UseDark } from '@vueuse/components'
 const sections = [
   { label: 'Getting Started', links: [{ label: 'Usage', to: '/' }, { label: 'Examples', to: '/examples' }, { label: 'Migration', to: '/migration' }, { label: 'Dark mode', to: '/dark' }] },
   { label: 'Elements', links: [{ label: 'Avatar', to: '/components/Avatar' }, { label: 'AvatarGroup', to: '/components/AvatarGroup' }, { label: 'Badge', to: '/components/Badge' }, { label: 'Button', to: '/components/Button' }, { label: 'Dropdown', to: '/components/Dropdown' }, { label: 'Icon', to: '/components/Icon' }] },
-  { label: 'Feedback', links: [{ label: 'Alert', to: '/components/Alert' }] },
+  { label: 'Feedback', links: [{ label: 'Alert', to: '/components/Alert' }, { label: 'AlertDialog', to: '/components/AlertDialog' }] },
   { label: 'Forms', links: [{ label: 'Checkbox', to: '/components/Checkbox' }, { label: 'Input', to: '/components/Input' }, { label: 'FormGroup', to: '/components/FormGroup' }, { label: 'Radio', to: '/components/Radio' }, { label: 'Select', to: '/components/Select' }, { label: 'Textarea', to: '/components/Textarea' }, { label: 'Toggle', to: '/components/Toggle' }] },
   { label: 'Layout', links: [{ label: 'Card', to: '/components/Card' }, { label: 'Container', to: '/components/Container' }] },
   // { label: 'Navigation', links: [{ label: 'Pills', to: '/components/Pills' }, { label: 'Tabs', to: '/components/Tabs' }, { label: 'VerticalNavigation', to: '/components/VerticalNavigation' }] },
diff --git a/docs/pages/components/[component].vue b/docs/pages/components/[component].vue
index 6db2e6e803..1e2144aea7 100644
--- a/docs/pages/components/[component].vue
+++ b/docs/pages/components/[component].vue
@@ -100,6 +100,7 @@ const is = `U${params.component}`
 
 const component = nuxtApp.vueApp.component(is)
 
+const alertDialog = ref(false)
 const toggle = ref(false)
 const modal = ref(false)
 
@@ -113,6 +114,19 @@ const defaultProps = {
   Alert: {
     title: 'A new software update is available. See what’s new in version 2.0.4.'
   },
+  AlertDialog: {
+    title: 'Are you sure you want to close this modal?',
+    modelValue: alertDialog,
+    'onUpdate:modelValue': (v) => { alertDialog.value = v },
+    component: {
+      name: 'Button',
+      props: {
+        variant: 'secondary',
+        label: 'Open modal',
+        onClick: () => { alertDialog.value = true }
+      }
+    }
+  },
   Avatar: {
     src: 'https://picsum.photos/200/300'
   },
diff --git a/docs/pages/migration.vue b/docs/pages/migration.vue
index 33684feb3f..39bbb5eb4b 100644
--- a/docs/pages/migration.vue
+++ b/docs/pages/migration.vue
@@ -116,7 +116,15 @@ const components = [
   },
   {
     label: 'Alert',
-    to: '/components/Alert'
+    to: '/components/Alert',
+    nuxt3: true
+  },
+  {
+    label: 'AlertDialog',
+    to: '/components/AlertDialog',
+    nuxt3: true,
+    capi: true,
+    preset: true
   },
   {
     label: 'Input',