diff --git a/site/content/examples/13-actions/00-actions/App.svelte b/site/content/examples/13-actions/00-actions/App.svelte
new file mode 100644
index 0000000000..4b1660c97a
--- /dev/null
+++ b/site/content/examples/13-actions/00-actions/App.svelte
@@ -0,0 +1,33 @@
+<script>
+	import { clickOutside } from "./click_outside.js";
+
+	let showModal = true;
+
+	function handleOutclick(){
+		showModal = false;
+	}
+</script>
+
+<style>
+	.box {
+		--width: 100px;
+		--height: 100px;
+		position: absolute;
+		width: var(--width);
+		height: var(--height);
+		left: calc(50% - var(--width) / 2);
+		top: calc(50% - var(--height) / 2);
+		border-radius: 4px;
+		background-color: #ff3e00;
+		color: #fff;
+		text-align: center;
+		font-style: bold;
+	}
+</style>
+
+<button on:click={() => (showModal = true)}>Show Modal</button>
+{#if showModal}
+	<div class="box" use:clickOutside on:outclick={handleOutclick}>
+		Click outside me!
+	</div>
+{/if}
\ No newline at end of file
diff --git a/site/content/examples/13-actions/00-actions/click_outside.js b/site/content/examples/13-actions/00-actions/click_outside.js
new file mode 100644
index 0000000000..f275a0d001
--- /dev/null
+++ b/site/content/examples/13-actions/00-actions/click_outside.js
@@ -0,0 +1,15 @@
+export function clickOutside(node) {
+	const handleClick = (event) => {
+		if (!node.contains(event.target)) {
+			node.dispatchEvent(new CustomEvent("outclick"));
+		}
+	};
+
+	document.addEventListener("click", handleClick, true);
+
+	return {
+		destroy() {
+			document.removeEventListener("click", handleClick, true);
+		},
+	};
+};
diff --git a/site/content/examples/13-actions/00-actions/meta.json b/site/content/examples/13-actions/00-actions/meta.json
new file mode 100644
index 0000000000..463fc963af
--- /dev/null
+++ b/site/content/examples/13-actions/00-actions/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "The use directive"
+}
\ No newline at end of file