diff --git a/docs/src/pages/framed/Tabs/TabsDynamic.svelte b/docs/src/pages/framed/Tabs/TabsDynamic.svelte
new file mode 100644
index 00000000..59344d8d
--- /dev/null
+++ b/docs/src/pages/framed/Tabs/TabsDynamic.svelte
@@ -0,0 +1,42 @@
+<script>
+  import { Button, Tabs, Tab, TabContent } from "carbon-components-svelte";
+
+  let tabs = [
+    { title: "blue", visible: true },
+    { title: "green", visible: false },
+    { title: "red", visible: true },
+  ];
+
+  const toggleTab = (title) => {
+    for (const i in tabs) {
+      if (tabs[i].title === title) {
+        tabs[i].visible = !tabs[i].visible;
+      }
+    }
+  };
+
+  let selected = 0;
+</script>
+
+{#key tabs}
+  <Tabs bind:selected>
+    {#each tabs as tab (tab.title)}
+      {#if tab.visible}
+        <Tab label="{tab.title}" />
+      {/if}
+    {/each}
+    <div slot="content">
+      {#each tabs as tab (tab.title)}
+        {#if tab.visible}
+          <TabContent>Content for {tab.title}</TabContent>
+        {/if}
+      {/each}
+    </div>
+  </Tabs>
+{/key}
+
+<p>Selected index: {selected}</p>
+
+{#each tabs as { title } (title)}
+  <Button on:click="{() => toggleTab(title)}">Toggle {title} tab</Button>
+{/each}
diff --git a/docs/src/pages/framed/Tabs/TabsDynamicImmutable.svelte b/docs/src/pages/framed/Tabs/TabsDynamicImmutable.svelte
new file mode 100644
index 00000000..e7a70337
--- /dev/null
+++ b/docs/src/pages/framed/Tabs/TabsDynamicImmutable.svelte
@@ -0,0 +1,43 @@
+<script>
+  import { Button, Tabs, Tab, TabContent } from "carbon-components-svelte";
+
+  let tabs = [
+    { title: "blue", visible: true },
+    { title: "green", visible: false },
+    { title: "red", visible: true },
+  ];
+
+  const toggleTab = (title) => {
+    tabs = tabs.map((tab) => ({
+      ...tab,
+      visible: tab.title === title ? !tab.visible : tab.visible,
+    }));
+  };
+
+  let selected = 0;
+</script>
+
+<svelte:options immutable />
+
+{#key tabs}
+  <Tabs bind:selected>
+    {#each tabs as tab (tab.title)}
+      {#if tab.visible}
+        <Tab label="{tab.title}" />
+      {/if}
+    {/each}
+    <div slot="content">
+      {#each tabs as tab (tab.title)}
+        {#if tab.visible}
+          <TabContent>Content for {tab.title}</TabContent>
+        {/if}
+      {/each}
+    </div>
+  </Tabs>
+{/key}
+
+<p>Selected index: {selected}</p>
+
+{#each tabs as { title } (title)}
+  <Button on:click="{() => toggleTab(title)}">Toggle {title} tab</Button>
+{/each}