Segmented (default)

Underline

<script lang="ts">
  import * as Tabs from "kumo-svelte/components/tabs";
</script>

<div class="flex flex-col gap-6">
  <div>
    <p class="mb-2 text-sm text-kumo-subtle">Segmented (default)</p>
    <Tabs.Root variant="segmented" value="tab1">
      <Tabs.List>
        <Tabs.Trigger value="tab1">Tab 1</Tabs.Trigger>
        <Tabs.Trigger value="tab2">Tab 2</Tabs.Trigger>
        <Tabs.Trigger value="tab3">Tab 3</Tabs.Trigger>
      </Tabs.List>
    </Tabs.Root>
  </div>
  <div>
    <p class="mb-2 text-sm text-kumo-subtle">Underline</p>
    <Tabs.Root variant="underline" value="tab1">
      <Tabs.List>
        <Tabs.Trigger value="tab1">Tab 1</Tabs.Trigger>
        <Tabs.Trigger value="tab2">Tab 2</Tabs.Trigger>
        <Tabs.Trigger value="tab3">Tab 3</Tabs.Trigger>
      </Tabs.List>
    </Tabs.Root>
  </div>
</div>

Import

import * as Tabs from "kumo-svelte/components/tabs";

Usage

<script lang="ts">
  import * as Tabs from "kumo-svelte/components/tabs";
</script>

<Tabs.Root value="overview">
  <Tabs.List>
    <Tabs.Trigger value="overview">Overview</Tabs.Trigger>
    <Tabs.Trigger value="settings">Settings</Tabs.Trigger>
  </Tabs.List>
  <Tabs.Content value="overview">Overview content</Tabs.Content>
  <Tabs.Content value="settings">Settings content</Tabs.Content>
</Tabs.Root>

Examples

Variants

Segmented (Default)

A pill-shaped indicator slides between tabs on a subtle background.

<script lang="ts">
  import * as Tabs from "kumo-svelte/components/tabs";
</script>

<Tabs.Root variant="segmented" value="tab1">
  <Tabs.List>
    <Tabs.Trigger value="tab1">Tab 1</Tabs.Trigger>
    <Tabs.Trigger value="tab2">Tab 2</Tabs.Trigger>
    <Tabs.Trigger value="tab3">Tab 3</Tabs.Trigger>
  </Tabs.List>
</Tabs.Root>

Underline

A bottom border with a primary-colored indicator. The active tab has bolder text for emphasis.

<script lang="ts">
  import * as Tabs from "kumo-svelte/components/tabs";
</script>

<Tabs.Root variant="underline" value="tab1">
  <Tabs.List>
    <Tabs.Trigger value="tab1">Tab 1</Tabs.Trigger>
    <Tabs.Trigger value="tab2">Tab 2</Tabs.Trigger>
    <Tabs.Trigger value="tab3">Tab 3</Tabs.Trigger>
  </Tabs.List>
</Tabs.Root>

Small Size

Use size="sm" for a compact tab bar that matches Input size="sm" height.

Segmented sm

Underline sm

<script lang="ts">
  import * as Tabs from "kumo-svelte/components/tabs";
</script>

<div class="flex flex-col gap-6">
  <div>
    <p class="mb-2 text-sm text-kumo-subtle">Segmented sm</p>
    <Tabs.Root variant="segmented" size="sm" value="tab1">
      <Tabs.List>
        <Tabs.Trigger value="tab1">Tab 1</Tabs.Trigger>
        <Tabs.Trigger value="tab2">Tab 2</Tabs.Trigger>
        <Tabs.Trigger value="tab3">Tab 3</Tabs.Trigger>
      </Tabs.List>
    </Tabs.Root>
  </div>
  <div>
    <p class="mb-2 text-sm text-kumo-subtle">Underline sm</p>
    <Tabs.Root variant="underline" size="sm" value="tab1">
      <Tabs.List>
        <Tabs.Trigger value="tab1">Tab 1</Tabs.Trigger>
        <Tabs.Trigger value="tab2">Tab 2</Tabs.Trigger>
        <Tabs.Trigger value="tab3">Tab 3</Tabs.Trigger>
      </Tabs.List>
    </Tabs.Root>
  </div>
</div>

Controlled

Use bind:value for controlled state.

Active tab: tab1

<script lang="ts">
  import * as Tabs from "kumo-svelte/components/tabs";
  let activeTab = $state("tab1");
</script>

<div class="space-y-4">
  <Tabs.Root bind:value={activeTab}>
    <Tabs.List>
      <Tabs.Trigger value="tab1">Tab 1</Tabs.Trigger>
      <Tabs.Trigger value="tab2">Tab 2</Tabs.Trigger>
      <Tabs.Trigger value="tab3">Tab 3</Tabs.Trigger>
    </Tabs.List>
  </Tabs.Root>
  <p class="text-sm text-kumo-subtle">Active tab: <code class="text-sm">{activeTab}</code></p>
</div>

Many Tabs

Tabs automatically scroll horizontally when there are many items.

<script lang="ts">
  import * as Tabs from "kumo-svelte/components/tabs";
  const items = [
    { value: "overview", label: "Overview" },
    { value: "analytics", label: "Analytics" },
    { value: "reports", label: "Reports" },
    { value: "notifications", label: "Notifications" },
    { value: "settings", label: "Settings" },
    { value: "billing", label: "Billing" },
    { value: "security", label: "Security" },
    { value: "integrations", label: "Integrations" },
  ];
</script>

<div class="w-full max-w-md">
  <Tabs.Root value="overview">
    <Tabs.List>
      {#each items as item (item.value)}
        <Tabs.Trigger value={item.value}>{item.label}</Tabs.Trigger>
      {/each}
    </Tabs.List>
  </Tabs.Root>
</div>

API Reference

Tabs

No component-specific props. This component accepts child content or standard forwarded attributes.

Tabs.Content

No component-specific props. This component accepts child content or standard forwarded attributes.

Tabs.List

Prop	Type	Default
size	`KumoTabsSize`	—
variant	`KumoTabsVariant`	—

Tabs.Root

Prop	Type	Default
activateOnFocus	`boolean`	—
indicatorClassName	`string`	—
size	`KumoTabsSize`	`KUMO_TABS_DEFAULT_VARIANTS.size`
variant	`KumoTabsVariant`	`KUMO_TABS_DEFAULT_VARIANTS.variant`

Tabs.Trigger

Prop	Type	Default
size	`KumoTabsSize`	—
variant	`KumoTabsVariant`	—