@pindoba/svelte-tab

A complete, accessible tab component system for Svelte 5 applications.

Features

• Accessible: Built with ARIA attributes and keyboard navigation support
• Flexible: Supports multiple layouts (horizontal/vertical tabs)
• Customizable: PassThrough props for complete styling control
• Type-safe: Full TypeScript support with Svelte 5
• Composable: Use individual components or the convenience wrapper

Installation

pnpm add @pindoba/svelte-tab

Usage

Basic Example

<script>
  import { Tab } from "@pindoba/svelte-tab";
</script>

<Tab
  items={[
    { id: "tab1", label: "First Tab" },
    { id: "tab2", label: "Second Tab" },
    { id: "tab3", label: "Third Tab" },
  ]}
  defaultTab="tab1"
>
  {#snippet tab1()}
    <p>Content for first tab</p>
  {/snippet}

  {#snippet tab2()}
    <p>Content for second tab</p>
  {/snippet}

  {#snippet tab3()}
    <p>Content for third tab</p>
  {/snippet}
</Tab>

Composable Components

<script>
  import { TabGroup, TabNav, TabPanel } from "@pindoba/svelte-tab";

  let selectedTab = $state("tab1");
</script>

<TabGroup bind:selectedTab>
  <TabNav
    tabs={[
      { id: "tab1", label: "First" },
      { id: "tab2", label: "Second" },
    ]}
  />

  <TabPanel id="tab1">
    <p>First tab content</p>
  </TabPanel>

  <TabPanel id="tab2">
    <p>Second tab content</p>
  </TabPanel>
</TabGroup>

Components

Tab

Main wrapper component that combines TabGroup, TabNav, and TabPanel.

TabGroup

Container that manages tab state and provides context to children.

TabNav

Navigation bar with radio-button based tabs.

TabPanel

Content panel that shows/hides based on selection.

License

MIT