diff --git a/docs/src/pages/components/Tabs.svx b/docs/src/pages/components/Tabs.svx
index 19f1e72f..f76ca7c8 100644
--- a/docs/src/pages/components/Tabs.svx
+++ b/docs/src/pages/components/Tabs.svx
@@ -20,6 +20,10 @@ components: ["Tabs", "Tab", "TabContent", "TabsSkeleton"]
   </div>
 </Tabs>
 
+### Reactive example
+
+<FileSource src="/framed/Tabs/TabsReactive" />
+
 ### Container type
 
 <Tabs type="container">
diff --git a/docs/src/pages/framed/Tabs/TabsReactive.svelte b/docs/src/pages/framed/Tabs/TabsReactive.svelte
new file mode 100644
index 00000000..68a5b4ba
--- /dev/null
+++ b/docs/src/pages/framed/Tabs/TabsReactive.svelte
@@ -0,0 +1,36 @@
+<script>
+  import { Tabs, Tab, TabContent, Button } from "carbon-components-svelte";
+
+  let selected = 0;
+</script>
+
+<Tabs bind:selected>
+  <Tab label="Tab label 1" />
+  <Tab label="Tab label 2" />
+  <Tab label="Tab label 3" />
+  <div slot="content">
+    <TabContent>Content 1</TabContent>
+    <TabContent>Content 2</TabContent>
+    <TabContent>Content 3</TabContent>
+  </div>
+</Tabs>
+
+<div>
+  <h4>Selected index: {selected}</h4>
+</div>
+
+<div>
+  <Button
+    size="small"
+    disabled="{selected === 1}"
+    on:click="{() => (selected = 1)}"
+  >
+    Set index to 1
+  </Button>
+</div>
+
+<style>
+  div {
+    margin-top: var(--cds-spacing-05);
+  }
+</style>