diff --git a/packages/x-components/src/components/modals/main-modal.vue b/packages/x-components/src/components/modals/main-modal.vue
index 9af67045c..c1d1a20dd 100644
--- a/packages/x-components/src/components/modals/main-modal.vue
+++ b/packages/x-components/src/components/modals/main-modal.vue
@@ -14,7 +14,7 @@
@@ -126,6 +119,45 @@ The `contentClass` prop can be used to add classes to the modal content.
+
+```
+
+### Customizing the modal events
+
+The modal events can be customized by changing its props values:
+
+- To add or subtract events to open or close the modal,
+- To modify or remove the default
+ [`UserClickedOutOfMainModal`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)
+ that the modal emits.
+
+In this example, we are changing the `openEvents` prop to add another event, and removing the event
+that the modal would emit when the user clicks out of the modal.
+
+```vue live
+
+
+ Open X
+
+ Close X
+
+
+
+