Tabs — Svelte

Tabs component — Svelte.

Tabs component

An accessible tabs component for organizing content into multiple panels. Same styles and functionality as the Astro Tabs: full keyboard navigation and ARIA tab pattern.

Props

  • tabs (array, required) — Array of tab objects with id and label (optional content)
  • id (string, optional) — Unique identifier for the tabs component
  • defaultTab (string, optional) — ID of the tab to show by default (defaults to first tab)
  • variant (string, optional) — 'default', 'pills', or 'underline'
  • class (string, optional) — Additional CSS classes

Basic usage

Use the content property on each tab or pass panel content via the default snippet (one child per tab, in order).

Live example
OverviewFeaturesPricing

Overview

This is the overview content. It provides a general introduction to the topic.

With content property

Live example
Tab 1Tab 2Tab 3

Content for tab 1

Variants

Default

Live example
Tab 1Tab 2Tab 3

Default variant with bottom border indicator

Pills

Live example
Tab 1Tab 2Tab 3

Pills variant with filled background for active tab

Underline

Live example
Tab 1Tab 2Tab 3

Underline variant with thicker bottom border for active tab

Default tab

Live example
FirstSecondThird

Second tab is active by default

Usage

svelte svelte 
<script>
  import Tabs from './components/svelte/Tabs.svelte';
</script>

<!-- With content on each tab -->
<Tabs
  tabs={[
    { id: 'overview', label: 'Overview', content: '<p>…</p>' },
    { id: 'api', label: 'API', content: '<p>…</p>' },
  ]}
  defaultTab="overview"
/>

<!-- With snippet (dynamic content by active tab) -->
<Tabs tabs={[{ id: 'a', label: 'A' }, { id: 'b', label: 'B' }]}>
  {#snippet children(activeTabId)}
    {#if activeTabId === 'a'}…{:else}…{/if}
  {/snippet}
</Tabs>

<Tabs tabs={items} variant="pills" />

Features

  • ARIA tab pattern — role="tablist", role="tab", role="tabpanel", aria-selected, aria-controls, aria-labelledby
  • Keyboard — Arrow Right/Down, Arrow Left/Up, Home, End, Enter, Space
  • Three variants — Default, Pills, Underline
  • Theme-aware — Adapts to all 14 themes

Astro & Vanilla: Astro · Vanilla