diff --git a/docs/src/pages/components/PaginationNav.svx b/docs/src/pages/components/PaginationNav.svx
index 7ae8dd1d..690921fc 100644
--- a/docs/src/pages/components/PaginationNav.svx
+++ b/docs/src/pages/components/PaginationNav.svx
@@ -9,6 +9,12 @@
 
 <PaginationNav />
 
+## Reactive example
+
+Use the `page` prop to bind to the current page number.
+
+<FileSource src="/framed/PaginationNav/PaginationNavReactive" />
+
 ## Total
 
 Use the `total` prop to specify the number of pages.
diff --git a/docs/src/pages/framed/PaginationNav/PaginationNavReactive.svelte b/docs/src/pages/framed/PaginationNav/PaginationNavReactive.svelte
new file mode 100644
index 00000000..8c98cf91
--- /dev/null
+++ b/docs/src/pages/framed/PaginationNav/PaginationNavReactive.svelte
@@ -0,0 +1,16 @@
+<script>
+  import { PaginationNav, Button } from "carbon-components-svelte";
+
+  let page = 2;
+</script>
+
+<PaginationNav bind:page />
+
+<div style="margin: var(--cds-layout-01) 0">
+  <Button on:click="{() => (page = 0)}" disabled="{page === 0}">
+    Set page to 0
+  </Button>
+</div>
+
+<strong>page:</strong>
+{page}