Tabs - Kumo Svelte

Segmented (default)

Underline

<script lang="ts">
  import { Tabs } from 'kumo-svelte';

  const items = [
    { value: 'tab1', label: 'Tab 1' },
    { value: 'tab2', label: 'Tab 2' },
    { value: 'tab3', label: 'Tab 3' }
  ];
</script>

<div class="flex flex-col gap-6">
  <div>
    <p class="mb-2 text-sm text-kumo-subtle">Segmented (default)</p>
    <Tabs variant="segmented" {items} value="tab1" />
  </div>
  <div>
    <p class="mb-2 text-sm text-kumo-subtle">Underline</p>
    <Tabs variant="underline" {items} value="tab1" />
  </div>
</div>

Installation

Barrel

import { Tabs } from 'kumo-svelte';

Granular

import { Tabs } from 'kumo-svelte/components/tabs';

Usage

<script lang="ts">import { Tabs } from "kumo-svelte";</script><Tabs  tabs={[    { value: "overview", label: "Overview" },    { value: "settings", label: "Settings" },  ]}  selectedValue="overview"/>

Examples

Variants

Segmented (Default)

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

<script lang="ts">
  import { Tabs } from 'kumo-svelte';

  const items = [
    { value: 'tab1', label: 'Tab 1' },
    { value: 'tab2', label: 'Tab 2' },
    { value: 'tab3', label: 'Tab 3' }
  ];
</script>

<Tabs variant="segmented" {items} value="tab1" />

Underline

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

<script lang="ts">
  import { Tabs } from 'kumo-svelte';

  const items = [
    { value: 'tab1', label: 'Tab 1' },
    { value: 'tab2', label: 'Tab 2' },
    { value: 'tab3', label: 'Tab 3' }
  ];
</script>

<Tabs variant="underline" {items} value="tab1" />

Small Size

Use size="sm" for a compact tab bar that matches Input size="sm" height (h-6.5 / 26px). Useful inside toolbars and filter rows.

Segmented sm

Underline sm

<script lang="ts">
  import { Tabs } from 'kumo-svelte';

  const items = [
    { value: 'tab1', label: 'Tab 1' },
    { value: 'tab2', label: 'Tab 2' },
    { value: 'tab3', label: 'Tab 3' }
  ];
</script>

<div class="flex flex-col gap-6">
  <div>
    <p class="mb-2 text-sm text-kumo-subtle">Segmented sm</p>
    <Tabs variant="segmented" size="sm" {items} value="tab1" />
  </div>
  <div>
    <p class="mb-2 text-sm text-kumo-subtle">Underline sm</p>
    <Tabs variant="underline" size="sm" {items} value="tab1" />
  </div>
</div>

Controlled

Use the value and onValueChange props for controlled state.

Active tab: tab1

<script lang="ts">
  import { Tabs } from 'kumo-svelte';

  const items = [
    { value: 'tab1', label: 'Tab 1' },
    { value: 'tab2', label: 'Tab 2' },
    { value: 'tab3', label: 'Tab 3' }
  ];
  let value = $state('tab1');
</script>

<div class="space-y-4">
  <Tabs {items} bind:value />
  <p class="text-sm text-kumo-subtle">
    Active tab: <code class="text-sm">{value}</code>
  </p>
</div>

Many Tabs

Tabs automatically scroll horizontally when there are many items.

<script lang="ts">
  import { Tabs } from 'kumo-svelte';

  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 {items} value="overview" />
</div>

API Reference

Prop	Type	Default	Description
tabs	`TabsItem[]`	-	Array of tab items to render.
value	`string`	-	Controlled value.
selectedValue	`string`	-	Default selected value for uncontrolled mode. Ignored when value is set.
onValueChange	`(value: string) => void`	-	Called when the value changes.
activateOnFocus	`boolean`	`false`	When true, tabs are activated immediately upon receiving focus via arrow keys.
variant	`'segmented' \| 'underline'`	`"segmented"`	Tab style.
size	`'base' \| 'sm'`	`"base"`	Tab size.
listClassName	`string`	-	Additional classes for the tab list element.
indicatorClassName	`string`	-	Additional classes for the indicator element.

TabsItem

Property	Type	Required
value	string	Yes
label	string \| Snippet	Yes
disabled	boolean	No
class	string	No
className	string	No
content	Snippet	No