diff --git a/docs/components/dialog.md b/docs/components/dialog.md
index 3a91200e9..311551735 100644
--- a/docs/components/dialog.md
+++ b/docs/components/dialog.md
@@ -5,12 +5,8 @@
 [component-header:sl-dialog]
 
 ```html preview
-<sl-dialog label="Please select" class="dialog-overview">
-  <sl-select>
-    <sl-menu-item value="1">Option 1</sl-menu-item>
-    <sl-menu-item value="2">Option 2</sl-menu-item>
-    <sl-menu-item value="3">Option 3</sl-menu-item>
-  </sl-select>
+<sl-dialog label="Dialog" class="dialog-overview">
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
   <sl-button slot="footer" variant="primary">Close</sl-button>
 </sl-dialog>
 
@@ -26,6 +22,28 @@
 </script>
 ```
 
+```jsx react
+import { useState } from 'react';
+import { SlButton, SlDialog } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <SlDialog label="Dialog" open={open} onSlAfterHide={() => setOpen(false)}>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+        <SlButton slot="footer" variant="primary" onClick={() => setOpen(false)}>
+          Close
+        </SlButton>
+      </SlDialog>
+
+      <SlButton onClick={() => setOpen(true)}>Open Dialog</SlButton>
+    </>
+  );
+};
+```
+
 ## UX Tips
 
 - Use a dialog when you immediately require the user's attention, e.g. confirming a destructive action.