diff --git a/docs/app.vue b/docs/app.vue
index 63f32d9d..f509acd1 100644
--- a/docs/app.vue
+++ b/docs/app.vue
@@ -75,7 +75,7 @@ const sections = [
   { 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: 'SelectCustom', to: '/components/SelectCustom' }, { 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' }] },
-  { label: 'Overlays', links: [{ label: 'Modal', to: '/components/Modal' }, { label: 'Notification', to: '/components/Notification' }, { label: 'Popover', to: '/components/Popover' }, { label: 'Tooltip', to: '/components/Tooltip' }] }
+  { label: 'Overlays', links: [{ label: 'Modal', to: '/components/Modal' }, { label: 'Notification', to: '/components/Notification' }, { label: 'Popover', to: '/components/Popover' }, { label: 'Slideover', to: '/components/Slideover' }, { label: 'Tooltip', to: '/components/Tooltip' }] }
 ]
 </script>
 
diff --git a/docs/pages/components/[component].vue b/docs/pages/components/[component].vue
index a325e250..f0c79d36 100644
--- a/docs/pages/components/[component].vue
+++ b/docs/pages/components/[component].vue
@@ -114,6 +114,7 @@ const selectCustom = ref(people[0])
 const alertDialog = ref(false)
 const toggle = ref(false)
 const modal = ref(false)
+const slideover = ref(false)
 
 const defaultProps = {
   Button: {
@@ -271,6 +272,24 @@ const defaultProps = {
       }
     }
   },
+  Slideover: {
+    modelValue: slideover,
+    'onUpdate:modelValue': (v) => { slideover.value = v },
+    component: {
+      name: 'Button',
+      props: {
+        variant: 'secondary',
+        label: 'Open slideover',
+        onClick: () => { slideover.value = true }
+      }
+    },
+    slots: {
+      default: {
+        tag: 'div',
+        html: 'Slideover content'
+      }
+    }
+  },
   Popover: {
     slots: {
       panel: {
diff --git a/docs/pages/migration.vue b/docs/pages/migration.vue
index 42e5b003..bcdb3a77 100644
--- a/docs/pages/migration.vue
+++ b/docs/pages/migration.vue
@@ -234,6 +234,12 @@ const components = [
     nuxt3: true,
     capi: true
   },
+  {
+    label: 'Slideover',
+    to: '/components/Slideover',
+    nuxt3: true,
+    capi: true
+  },
   {
     label: 'Tooltip',
     to: '/components/Tooltip',