TabStrip Component Demo

Default

Active index: 0 — selected label: Overview.

import { TabStrip } from 'svelte-ui';

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

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

Positions

Active index: 0 — selected label: Overview.

import { TabStrip } from '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

Active index: 0 — selected label: Overview.

gap inserts bordered cells (rem) between tabs; pad adds bordered cells before the first / after the last tab and a matching padding-top on the strip. The base line runs continuously through every spacer cell; both default to 0 (flush). Edit the fields above to see it live.

import { TabStrip } from '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}
/>

Sizes

Active index: 0 — selected label: Dashboard.

import { TabStrip } from '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 '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 'svelte-ui';

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

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