diff --git a/apps/examples/src/examples/external-dialog/ExternalDialog.tsx b/apps/examples/src/examples/external-dialog/ExternalDialog.tsx
new file mode 100644
index 000000000..59add6757
--- /dev/null
+++ b/apps/examples/src/examples/external-dialog/ExternalDialog.tsx
@@ -0,0 +1,13 @@
+import { Tldraw } from '@tldraw/tldraw'
+import '@tldraw/tldraw/tldraw.css'
+
+// This CSS file overrides the default styles for dialogs
+import './external-dialog.css'
+
+export default function ExternalDialog() {
+	return (
+		<div style={{ margin: 32, width: 600, height: 400 }}>
+			<Tldraw />
+		</div>
+	)
+}
diff --git a/apps/examples/src/examples/external-dialog/README.md b/apps/examples/src/examples/external-dialog/README.md
new file mode 100644
index 000000000..e37d2212f
--- /dev/null
+++ b/apps/examples/src/examples/external-dialog/README.md
@@ -0,0 +1,10 @@
+---
+title: External dialog
+component: ./ExternalDialog.tsx
+category: ui
+priority: 3
+---
+
+---
+
+You can make dialogs pop outside of the `Tldraw` component by overriding our default styles.
diff --git a/apps/examples/src/examples/external-dialog/external-dialog.css b/apps/examples/src/examples/external-dialog/external-dialog.css
new file mode 100644
index 000000000..f674e48f9
--- /dev/null
+++ b/apps/examples/src/examples/external-dialog/external-dialog.css
@@ -0,0 +1,3 @@
+.tlui-dialog__overlay {
+	position: fixed;
+}