Tab

Default

The default Tab component combines all subcomponents into a convenient wrapper. Use snippets (Svelte) or named slots (Astro) to define content for each tab.

Astro Svelte React TODO

Preview Code

Dashboard Profile Notifications Settings

Dashboard

Welcome to your dashboard! Here's an overview of your account.

---
import Tab from "../tab.astro";
import { stack } from "@pindoba/styled-system/patterns";

const tabItems = [
  { id: "dashboard", label: "Dashboard" },
  { id: "profile", label: "Profile" },
  { id: "notifications", label: "Notifications" },
  { id: "settings", label: "Settings" },
];
---

<div
  class={stack({
    gap: "xl",
    direction: "column",
    justify: "center",
    width: "100%",
  })}
>
  <Tab items={tabItems} defaultTab="dashboard">
    <div slot="dashboard">
      <h3>Dashboard</h3>
      <p>Welcome to your dashboard! Here's an overview of your account.</p>
    </div>

    <div slot="profile">
      <h3>Profile</h3>
      <p>Update your profile information and preferences here.</p>
    </div>

    <div slot="notifications">
      <h3>Notifications</h3>
      <p>Manage your notification settings and view recent alerts.</p>
    </div>

    <div slot="settings">
      <h3>Settings</h3>
      <p>Customize your application settings and preferences.</p>
    </div>
  </Tab>
</div>

Dashboard

Welcome to your dashboard! Here's an overview of your account.

<script lang="ts">
  import { Tab } from "../index.js";
  import { stack } from "@pindoba/styled-system/patterns";

  // Use 'as const' for type-safe snippet names and autocomplete on defaultTab
  const tabItems = [
    {
      id: "dashboard",
      label: "Dashboard",
    },
    {
      id: "profile",
      label: "Profile",
    },
    {
      id: "notifications",
      label: "Notifications",
    },
    {
      id: "settings",
      label: "Settings",
    },
  ] as const;
</script>

<div
  class={stack({
    gap: "xl",
    direction: "column",
    justify: "center",
    width: "100%",
  })}
>
  <Tab items={tabItems} defaultTab="dashboard">
    {#snippet dashboard()}
      <div>
        <h3>Dashboard</h3>
        <p>Welcome to your dashboard! Here's an overview of your account.</p>
      </div>
    {/snippet}

    {#snippet profile()}
      <div>
        <h3>Profile</h3>
        <p>Update your profile information and preferences here.</p>
      </div>
    {/snippet}

    {#snippet notifications()}
      <div>
        <h3>Notifications</h3>
        <p>Manage your notification settings and view recent alerts.</p>
      </div>
    {/snippet}

    {#snippet settings()}
      <div>
        <h3>Settings</h3>
        <p>Customize your application settings and preferences.</p>
      </div>
    {/snippet}
  </Tab>
</div>

Composable

For more control, use the individual components: TabGroup, TabNav, and TabPanel. This allows you to customize the layout and access the selected tab state.

Astro Svelte React TODO

Preview Code

Home About Contact

This is the Home tab content. You can build custom layouts here.

---
import TabGroup from "../tab-group.astro";
import TabNav from "../tab-nav.astro";
import TabPanel from "../tab-panel.astro";
import { stack } from "@pindoba/styled-system/patterns";

const tabs = [
  { id: "home", label: "Home" },
  { id: "about", label: "About" },
  { id: "contact", label: "Contact" },
];
---

<div
  class={stack({
    gap: "xl",
    direction: "column",
    justify: "center",
    width: "100%",
  })}
>
  <TabGroup defaultTab="home">
    <TabNav slot="tab-nav" tabs={tabs} selectedTab="home" />

    <div slot="panel">
      <TabPanel id="home" selected>
        <p>This is the Home tab content. You can build custom layouts here.</p>
      </TabPanel>

      <TabPanel id="about">
        <p>This is the About tab content with composable components.</p>
      </TabPanel>

      <TabPanel id="contact">
        <p>Contact us at: contact@example.com</p>
      </TabPanel>
    </div>
  </TabGroup>
</div>

This is the Home tab content. You can build custom layouts here.

Currently selected: home

<script lang="ts">
  import { TabGroup, TabNav, TabPanel } from "../index.js";
  import { stack } from "@pindoba/styled-system/patterns";

  let selectedTab = $state("home");

  const tabs = [
    {
      id: "home",
      label: "Home",
    },
    {
      id: "about",
      label: "About",
    },
    {
      id: "contact",
      label: "Contact",
    },
  ];
</script>

<div
  class={stack({
    gap: "xl",
    direction: "column",
    justify: "center",
    width: "100%",
  })}
>
  <TabGroup bind:selectedTab>
    <TabNav {tabs} />

    <TabPanel id="home">
      <p>This is the Home tab content. You can build custom layouts here.</p>
    </TabPanel>

    <TabPanel id="about">
      <p>This is the About tab content with composable components.</p>
    </TabPanel>

    <TabPanel id="contact">
      <p>Contact us at: contact@example.com</p>
    </TabPanel>
  </TabGroup>

  <p>Currently selected: <strong>{selectedTab}</strong></p>
</div>

With Badges

Add badge indicators to tabs using the badge property on tab items. Useful for showing counts like unread messages or pending items.

Astro Svelte React TODO

Preview Code

Inbox 12 Drafts 3 Sent Archive

Inbox

You have 12 unread messages in your inbox.

---
import Tab from "../tab.astro";
import { stack } from "@pindoba/styled-system/patterns";

const tabItems = [
  { id: "inbox", label: "Inbox", badge: "12" },
  { id: "drafts", label: "Drafts", badge: "3" },
  { id: "sent", label: "Sent" },
  { id: "archive", label: "Archive" },
];
---

<div
  class={stack({
    gap: "xl",
    direction: "column",
    justify: "center",
    width: "100%",
  })}
>
  <Tab items={tabItems} defaultTab="inbox">
    <div slot="inbox">
      <h3>Inbox</h3>
      <p>You have 12 unread messages in your inbox.</p>
    </div>

    <div slot="drafts">
      <h3>Drafts</h3>
      <p>You have 3 draft messages waiting to be sent.</p>
    </div>

    <div slot="sent">
      <h3>Sent</h3>
      <p>View all messages you've sent.</p>
    </div>

    <div slot="archive">
      <h3>Archive</h3>
      <p>Access your archived messages.</p>
    </div>
  </Tab>
</div>

Inbox

You have 12 unread messages in your inbox.

<script lang="ts">
  import { Tab } from "../index.js";
  import { stack } from "@pindoba/styled-system/patterns";

  const tabItems = [
    {
      id: "inbox",
      label: "Inbox",
      badge: "12",
    },
    {
      id: "drafts",
      label: "Drafts",
      badge: "3",
    },
    {
      id: "sent",
      label: "Sent",
    },
    {
      id: "archive",
      label: "Archive",
    },
  ] as const;
</script>

<div
  class={stack({
    gap: "xl",
    direction: "column",
    justify: "center",
    width: "100%",
  })}
>
  <Tab items={tabItems} defaultTab="inbox">
    {#snippet inbox()}
      <div>
        <h3>Inbox</h3>
        <p>You have 12 unread messages in your inbox.</p>
      </div>
    {/snippet}

    {#snippet drafts()}
      <div>
        <h3>Drafts</h3>
        <p>You have 3 draft messages waiting to be sent.</p>
      </div>
    {/snippet}

    {#snippet sent()}
      <div>
        <h3>Sent</h3>
        <p>View all messages you've sent.</p>
      </div>
    {/snippet}

    {#snippet archive()}
      <div>
        <h3>Archive</h3>
        <p>Access your archived messages.</p>
      </div>
    {/snippet}
  </Tab>
</div>

Disabled Tabs

Individual tabs can be disabled by setting disabled: true on the tab item. Disabled tabs are not focusable and cannot be selected.

Astro Svelte React TODO

Preview Code

Available Processing Completed Archived

Available Items

These items are currently available and ready for action.

---
import Tab from "../tab.astro";
import { stack } from "@pindoba/styled-system/patterns";

const tabItems = [
  { id: "available", label: "Available" },
  { id: "processing", label: "Processing", disabled: true },
  { id: "completed", label: "Completed" },
  { id: "archived", label: "Archived", disabled: true },
];
---

<div
  class={stack({
    gap: "xl",
    direction: "column",
    justify: "center",
    width: "100%",
  })}
>
  <Tab items={tabItems} defaultTab="available">
    <div slot="available">
      <h3>Available Items</h3>
      <p>These items are currently available and ready for action.</p>
    </div>

    <div slot="processing">
      <h3>Processing</h3>
      <p>Items currently being processed (This tab is disabled).</p>
    </div>

    <div slot="completed">
      <h3>Completed Items</h3>
      <p>All completed items are listed here.</p>
    </div>

    <div slot="archived">
      <h3>Archived</h3>
      <p>Archived items (This tab is disabled).</p>
    </div>
  </Tab>
</div>

Available Items

These items are currently available and ready for action.

<script lang="ts">
  import { Tab } from "../index.js";
  import { stack } from "@pindoba/styled-system/patterns";

  const tabItems = [
    {
      id: "available",
      label: "Available",
    },
    {
      id: "processing",
      label: "Processing",
      disabled: true,
    },
    {
      id: "completed",
      label: "Completed",
    },
    {
      id: "archived",
      label: "Archived",
      disabled: true,
    },
  ] as const;
</script>

<div
  class={stack({
    gap: "xl",
    direction: "column",
    justify: "center",
    width: "100%",
  })}
>
  <Tab items={tabItems} defaultTab="available">
    {#snippet available()}
      <div>
        <h3>Available Items</h3>
        <p>These items are currently available and ready for action.</p>
      </div>
    {/snippet}

    {#snippet processing()}
      <div>
        <h3>Processing</h3>
        <p>Items currently being processed (This tab is disabled).</p>
      </div>
    {/snippet}

    {#snippet completed()}
      <div>
        <h3>Completed Items</h3>
        <p>All completed items are listed here.</p>
      </div>
    {/snippet}

    {#snippet archived()}
      <div>
        <h3>Archived</h3>
        <p>Archived items (This tab is disabled).</p>
      </div>
    {/snippet}
  </Tab>
</div>

When there are more tabs than can fit in the available width, the navigation scrolls horizontally. A thin styled scrollbar appears to indicate overflow. Focus outlines and group borders remain fully visible during scrolling.

Astro Svelte React TODO

Preview Code

---
import Tab from "../tab.astro";
import { stack } from "@pindoba/styled-system/patterns";

const tabItems = [
  { id: "overview", label: "Overview" },
  { id: "analytics", label: "Analytics" },
  { id: "reports", label: "Reports" },
  { id: "customers", label: "Customers" },
  { id: "products", label: "Products" },
  { id: "orders", label: "Orders" },
  { id: "inventory", label: "Inventory" },
  { id: "shipping", label: "Shipping" },
  { id: "returns", label: "Returns" },
  { id: "preferences", label: "Preferences" },
];
---

<div
  class={stack({
    gap: "xl",
    direction: "column",
    justify: "center",
    width: "100%",
  })}
>
  <Tab items={tabItems} defaultTab="overview">
    <div slot="overview">
      <h3>Overview</h3>
      <p>A high-level summary of your store's performance and key metrics.</p>
    </div>

    <div slot="analytics">
      <h3>Analytics</h3>
      <p>Detailed traffic and conversion analytics for your store.</p>
    </div>

    <div slot="reports">
      <h3>Reports</h3>
      <p>Generate and download reports for accounting and compliance.</p>
    </div>

    <div slot="customers">
      <h3>Customers</h3>
      <p>Manage customer profiles, segments, and communication preferences.</p>
    </div>

    <div slot="products">
      <h3>Products</h3>
      <p>Add, edit, and organize your product catalog.</p>
    </div>

    <div slot="orders">
      <h3>Orders</h3>
      <p>View and process incoming orders and track fulfillment status.</p>
    </div>

    <div slot="inventory">
      <h3>Inventory</h3>
      <p>Monitor stock levels and set up reorder alerts.</p>
    </div>

    <div slot="shipping">
      <h3>Shipping</h3>
      <p>Configure shipping zones, rates, and carrier integrations.</p>
    </div>

    <div slot="returns">
      <h3>Returns</h3>
      <p>Process return requests and manage refund policies.</p>
    </div>

    <div slot="preferences">
      <h3>Preferences</h3>
      <p>Configure store preferences, payments, and integrations.</p>
    </div>
  </Tab>
</div>

<script lang="ts">
  import { Tab } from "../index.js";
  import { stack } from "@pindoba/styled-system/patterns";

  const tabItems = [
    { id: "overview", label: "Overview" },
    { id: "analytics", label: "Analytics" },
    { id: "reports", label: "Reports" },
    { id: "customers", label: "Customers" },
    { id: "products", label: "Products" },
    { id: "orders", label: "Orders" },
    { id: "inventory", label: "Inventory" },
    { id: "shipping", label: "Shipping" },
    { id: "returns", label: "Returns" },
    { id: "preferences", label: "Preferences" },
  ] as const;
</script>

<div
  class={stack({
    gap: "xl",
    direction: "column",
    justify: "center",
    width: "100%",
  })}
>
  <Tab items={tabItems} defaultTab="overview">
    {#snippet overview()}
      <div>
        <h3>Overview</h3>
        <p>A high-level summary of your store's performance and key metrics.</p>
      </div>
    {/snippet}

    {#snippet analytics()}
      <div>
        <h3>Analytics</h3>
        <p>Detailed traffic and conversion analytics for your store.</p>
      </div>
    {/snippet}

    {#snippet reports()}
      <div>
        <h3>Reports</h3>
        <p>Generate and download reports for accounting and compliance.</p>
      </div>
    {/snippet}

    {#snippet customers()}
      <div>
        <h3>Customers</h3>
        <p>
          Manage customer profiles, segments, and communication preferences.
        </p>
      </div>
    {/snippet}

    {#snippet products()}
      <div>
        <h3>Products</h3>
        <p>Add, edit, and organize your product catalog.</p>
      </div>
    {/snippet}

    {#snippet orders()}
      <div>
        <h3>Orders</h3>
        <p>View and process incoming orders and track fulfillment status.</p>
      </div>
    {/snippet}

    {#snippet inventory()}
      <div>
        <h3>Inventory</h3>
        <p>Monitor stock levels and set up reorder alerts.</p>
      </div>
    {/snippet}

    {#snippet shipping()}
      <div>
        <h3>Shipping</h3>
        <p>Configure shipping zones, rates, and carrier integrations.</p>
      </div>
    {/snippet}

    {#snippet returns()}
      <div>
        <h3>Returns</h3>
        <p>Process return requests and manage refund policies.</p>
      </div>
    {/snippet}

    {#snippet preferences()}
      <div>
        <h3>Preferences</h3>
        <p>Configure store preferences, payments, and integrations.</p>
      </div>
    {/snippet}
  </Tab>
</div>

With Action Slots

Use leftAction and rightAction snippets to place fixed elements on either side of the scrollable tab strip. The action slots stay anchored while the tabs scroll freely behind them. Use fullWidth={false} to let tabs use their natural width and trigger scrolling.

Astro Svelte React TODO

Preview Code

---
import { css } from "@pindoba/styled-system/css";
import TabGroup from "../tab-group.astro";
import TabNav from "../tab-nav.astro";
import TabPanel from "../tab-panel.astro";
import Button from "@pindoba/astro-button";
import { stack } from "@pindoba/styled-system/patterns";

const tabItems = [
  { id: "overview", label: "Overview" },
  { id: "analytics", label: "Analytics" },
  { id: "reports", label: "Reports" },
  { id: "customers", label: "Customers" },
  { id: "products", label: "Products" },
  { id: "orders", label: "Orders" },
  { id: "inventory", label: "Inventory" },
  { id: "shipping", label: "Shipping" },
  { id: "returns", label: "Returns" },
  { id: "preferences", label: "Preferences" },
];
---

<div
  class={stack({
    gap: "xl",
    direction: "column",
    justify: "center",
    width: "100%",
  })}
>
  <TabGroup defaultTab="overview">
    <TabNav
      slot="tab-nav"
      tabs={tabItems}
      selectedTab="overview"
      fullWidth={false}
    >
      <Button slot="left-action" emphasis="secondary" aria-label="Scroll left"
        >Action 1</Button
      >
      <div
        class={css({
          display: "flex",
          gap: "xs",
        })}
        slot="right-action"
      >
        <Button emphasis="secondary" shape="square" aria-label="Add tab"
          >+</Button
        >
        <Button slot="right-action" emphasis="secondary" aria-label="Add tab"
          >Action 2</Button
        >
      </div>
    </TabNav>
    <div slot="panel">
      <TabPanel id="overview" selected>
        <div>
          <h3>Overview</h3>
          <p>
            A high-level summary of your store's performance and key metrics.
          </p>
        </div>
      </TabPanel>
      <TabPanel id="analytics">
        <div>
          <h3>Analytics</h3>
          <p>Detailed traffic and conversion analytics for your store.</p>
        </div>
      </TabPanel>
      <TabPanel id="reports">
        <div>
          <h3>Reports</h3>
          <p>Generate and download reports for accounting and compliance.</p>
        </div>
      </TabPanel>
      <TabPanel id="customers">
        <div>
          <h3>Customers</h3>
          <p>
            Manage customer profiles, segments, and communication preferences.
          </p>
        </div>
      </TabPanel>
      <TabPanel id="products">
        <div>
          <h3>Products</h3>
          <p>Add, edit, and organize your product catalog.</p>
        </div>
      </TabPanel>
      <TabPanel id="orders">
        <div>
          <h3>Orders</h3>
          <p>View and process incoming orders and track fulfillment status.</p>
        </div>
      </TabPanel>
      <TabPanel id="inventory">
        <div>
          <h3>Inventory</h3>
          <p>Monitor stock levels and set up reorder alerts.</p>
        </div>
      </TabPanel>
      <TabPanel id="shipping">
        <div>
          <h3>Shipping</h3>
          <p>Configure shipping zones, rates, and carrier integrations.</p>
        </div>
      </TabPanel>
      <TabPanel id="returns">
        <div>
          <h3>Returns</h3>
          <p>Process return requests and manage refund policies.</p>
        </div>
      </TabPanel>
      <TabPanel id="preferences">
        <div>
          <h3>Preferences</h3>
          <p>Configure store preferences, payments, and integrations.</p>
        </div>
      </TabPanel>
    </div>
  </TabGroup>
</div>

<script lang="ts">
  import { Tab } from "../index.js";
  import Button from "@pindoba/svelte-button";
  import { stack } from "@pindoba/styled-system/patterns";
  import { css } from "@pindoba/styled-system/css";

  const tabItems = [
    { id: "overview", label: "Overview" },
    { id: "analytics", label: "Analytics" },
    { id: "reports", label: "Reports" },
    { id: "customers", label: "Customers" },
    { id: "products", label: "Products" },
    { id: "orders", label: "Orders" },
    { id: "inventory", label: "Inventory" },
    { id: "shipping", label: "Shipping" },
    { id: "returns", label: "Returns" },
    { id: "preferences", label: "Preferences" },
  ] as const;
</script>

<div
  class={stack({
    gap: "xl",
    direction: "column",
    justify: "center",
    width: "100%",
  })}
>
  <Tab items={tabItems} fullWidth={false} defaultTab="overview">
    {#snippet leftAction()}
      <Button emphasis="secondary" aria-label="Scroll left">Action 1</Button>
    {/snippet}

    {#snippet rightAction()}
      <div
        class={css({
          display: "flex",
          gap: "xs",
        })}
      >
        <Button emphasis="secondary" shape="square" aria-label="Add tab"
          >+</Button
        >
        <Button emphasis="secondary" aria-label="Add tab">Action 2</Button>
      </div>
    {/snippet}

    {#snippet overview()}
      <div>
        <h3>Overview</h3>
        <p>A high-level summary of your store's performance and key metrics.</p>
      </div>
    {/snippet}

    {#snippet analytics()}
      <div>
        <h3>Analytics</h3>
        <p>Detailed traffic and conversion analytics for your store.</p>
      </div>
    {/snippet}

    {#snippet reports()}
      <div>
        <h3>Reports</h3>
        <p>Generate and download reports for accounting and compliance.</p>
      </div>
    {/snippet}

    {#snippet customers()}
      <div>
        <h3>Customers</h3>
        <p>
          Manage customer profiles, segments, and communication preferences.
        </p>
      </div>
    {/snippet}

    {#snippet products()}
      <div>
        <h3>Products</h3>
        <p>Add, edit, and organize your product catalog.</p>
      </div>
    {/snippet}

    {#snippet orders()}
      <div>
        <h3>Orders</h3>
        <p>View and process incoming orders and track fulfillment status.</p>
      </div>
    {/snippet}

    {#snippet inventory()}
      <div>
        <h3>Inventory</h3>
        <p>Monitor stock levels and set up reorder alerts.</p>
      </div>
    {/snippet}

    {#snippet shipping()}
      <div>
        <h3>Shipping</h3>
        <p>Configure shipping zones, rates, and carrier integrations.</p>
      </div>
    {/snippet}

    {#snippet returns()}
      <div>
        <h3>Returns</h3>
        <p>Process return requests and manage refund policies.</p>
      </div>
    {/snippet}

    {#snippet preferences()}
      <div>
        <h3>Preferences</h3>
        <p>Configure store preferences, payments, and integrations.</p>
      </div>
    {/snippet}
  </Tab>
</div>

Custom Styling

Use the passThrough prop to customize styles for any tab slot — root, nav, navScroll, panel, panelsContainer, and panelEmpty. Each key accepts a Panda CSS SystemStyleObject.

Astro Svelte React TODO

Preview Code

Summary Metrics Exports

Summary

This tab component uses custom styling via the passThrough prop.

---
import Tab from "../tab.astro";
import { stack } from "@pindoba/styled-system/patterns";

const tabItems = [
  { id: "summary", label: "Summary" },
  { id: "metrics", label: "Metrics" },
  { id: "exports", label: "Exports" },
];

const customStyles = {
  root: {
    style: {
      border: "2px solid",
      borderColor: "accent.500",
      borderRadius: "lg",
      padding: "4",
      bg: "neutral.50",
      _dark: {
        bg: "neutral.900",
      },
    },
  },
  nav: {
    style: {
      mb: "4",
    },
  },
  panel: {
    style: {
      padding: "6",
      bg: "white",
      borderRadius: "md",
      boxShadow: "sm",
      _dark: {
        bg: "neutral.800",
      },
    },
  },
  panelsContainer: {
    style: {
      mt: "4",
    },
  },
};
---

<div
  class={stack({
    gap: "xl",
    direction: "column",
    justify: "center",
    width: "100%",
  })}
>
  <Tab items={tabItems} defaultTab="summary" passThrough={customStyles}>
    <div slot="summary">
      <h3>Summary</h3>
      <p>This tab component uses custom styling via the passThrough prop.</p>
    </div>

    <div slot="metrics">
      <h3>Metrics</h3>
      <p>View your metrics data with custom styled panels.</p>
    </div>

    <div slot="exports">
      <h3>Exports</h3>
      <p>Generate and view exports with enhanced styling.</p>
    </div>
  </Tab>
</div>

Summary

This tab component uses custom styling via the passThrough prop.

<script lang="ts">
  import { Tab } from "../index.js";
  import { stack } from "@pindoba/styled-system/patterns";

  const tabItems = [
    {
      id: "summary",
      label: "Summary",
    },
    {
      id: "metrics",
      label: "Metrics",
    },
    {
      id: "exports",
      label: "Exports",
    },
  ] as const;

  // Custom styling using passThrough
  const customStyles = {
    root: {
      style: {
        border: "2px solid",
        borderColor: "accent.500",
        borderRadius: "lg",
        padding: "4",
        bg: "neutral.50",
        _dark: {
          bg: "neutral.900",
        },
      },
    },
    nav: {
      style: {
        mb: "4",
      },
    },
    panel: {
      style: {
        padding: "6",
        bg: "white",
        borderRadius: "md",
        boxShadow: "sm",
        _dark: {
          bg: "neutral.800",
        },
      },
    },
    panelsContainer: {
      style: {
        mt: "4",
      },
    },
  };
</script>

<div
  class={stack({
    gap: "xl",
    direction: "column",
    justify: "center",
    width: "100%",
  })}
>
  <Tab items={tabItems} defaultTab="summary" passThrough={customStyles}>
    {#snippet summary()}
      <div>
        <h3>Summary</h3>
        <p>This tab component uses custom styling via the passThrough prop.</p>
      </div>
    {/snippet}

    {#snippet metrics()}
      <div>
        <h3>Metrics</h3>
        <p>View your metrics data with custom styled panels.</p>
      </div>
    {/snippet}

    {#snippet exports()}
      <div>
        <h3>Exports</h3>
        <p>Generate and view exports with enhanced styling.</p>
      </div>
    {/snippet}
  </Tab>
</div>

Tab Props

props · 8 total

prop	type	default	description
items	TabItem[]	-	Array of tab items with id, label, and optional properties like disabled or badge.
defaultTab	string	First tab's id	ID of the initially selected tab.
fullWidth	boolean	true	Whether tabs should take full width.
passThrough	{ [key in TabSlots]?: SystemStyleObject }	undefined	Custom styling for tab slots (root, nav, navScroll, panel, panelsContainer, panelEmpty, panelHidden).
snippets	Record<string, Snippet>	undefined	Object mapping tab IDs to Svelte snippets for content (Svelte only).
children	Snippet	undefined	Default content snippet when no specific snippet is provided.
leftAction	Snippet	undefined	Snippet/slot rendered to the left of the scrollable tab strip.
rightAction	Snippet	undefined	Snippet/slot rendered to the right of the scrollable tab strip.

TabGroup Props

props · 4 total

prop	type	default	description
selectedTab	string	undefined	Currently selected tab ID (bindable with bind:selectedTab in Svelte).
id	string	Auto-generated	Unique identifier for the tab group.
passThrough	{ root?: SystemStyleObject }	undefined	Custom styling for the root element.
children	Snippet	undefined	TabNav and TabPanel components.

TabNav Props

props · 5 total

prop	type	default	description
tabs	TabNavItem[]	-	Array of tab navigation items with id and label.
fullWidth	boolean	true	Whether tabs should take full width.
passThrough	{ [key in TabSlots]?: SystemStyleObject }	undefined	Custom styling for any nav slot (nav, navScrollArea, navScroll, navActionLeft, navActionRight).
leftAction	Snippet	undefined	Snippet/slot rendered to the left of the scrollable tab strip. Stays fixed while tabs scroll.
rightAction	Snippet	undefined	Snippet/slot rendered to the right of the scrollable tab strip. Stays fixed while tabs scroll.

TabPanel Props

props · 4 total

prop	type	default	description
id	string	-	Unique identifier matching a tab ID.
ariaLabelledBy	string	Auto-generated from tab group ID	ID of the element labeling this panel.
passThrough	{ panel?: SystemStyleObject }	undefined	Custom styling for panel elements.
children	Snippet	undefined	Panel content.

Accessibility

The tab component includes full keyboard navigation support:

Tab: Move focus to the active tab or first tab
Arrow Keys: Navigate between tabs (handled by the Radio component)
Home: Jump to the first tab
End: Jump to the last tab
Space/Enter: Activate the focused tab (via Radio)

All ARIA attributes are properly set for screen reader compatibility.

Components

Blocks

#Default

Dashboard

#Composable

#With Badges

Inbox

#Disabled Tabs

Available Items

#Scrolling Navigation

Overview

#With Action Slots

Overview

#Custom Styling

Summary

#Tab Props

#TabGroup Props

#TabNav Props

#TabPanel Props

#Accessibility

Default

Composable

With Badges

Disabled Tabs

Scrolling Navigation

With Action Slots

Custom Styling

Tab Props

TabGroup Props

TabNav Props

TabPanel Props

Accessibility