Tabs - Skeleton

Books

Movies

Television

Books tab content

<script lang="ts">
	import { Tabs } from '@skeletonlabs/skeleton-svelte';

	let group = $state('books');
</script>

<Tabs>
    {#snippet list()}
        <Tabs.Control bind:group name="books">Books</Tabs.Control>
        <Tabs.Control bind:group name="movies">Movies</Tabs.Control>
        <Tabs.Control bind:group name="Television">Television</Tabs.Control>
    {/snippet}
    {#snippet panels()}
        <Tabs.Panel bind:group value="books">
            Books tab content
        </Tabs.Panel>
        <Tabs.Panel bind:group value="movies">
            Movies tab content
        </Tabs.Panel>
        <Tabs.Panel bind:group value="Television">
            Television tab content
        </Tabs.Panel>
    {/snippet}
</Tabs>

Icons

Easily customize tabs content with icons and arrange them in any combination you prefer.

Books

Movies

Television

Books tab content

<script lang="ts">
	import { Tabs } from '@skeletonlabs/skeleton-svelte';
    import LibraryBig from 'lucide-svelte/icons/library-big';
    import Film from 'lucide-svelte/icons/film';
    import Tv from 'lucide-svelte/icons/tv';

	let group = $state('books');
</script>

<Tabs>
    {#snippet list()}
        <Tabs.Control bind:group name="books" title="Books">
            <LibraryBig size={20} />
            Books
        </Tabs.Control>
        <Tabs.Control bind:group name="movies" title="Film">
            <Film size={20} />
            Movies
        </Tabs.Control>
        <Tabs.Control bind:group name="Television" title="Television">
            <Tv size={20} />
            Television
        </Tabs.Control>
    {/snippet}
    {#snippet panels()}
        <Tabs.Panel bind:group value="books">
            Books tab content
        </Tabs.Panel>
        <Tabs.Panel bind:group value="movies">
            Movies tab content
        </Tabs.Panel>
        <Tabs.Panel bind:group value="Television">
            Television tab content
        </Tabs.Panel>
    {/snippet}
</Tabs>

Books

Movies

Television

Books tab content

<script lang="ts">
	import { Tabs } from '@skeletonlabs/skeleton-svelte';
    import LibraryBig from 'lucide-svelte/icons/library-big';
    import Film from 'lucide-svelte/icons/film';
    import Tv from 'lucide-svelte/icons/tv';

	let group = $state('books');
</script>

<Tabs>
    {#snippet list()}
        <Tabs.Control bind:group name="books" contentClasses="flex-col">
            <LibraryBig size={20} />
            Books
        </Tabs.Control>
        <Tabs.Control bind:group name="movies" contentClasses="flex-col">
            <Film size={20} />
            Movies
        </Tabs.Control>
        <Tabs.Control bind:group name="Television" contentClasses="flex-col">
            <Tv size={20} />
            Television
        </Tabs.Control>
    {/snippet}
    {#snippet panels()}
        <Tabs.Panel bind:group value="books">
            Books tab content
        </Tabs.Panel>
        <Tabs.Panel bind:group value="movies">
            Movies tab content
        </Tabs.Panel>
        <Tabs.Panel bind:group value="Television">
            Television tab content
        </Tabs.Panel>
    {/snippet}
</Tabs>

Stretch

Tabs can be stretched to fill the available space using the width prop.

Books

Movies

television

Books tab content

<script lang="ts">
	import { Tabs } from '@skeletonlabs/skeleton-svelte';

	let group = $state('books');
</script>

<Tabs>
    {#snippet list()}
        <Tabs.Control bind:group name="books" width="w-full">Books</Tabs.Control>
        <Tabs.Control bind:group name="movies" width="w-full">Movies</Tabs.Control>
        <Tabs.Control bind:group name="Television" width="w-full">television</Tabs.Control>
    {/snippet}
    {#snippet panels()}
        <Tabs.Panel bind:group value="books">
            Books tab content
        </Tabs.Panel>
        <Tabs.Panel bind:group value="movies">
            Movies tab content
        </Tabs.Panel>
        <Tabs.Panel bind:group value="Television">
            Television tab content
        </Tabs.Panel>
    {/snippet}
</Tabs>

Justify

Books tab content

<script lang="ts">
	import { Tabs } from '@skeletonlabs/skeleton-svelte';
    import LibraryBig from 'lucide-svelte/icons/library-big';
    import Film from 'lucide-svelte/icons/film';
    import Tv from 'lucide-svelte/icons/tv';

	let group = $state('books');
</script>

<Tabs listJustify="justify-center">
    {#snippet list()}
        <Tabs.Control bind:group name="books" title="Books">
            <LibraryBig size={20} />
        </Tabs.Control>
        <Tabs.Control bind:group name="movies" title="Movies">
            <Film size={20} />
        </Tabs.Control>
        <Tabs.Control bind:group name="Television" title="Television">
            <Tv size={20} />
        </Tabs.Control>
    {/snippet}
    {#snippet panels()}
        <Tabs.Panel bind:group value="books">
            Books tab content
        </Tabs.Panel>
        <Tabs.Panel bind:group value="movies">
            Movies tab content
        </Tabs.Panel>
        <Tabs.Panel bind:group value="Television">
            Television tab content
        </Tabs.Panel>
    {/snippet}
</Tabs>

Accessibility

This component adheres to the ARIA APG. Use the preview below to test tabbing and keyboard navigation.

Books

Movies

Television

<script lang="ts">
	import { Tabs } from '@skeletonlabs/skeleton-svelte';

	let group = $state('books');
</script>

<Tabs>
    {#snippet list()}
        <Tabs.Control bind:group name="books">Books</Tabs.Control>
        <Tabs.Control bind:group name="movies">Movies</Tabs.Control>
        <Tabs.Control bind:group name="Television">Television</Tabs.Control>
    {/snippet}
    {#snippet panels()}
        <Tabs.Panel bind:group value="books">
            <button type="button" class="btn preset-filled">Book tab Content</button>
        </Tabs.Panel>
        <Tabs.Panel bind:group value="movies">
            <button type="button" class="btn preset-filled">Movies tab content</button>
        </Tabs.Panel>
        <Tabs.Panel bind:group value="Television">
            <button type="button" class="btn preset-filled">Television tab content</button>
        </Tabs.Panel>
    {/snippet}
</Tabs>

Right-to-Left

This component fully supports RTL layouts for seamless navigation and accessibility.

Books

Movies

Television

Books tab content

<script lang="ts">
	import { Tabs } from '@skeletonlabs/skeleton-svelte';
    import LibraryBig from 'lucide-svelte/icons/library-big';
    import Film from 'lucide-svelte/icons/film';
    import Tv from 'lucide-svelte/icons/tv';

	let group = $state('books');
</script>

<div dir="rtl" class="w-full">
    <Tabs>
        {#snippet list()}
        <Tabs.Control bind:group name="books" title="Books">
            <LibraryBig size={20} />
            Books
        </Tabs.Control>
        <Tabs.Control bind:group name="movies" title="Film">
            <Film size={20} />
            Movies
        </Tabs.Control>
        <Tabs.Control bind:group name="Television" title="Television">
            <Tv size={20} />
            Television
        </Tabs.Control>
        {/snippet}
        {#snippet panels()}
        <Tabs.Panel bind:group value="books">
            Books tab content
        </Tabs.Panel>
        <Tabs.Panel bind:group value="movies">
            Movies tab content
        </Tabs.Panel>
        <Tabs.Panel bind:group value="Television">
            Television tab content
        </Tabs.Panel>
        {/snippet}
    </Tabs>
</div>