TabStrip Component Demo

Default

borderless

Active index: 0 — selected label: Overview.

import { TabStrip } from '@spaethtech/svelte-ui';

const tabs = [
  { label: 'Overview' },
  { label: 'Details' },
  { label: 'Activity' },
];
let active = $state(0);

<TabStrip tabs={tabs} bind:activeTabIndex={active} />

Positions

borderless

Active index: 0 — selected label: Overview.

import { TabStrip } from '@spaethtech/svelte-ui';

const tabs = [
  { label: 'Overview' },
  { label: 'Details' },
  { label: 'Activity' },
  { label: 'Settings', icon: cogIcon, position: 'right' },
];
let active = $state(0);

<TabStrip tabs={tabs} bind:activeTabIndex={active} />

Spacing

gap

pad

borderless

Active index: 0 — selected label: Overview.

gap inserts bordered cells (rem) between tabs; pad adds bordered cells before the first / after the last tab. The base line runs continuously through every spacer cell (the spacer cells carry only that line, so borderless drops it cleanly with no stray edges); both default to 0 (flush). For vertical room use height (below). Edit the fields above to see it live.

import { TabStrip } from '@spaethtech/svelte-ui';

const tabs = [
  { label: 'Overview' },
  { label: 'Details' },
  { label: 'Activity' },
  { label: 'Alerts', icon: alertIcon, badge: 3, position: 'right' },
  { label: 'Settings', icon: cogIcon, position: 'right' },
];
let active = $state(0);

<TabStrip
  tabs={tabs}
  bind:activeTabIndex={active}
  gap={0.5}
  pad={0.75}
/>

For vertical room, set height (rem) — the strip's total height. The tab row bottom-aligns to the base line and the extra space breathes above; size still sets the tab height. Here a 3rem bar with md (2rem) tabs + 1rem side cells:

<TabStrip {tabs} height={3} pad={1} />

Active surface

By default the active tab is transparent — it reveals whatever surface the strip sits on. When the strip sits in a container whose background differs from the content below, set activeSurface to that content's colour so the active tab flows into it and the base line disappears under it. Below, the strip sits on a tinted chrome bar; the active tab matches the --ui-color-background panel underneath.

Content panel — the active tab reads as one surface with this area.

<div class="[background-color:var(--ui-color-surface)] rounded-t-lg px-3 pt-3">
  <TabStrip {tabs} bind:activeTabIndex pad={0.5} activeSurface="var(--ui-color-background)" />
</div>
<div class="[background-color:var(--ui-color-background)] …">Content panel</div>

Sizes

borderless

Active index: 0 — selected label: Dashboard.

import { TabStrip } from '@spaethtech/svelte-ui';

const tabs = [
  { label: 'Dashboard', icon: chartIcon },
  { label: 'Alerts', icon: alertIcon, badge: 3 },
  { label: 'Settings', icon: cogIcon },
];

<TabStrip tabs={tabs} size="sm" />

Active index: 0 — selected label: Dashboard.

import { TabStrip } from '@spaethtech/svelte-ui';

const tabs = [
  { label: 'Dashboard', icon: chartIcon },
  { label: 'Alerts', icon: alertIcon, badge: 3 },
  { label: 'Settings', icon: cogIcon },
];

<!-- size="md" is the default — it can be omitted -->
<TabStrip tabs={tabs} />

Active index: 0 — selected label: Dashboard.

import { TabStrip } from '@spaethtech/svelte-ui';

const tabs = [
  { label: 'Dashboard', icon: chartIcon },
  { label: 'Alerts', icon: alertIcon, badge: 3 },
  { label: 'Settings', icon: cogIcon },
];

<TabStrip tabs={tabs} size="lg" />