An abbreviated version of my tabs components

App.svelte

<Tabs>
  <Tab id="settings" name="Settings">Content</Tab>
  <Tab id="sharing" name="Sharing">Content2</Tab>
</Tabs>

Tab.svelte

<script>
  export let id: string;
  export let name: string;
  export let icon: IconDefinition = undefined;

  let { activeTabId, manager, alwaysRender } = getContext<TabManager>(
    'tab-manager'
  );
  $: manager.update({ id, name, icon });
</script>  

{#if $activeTabId === id}
  <slot />
{/if}

Tabs.svelte

<script>
  export let activeTab = undefined;
  let activeTabId = writable(activeTab);
  $: activeTabId.set(activeTab);
  let tabs = [];

  setContext('tab-manager', {
    activeTabId,
    manager: {
      update(newTabData) {
        let tabIndex = tabs.findIndex((t) => t.id === newTabData.id);
        if (tabIndex >= 0) {
          tabs[tabIndex] = newTabData;
        } else {
          tabs.push(newTabData);
        }
        tabs = tabs;

        if (!activeTab) {
          activeTab = newTabData.id;
        }
      },
    },
  });
</script>

<TabsHeader {tabs} />
<div>
  <slot />
</div>