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

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

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

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

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

---
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

---
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
      >
      <Button
        slot="right-action"
        emphasis="secondary"
        shape="square"
        aria-label="Add tab">+</Button
      >
      <Button slot="right-action" emphasis="secondary" aria-label="Add tab"
        >Action 2</Button
      >
    </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";

  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()}
      <Button emphasis="secondary" shape="square" aria-label="Add tab">+</Button
      >
      <Button emphasis="secondary" aria-label="Add tab">Action 2</Button>
    {/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

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

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

TabGroup Props

Prop
`selectedTab`	selectedTab Currently selected tab ID (bindable with bind:selectedTab in Svelte). Type string Default undefined Required No
`id`	id Unique identifier for the tab group. Type string Default Auto-generated Required No
`passThrough`	passThrough Custom styling for the root element. Type { root?: SystemStyleObject } Default undefined Required No
`children`	children TabNav and TabPanel components. Type Snippet Default undefined Required Yes

TabNav Props

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

TabPanel Props

Prop
`id`	id Unique identifier matching a tab ID. Type string Default - Required Yes
`ariaLabelledBy`	ariaLabelledBy ID of the element labeling this panel. Type string Default Auto-generated from tab group ID Required No
`passThrough`	passThrough Custom styling for panel elements. Type { panel?: SystemStyleObject } Default undefined Required No
`children`	children Panel content. Type Snippet Default undefined Required Yes

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

#Tab

#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

Tab

Default

Composable

With Badges

Disabled Tabs

Scrolling Navigation

With Action Slots

Custom Styling

Tab Props

TabGroup Props

TabNav Props

TabPanel Props

Accessibility