1 files changed, 21 insertions, 0 deletions
diff --git a/alpinejs/packages/docs/src/en/magics/root.md b/alpinejs/packages/docs/src/en/magics/root.md
new file mode 100644
index 0000000..e07e8e8
--- /dev/null
+++ b/alpinejs/packages/docs/src/en/magics/root.md
@@ -0,0 +1,21 @@
+---
+order: 7
+prefix: $
+title: root
+---
+
+# `$root`
+
+`$root` is a magic property that can be used to retrieve the root element of any Alpine component. In other words the closest element up the DOM tree that contains `x-data`.
+
+```alpine
+<div x-data data-message="Hello World!">
+    <button @click="alert($root.dataset.message)">Say Hi</button>
+</div>
+```
+
+<!-- START_VERBATIM -->
+<div x-data data-message="Hello World!" class="demo">
+    <button @click="alert($root.dataset.message)">Say Hi</button>
+</div>
+<!-- END_VERBATIM -->