Tabs

A horizontal or vertical switcher for views that share a context. Comes in three variants.

Project overview

Everything is up to date.

Installation

Copy the command below and run it in your terminal.

bunx @sivir-ui/svelte add tabs

Usage

Import Tabs and use it in your component:

import * as Tabs from '$lib/sivir/components/tabs';

<Tabs.Root bind:value={tab}>
  <Tabs.List>
    <Tabs.Trigger value="tab1">Tab 1</Tabs.Trigger>
    <Tabs.Trigger value="tab2">Tab 2</Tabs.Trigger>
  </Tabs.List>
  <Tabs.Content value="tab1">Content 1</Tabs.Content>
  <Tabs.Content value="tab2">Content 2</Tabs.Content>
</Tabs.Root>

Examples

Explore Tabs in different variants and orientations.

Default

Ghost

Segmented

Vertical

Set orientation="vertical" for a side-by-side layout. Use Up and Down Arrow to move between tabs; Home and End jump to the first and last tab.

Account

Manage your profile and contact details.

Anatomy

Tabs.Root - Manages active tab state.

Tabs.List - Groups tab triggers.

Tabs.Trigger - Selects a tab panel.

Tabs.Content - Renders a tab panel.