svelte-tabs

Tabs.svelte

<script lang="ts">
  interface Tab {
    title: string
  }

  export let tabs: Tab[]
  export let selected = 0
</script>

<ul class="flex w-full border-b">
  {#each tabs as tab, i}
    <li
      class="cursor-pointer -mb-px mr-1 hover:opacity-50 text-blue-500 py-2 px-4"
      class:selected={i === selected}
      on:click={() => { selected = i }}
    >
      {tab.title}
    </li>
  {/each}
</ul>

<slot {selected} />

<style>
  .selected {
    @apply font-semibold rounded-t border-l border-t border-r bg-white;
    color: var(--main-color);
    cursor: inherit;
  }
  .selected:hover {
    opacity: 1;
  }
</style>

Usage.svelte

<script lang="ts">
  const tabs = [{ title: 'Tab 1' }, { title: 'Tab 2' }]
</script>

<Tabs {tabs} bind:selected>
 {#if selected === 0}
  Tab 1 content
 {:else if selected === 1}
   Tab 2 content
 {/if}
</Tabs>