Tabs

Import

Tabs is a single component. The tab buttons are declared as data via the tabs prop, and the active tab is tracked by its index with bind:tab.

import { Tabs } from '@delightstack/components';
import type { TabItem } from '@delightstack/components';

Basic Usage

Each entry in tabs describes one tab button. Give it a content snippet to render that tab’s panel — label and content stay together in one place, and only the active panel is rendered.

Overview Features Pricing

Welcome to the overview panel. Get a quick summary of everything you need to know.

View code

<script>
  import { Tabs } from '@delightstack/components';

  let tab = $state(0);
</script>

{#snippet overview()}
  <p>Welcome to the overview panel.</p>
{/snippet}
{#snippet features()}
  <p>Explore the features.</p>
{/snippet}
{#snippet pricing()}
  <p>View our pricing plans.</p>
{/snippet}

<Tabs bind:tab tabs={[
  { label: 'Overview', content: overview },
  { label: 'Features', content: features },
  { label: 'Pricing', content: pricing },
]} />

Inline content

If you’d rather not write a content snippet per tab, omit it and pass children instead. The children render in the panel area and receive the active tab index, so you can gate them however you like:

<Tabs bind:tab tabs={[{ label: 'Inbox' }, { label: 'Sent' }]}>
  {#if tab === 0}
    <p>Your inbox.</p>
  {:else if tab === 1}
    <p>Your sent mail.</p>
  {/if}
</Tabs>

The children snippet also receives { tab, select }, so {#snippet children({ tab, select })} works too if you want the current index or a programmatic select(i) helper.

Examples

Pill Variant

Rounded pill-shaped tab buttons. The active pill fills with the action color.

All Active 3Archived

Everything in one place.

View code

<Tabs bind:tab pills tabs={[
  { label: 'All' },
  { label: 'Active', badge: '3' },
  { label: 'Archived' },
]} />

Boxed Variant

An enclosed, segmented-control style group where the active tab rides on an elevated surface that glides between options.

Details Activity Settings

The details panel.

View code

<Tabs bind:tab boxed tabs={[
  { label: 'Details' },
  { label: 'Activity' },
  { label: 'Settings' },
]} />

Content Transitions

Set transition to animate the panel as the active tab changes. slide moves the content in the direction you navigated; fade cross-dissolves; none (the default) swaps instantly. All transitions respect prefers-reduced-motion.

None Fade Slide

Mercury Venus Earth

Mercury

The smallest planet, closest to the Sun.

View code

<Tabs bind:tab transition="slide" tabs={[
  { label: 'Mercury', content: mercury },
  { label: 'Venus', content: venus },
  { label: 'Earth', content: earth },
]} />

Vertical Orientation

Stack tabs for sidebar-style navigation. The list and the active panel sit side by side automatically — no wrapper layout needed.

General Security Notifications

General settings — your name, language, and time zone.

View code

<Tabs bind:tab orientation="vertical" tabs={[
  { label: 'General', content: general },
  { label: 'Security', content: security },
  { label: 'Notifications', content: notifications },
]} />

With Badges

Give a tab a badge (a count or short string). Inactive badges are tinted; the active one inverts so it stays legible.

Inbox 12Sent Drafts 2

12 unread messages.

View code

<Tabs bind:tab tabs={[
  { label: 'Inbox', badge: 12 },
  { label: 'Sent' },
  { label: 'Drafts', badge: '2' },
]} />

Full Width

Stretch tab buttons to fill the available width evenly.

First Second Third

The first panel.

View code

<Tabs bind:tab full_width tabs={[
  { label: 'First' },
  { label: 'Second' },
  { label: 'Third' },
]} />

Disabled

Disable an individual tab with disabled: true on its entry, or disable the whole group with the container’s disabled prop. Disabled tabs are skipped during keyboard navigation.

Available Coming Soon Beta

This feature is ready to use.

View code

<Tabs bind:tab tabs={[
  { label: 'Available' },
  { label: 'Coming Soon', disabled: true },
  { label: 'Beta' },
]} />

Skeleton Loading

Show shimmering placeholders while the real tabs load. The placeholders match the final list’s height so nothing shifts when content arrives.

Show loaded

View code

<Tabs skeleton={loading} skeleton_count={3} bind:tab tabs={tabs} />

Props

Prop	Type	Default	Description
tab	number	0	Index of the active tab ($bindable)
tabs	TabItem[]	[]	The tab buttons to render, in order. The array index is the tab’s value.
transition	'none' | 'fade' | 'slide'	'none'	How the panel animates between tabs
pills	boolean	false	Use pill-shaped tab buttons
boxed	boolean	false	Use boxed / segmented-control tab style
orientation	'horizontal' | 'vertical'	'horizontal'	Tab list orientation
size	'0' | '1' | '2' | '3'	'1'	Size of the tabs
full_width	boolean	false	Stretch tabs to fill available width
disabled	boolean	false	Disable all tabs
skeleton	boolean	false	Show skeleton loading state
skeleton_count	number	3	Number of skeleton tab placeholders
onchange	(detail: { tab: number }) => void	undefined	Called when the active tab changes
id	string	auto	Element ID
class	string	''	Additional CSS classes
children	Snippet<[{ tab, select }]>	undefined	Panel content used when a tab has no content snippet

TabItem

Each entry in the tabs array:

Field	Type	Default	Description
label	string	—	The tab button’s label text
badge	string | number	undefined	A badge shown after the label
disabled	boolean	false	Disable this individual tab
content	Snippet	undefined	This tab’s panel content

Events

Event	Detail	Description
onchange	{ tab: number }	Fires when the active tab index changes

Types

interface TabItem {
  label: string;
  badge?: string | number;
  disabled?: boolean;
  content?: Snippet;
}

type TabsTransition = 'none' | 'fade' | 'slide';

Accessibility

• The tab list uses role="tablist" with aria-orientation
• Each button uses role="tab" with aria-selected and aria-controls
• The panel uses role="tabpanel" with aria-labelledby pointing at the active tab
• Arrow Left / Right (or Up / Down when vertical) moves between tabs
• Home / End jumps to the first / last enabled tab
• Enter / Space activates the focused tab
• Roving tabindex keeps the tab list a single tab stop; disabled tabs are skipped
• The sliding indicator and content transitions respect prefers-reduced-motion