Sivir UI
79

Tabs

Shows one panel at a time from a set of related views. Set variant to default, ghost, or segmented.

<script lang="ts">
    import * as Tabs from '@sivir-ui/svelte/components/tabs';

    let activeTab = $state('overview');
</script>

<div class="flex justify-center p-3 sm:p-6">
    <div class="w-full max-w-sm">
        <Tabs.Root bind:value={activeTab}>
            <Tabs.List class="grid w-full grid-cols-3">
                <Tabs.Trigger value="overview">Overview</Tabs.Trigger>
                <Tabs.Trigger value="activity">Activity</Tabs.Trigger>
                <Tabs.Trigger value="files">Files</Tabs.Trigger>
            </Tabs.List>
        </Tabs.Root>
    </div>
</div>

Installation

Copy the command below and run it in your terminal.

bunx @sivir-ui/svelte add tabs

Usage

Bind value on Root to the value of the selected Trigger and Content. It defaults to an empty string, so no tab is selected until you set it.

import * as Tabs from '@sivir-ui/svelte/components/tabs';

let tab = $state('overview');

<Tabs.Root bind:value={tab}>
  <Tabs.List>
    <Tabs.Trigger value="overview">Overview</Tabs.Trigger>
    <Tabs.Trigger value="activity">Activity</Tabs.Trigger>
  </Tabs.List>
  <Tabs.Content value="overview">3 open issues, 12 closed this week.</Tabs.Content>
  <Tabs.Content value="activity">Maya merged #482 two hours ago.</Tabs.Content>
</Tabs.Root>

Examples

Vertical

<script lang="ts">
    import * as Tabs from '@sivir-ui/svelte/components/tabs';

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

<div class="w-full max-w-lg p-2 sm:p-4">
    <Tabs.Root bind:value={tab} orientation="vertical" variant="ghost">
        <Tabs.List class="min-w-28">
            <Tabs.Trigger value="account">Account</Tabs.Trigger>
            <Tabs.Trigger value="notifications">Notifications</Tabs.Trigger>
            <Tabs.Trigger value="appearance">Appearance</Tabs.Trigger>
        </Tabs.List>
    </Tabs.Root>
</div>

Set orientation="vertical" to place the list beside the panels. Arrow keys follow the orientation: Left and Right for horizontal tabs, Up and Down for vertical. They select the next enabled tab and wrap at the ends. Home and End select the first and last tab.

Anatomy

Tabs.Root - Manages active tab state.

Tabs.List - Groups tab triggers.

Tabs.Trigger - Selects a tab panel.

Tabs.Content - Renders a tab panel.