Svelte Component


Use tabs to quickly switch between different views.

import { TabGroup, Tab } from '@skeletonlabs/skeleton';
Source Page Source WAI-ARIA


A written or printed work consisting of pages glued or sewn together along one side and bound in covers.

Tabs utilize native radio groups to control state. Bind a shared group value, then provide a unique value per tab. Please note that using the panel slot is optional.


Use the justify property to adjust tab positions.


Tabs make a good choice for custom navigation bars alongside an App Shell or within a page, and has flexible styling.

Using Svelte Stores

You may optionally choose to use Svelte writable stores to control your tab group state. Note the use of the $ sign within the bind:group property. Pair this with Skeleton's Local Storage Store for automatic persistence.

import { writable, type Writable } from 'svelte/store';

const tabSet: Writable<number> = writable(0);
<Tab bind:group={$tabSet} name="tab1" value={0}>(label)</Tab>