Let's get this started

src/lib/components/Tabs.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  const {
+    labels = [] as string[],
+    children,
+  }: { labels: string[]; children: Snippet<[number]> } = $props();
+  let active = $state(0);
+
+  function select(index: number) {
+    active = index;
+  }
+</script>
+
+<div class="tabs">
+  {#each labels as label, i}
+    <button class:selected={i === active} onclick={() => select(i)}>
+      {label}
+    </button>
+  {/each}
+</div>
+
+{#if labels.length > 0}
+  {@render children(active)}
+{/if}
+
+<style>
+  .tabs {
+    display: flex;
+    gap: 0.5rem;
+    margin-bottom: 1rem;
+  }
+
+  .tabs button {
+    flex: 1;
+    background: var(--surface-alt-color);
+    color: var(--text-color);
+    border: 2px solid var(--accent-color);
+    border-radius: 4px;
+    font-family: inherit;
+    font-size: 0.8rem;
+    padding: 0.4rem 0.2rem;
+    cursor: pointer;
+    transition: background 0.2s;
+  }
+
+  .tabs button.selected {
+    background: var(--accent-color);
+    color: var(--surface-color);
+  }
+</style>