Navigation

Tabs

Organize content into switchable panels. Tabs support pill and link variants, icons, multiple colors, sizes, vertical orientation, and custom body snippets.

Playground

Experiment with different props in real-time.

Manage your account settings, profile information, and preferences.

Variant

Color

Size

Basic Usage

Pass an array of items with label, value, and content.

Manage your account settings, profile information, and preferences.

<script lang="ts">
  import { Tabs } from 'sv5ui';

  const items = [
    { label: 'Account', value: 'account', content: 'Manage your account settings, profile information, and preferences.' },
    { label: 'Settings', value: 'settings', content: 'Configure application settings, themes, and display options.' },
    { label: 'Notifications', value: 'notifications', content: 'Control your notification preferences and alert channels.' }
  ];
</script>

<Tabs {items} />

Variants

Two visual styles: pill (default) and link.

Pill

Manage your account settings, profile information, and preferences.

Link

Manage your account settings, profile information, and preferences.

<!-- Pill variant (default) -->
<Tabs variant="pill" {items} />

<!-- Link variant -->
<Tabs variant="link" {items} />

Sizes

4 sizes from extra small to large.

XS

Manage your account settings, profile information, and preferences.

SM

Manage your account settings, profile information, and preferences.

MD

Manage your account settings, profile information, and preferences.

LG

Manage your account settings, profile information, and preferences.

<Tabs size="xs" {items} />
<Tabs size="sm" {items} />
<Tabs size="md" {items} />
<Tabs size="lg" {items} />

Colors

8 semantic color schemes.

primary

Manage your account settings, profile information, and preferences.

secondary

Manage your account settings, profile information, and preferences.

tertiary

Manage your account settings, profile information, and preferences.

success

Manage your account settings, profile information, and preferences.

warning

Manage your account settings, profile information, and preferences.

error

Manage your account settings, profile information, and preferences.

info

Manage your account settings, profile information, and preferences.

surface

Manage your account settings, profile information, and preferences.

<Tabs color="primary" {items} />
<Tabs color="secondary" {items} />
<Tabs color="tertiary" {items} />
<Tabs color="success" {items} />
<Tabs color="warning" {items} />
<Tabs color="error" {items} />
<Tabs color="info" {items} />
<Tabs color="surface" {items} />

With Icons

Add leading icons to each tab item.

Manage your account settings.

<Tabs items={[
  { label: 'Account', icon: 'lucide:user', value: 'account', content: 'Manage your account settings.' },
  { label: 'Settings', icon: 'lucide:settings', value: 'settings', content: 'Configure your preferences.' },
  { label: 'Notifications', icon: 'lucide:bell', value: 'notifications', content: 'Control your alerts.' }
]} />

Vertical

Use orientation="vertical" for a side-by-side layout.

View and edit your profile details.

<Tabs orientation="vertical" items={[
  { label: 'Profile', value: 'profile', content: 'View and edit your profile details.' },
  { label: 'Security', value: 'security', content: 'Update your password and two-factor authentication.' },
  { label: 'Billing', value: 'billing', content: 'Manage your subscription and payment methods.' }
]} />

Disabled Items

Disable individual tabs to prevent selection.

This tab is active and clickable.

<Tabs items={[
  { label: 'Active', value: 'active', content: 'This tab is active and clickable.' },
  { label: 'Disabled', value: 'disabled', content: 'Cannot view.', disabled: true },
  { label: 'Also Active', value: 'also-active', content: 'This tab works normally.' }
]} />

Custom Body Snippet

Use the body snippet for fully custom panel content.

Account Details

Custom rendered content for the account tab.

<Tabs items={[
  { label: 'Account', value: 'account' },
  { label: 'Settings', value: 'settings' },
  { label: 'Notifications', value: 'notifications' }
]}>
  {#snippet body({ item, active })}
    {#if active}
      {#if item.value === 'account'}
        <div class="space-y-2">
          <h3 class="font-semibold">Account Details</h3>
          <p class="text-sm text-on-surface/60">Custom rendered content for the account tab.</p>
        </div>
      {:else if item.value === 'settings'}
        <div class="space-y-2">
          <h3 class="font-semibold">App Settings</h3>
          <p class="text-sm text-on-surface/60">Custom rendered content for the settings tab.</p>
        </div>
      {:else}
        <div class="space-y-2">
          <h3 class="font-semibold">Notifications</h3>
          <p class="text-sm text-on-surface/60">Custom rendered content for notifications.</p>
        </div>
      {/if}
    {/if}
  {/snippet}
</Tabs>

UI Slots

Use the ui prop to override classes on internal elements.

Slot	Description
`root`	Root tabs container
`list`	Tab list wrapper containing all triggers
`indicator`	Active tab indicator element
`trigger`	Individual tab trigger button
`leadingIcon`	Icon before the tab label
`label`	Tab label text element
`content`	Tab panel content wrapper

Snippets

Name	Props	Description
`leading`	`{ item, index, active }`	Custom leading section of tab triggers — replaces default icon
`label`	`{ item, index, active }`	Custom label section of tab triggers — replaces default label text
`trailing`	`{ item, index, active }`	Custom trailing section of tab triggers — rendered after label
`body`	`{ item, index, active }`	Custom content for each tab panel

Props

Prop	Type	Default
`items`	`TabsItem[]`	`-`
`value`	`string`	`-`
`defaultValue`	`string`	`-`
`onValueChange`	`(value: string) => void`	`-`
`variant`	`'pill' \| 'link'`	`'pill'`
`color`	`Color`	`'primary'`
`size`	`'xs' \| 'sm' \| 'md' \| 'lg'`	`'md'`
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`
`activationMode`	`'automatic' \| 'manual'`	`'automatic'`
`disabled`	`boolean`	`false`
`loop`	`boolean`	`true`
`content`	`boolean`	`true`
`leading`	`Snippet<[TabsSlotProps]>`	`-`
`label`	`Snippet<[TabsSlotProps]>`	`-`
`trailing`	`Snippet<[TabsSlotProps]>`	`-`
`body`	`Snippet<[TabsSlotProps]>`	`-`
`class`	`string`	`-`
`ui`	`Record<Slot, Class>`	`-`

Item Props

Prop	Type	Default
`label`	`string`	`-`
`icon`	`string`	`-`
`value`	`string`	`-`
`disabled`	`boolean`	`false`
`content`	`string`	`-`
`slot`	`string`	`-`
`class`	`string`	`-`

Pagination Collapsible